Vue3-OpenLayers动态修改Extent数组：历史地图视图适配问题

核心思路 #

放弃动态修改view.extent的方案（该操作会触发视图重绘循环，导致卡顿），改用以下方式实现需求：

1. 固定投影的坐标系范围为地图完整尺寸，避免动态修改带来的不稳定
2. 计算初始缩放级别，确保地图在横向容器中完整显示且留有边距
3. 通过自定义constrainCenter函数，在放大到一定级别后限制视图中心，防止地图移出显示区域

修改后的组件代码 #

<template>
    <div class="map-container">
        <ol-map :loadTilesWhileAnimating="true" style="height:980px" ref="mapContainer">
            <ol-view 
                ref="view" 
                :center="center" 
                :rotation="rotation" 
                :zoom="zoom" 
                :maxZoom="maxZoom" 
                :minZoom="minZoom" 
                :projection="projection"
                :constrainCenter="constrainCenter"
                @zoomChanged="onZoomChanged"
            />
            
            <ol-image-layer>
                <ol-source-image-static 
                    :url="imgUrl" 
                    :imageSize="size" 
                    :imageExtent="imageExtent" 
                    :projection="projection"
                ></ol-source-image-static>
            </ol-image-layer>
        </ol-map>
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'

export default {
    props: {
        imgurl: {
            type: String,
            default: "http://localhost:8080/karten/map-1.jpg",
        },
        width: {
            type: Number,
            default: 1024
        },
        height: {
            type: Number,
            default: 968
        }
    },

    setup(props) {
        const zoom = ref(1)
        const minZoom = ref(0.5)
        const maxZoom = ref(6)
        const rotation = ref(0)
        const size = ref([props.width, props.height])
        const center = ref([props.width / 2, props.height / 2]);
        const mapContainer = ref(null)
        const currentZoom = ref(zoom.value)

        // 固定地图的完整范围作为投影坐标系
        const imageExtent = ref([-props.width/2, -props.height/2, props.width/2, props.height/2])
        const projection = reactive({
            code: 'xkcd-image',
            units: 'pixels',
            extent: imageExtent.value
        })

        // 计算初始缩放级别：让地图在横向容器中完整显示，且留有10%的边距
        const calculateInitialZoom = () => {
            if (!mapContainer.value) return
            const containerWidth = mapContainer.value.clientWidth
            // 容器宽高比 vs 地图宽高比
            const containerRatio = containerWidth / 980 // 容器高度固定为980px
            const mapRatio = props.width / props.height
            
            // 计算能完整显示地图的最大缩放级别（留有10%边距）
            let initialZoom
            if (containerRatio > mapRatio) {
                // 容器更宽，以地图高度为基准计算
                initialZoom = (980 * 0.9) / props.height
            } else {
                // 容器更高，以地图宽度为基准计算
                initialZoom = (containerWidth * 0.9) / props.width
            }
            zoom.value = initialZoom
            minZoom.value = initialZoom * 0.8 // 允许稍微缩小一点
        }

        // 限制视图中心：当缩放级别超过1时，不让地图边缘移出容器
        const constrainCenter = (center) => {
            if (currentZoom.value <= 1) return center // 缩放较小时不限制拖动

            const view = view.value
            if (!view) return center

            const resolution = view.getResolution()
            const containerSize = view.getSize()
            if (!containerSize) return center

            // 计算当前视图对应的地图范围半宽高
            const halfViewWidth = (containerSize[0] * resolution) / 2
            const halfViewHeight = (containerSize[1] * resolution) / 2

            // 限制中心在地图范围内，确保视图不会超出地图边界
            const newX = Math.max(halfViewWidth - props.width/2, Math.min(props.width/2 - halfViewWidth, center[0]))
            const newY = Math.max(halfViewHeight - props.height/2, Math.min(props.height/2 - halfViewHeight, center[1]))

            return [newX, newY]
        }

        const onZoomChanged = (val) => {
            currentZoom.value = val
        }

        onMounted(() => {
            calculateInitialZoom()
            // 监听容器大小变化，重新计算缩放（可选）
            window.addEventListener('resize', calculateInitialZoom)
        })

        return {
            center,
            projection,
            zoom,
            minZoom,
            maxZoom,
            rotation,
            size,
            imageExtent,
            imgUrl: props.imgurl,
            onZoomChanged,
            constrainCenter,
            mapContainer
        }
    }
}
</script>

关键修改点说明 #

1. 固定投影范围：将投影的extent设为地图的完整尺寸，确保坐标系稳定，避免动态修改带来的重绘循环
2. 初始缩放计算：在onMounted中根据容器尺寸和地图尺寸的比例，计算出能让地图完整显示且留有边距的初始缩放级别
3. 自定义中心限制：通过constrainCenter函数，仅在缩放级别大于1时限制视图中心的移动范围，确保放大时地图不会移出容器；缩放较小时允许自由拖动
4. 移除动态extent逻辑：删除了原代码中修改extent的逻辑，彻底避免反馈循环

内容的提问来源于stack exchange，提问作者bluelemonade