使用OpenLayers API zoomToExtent 缩放至范围

一、概述

渲染某一条路，需要呈现整条路(需求)
不需要显示整条范围，只需要看见某条路

二、步骤

拿到整条高速的所有features
计算出最小的两个经纬度作为两个点
使用 zoomToExtent 设置范围

三、具体步骤

拿到的一整条路的features为数组，具体数据为下图

image.png
如何计算得到两个点的经纬度

渲染某一条路，需要呈现整条路

// 1. 排序得到最大最小经度和最大最小纬度

// 获取中心经纬度集合
var featureData = [];
for (let i = 0; i < features.length; i++) {
    let center = features[i].geometry.getCentroid();
    featureData.push(center);
}

var xMaxMin = featureData.sort((a,b)=>{
    return (a.x - b.x)
})

var yMaxMin = featureData.sort((a,b)=>{
    return (a.y - b.y)
})

let maxX = xMaxMin[0];  // 最大经度
let mixX = xMaxMin[xMaxMin.length-1];   // 最小经度

let maxY = yMaxMin[0];  // 最大纬度
let mixY = yMaxMin[yMaxMin.length-1];   // 最小纬度

// 2. 计算最大经(纬)度与最小经(纬)度的距离
let xDis = maxX.x - mixX.x;     // 经度距离
let yDis = maxY.y - mixY.y;     // 纬度距离

/**
 * 3. 通过对比经度和纬度计算得出的距离，来决定使用经度或者纬度
 * 如果经度距离大于纬度距离，则使用最大经度和最小经度
 * 反之使用最大纬度和最小纬度
 */
let lonlat = [];   // 范围数组
var polygon = '';  // 两点构成的面
if(xDis > yDis){
    lonlat = [[maxX.x, maxX.y], [mixX.x, mixX.y]]
    polygon = 'POLYGON(('+maxX.x + ' ' + maxX.y + ','+maxX.x + ' ' + mixX.y + ','+mixX.x + ' ' + mixX.y + ','+mixX.x + ' ' + maxX.y + ','+maxX.x + ' ' + maxX.y + '))';
}else{
    lonlat = [[maxY.x, maxY.y], [mixY.x, mixY.y]]
    polygon = 'POLYGON(('+maxY.x + ' ' + maxY.y + ','+maxY.x + ' ' + mixY.y + ','+mixY.x + ' ' + mixY.y + ','+mixY.x + ' ' + maxY.y + ','+maxY.x + ' ' + maxY.y + '))';
}

// 4. 设置范围
myMap.zoomToExtent(lonlat)

不需要显示整条范围，只需要看见某条路

// 1. 设置显示投影参数，显示坐标皆为4326
let proj = new OpenLayers.Projection("EPSG:4326");

// 2. 获取中心点坐标
var center = featureData[parseInt(featureData.length/2)];

// 3. 坐标系转换（4326 To 900913）
let point = new OpenLayers.Geometry.Point(center.x, center.y);
point.transform(proj, myMap.map.getProjectionObject());

// 4. 设置中心点位置并把地图层级设置为12
myMap.map.setCenter([point.x,point.y],12);

方法二、使用getBounds()方法（更新于2020/10/26）

/**
* 通过getBounds()方法拿到feature的top、bottom、left、right做比较
 * @param {*} myMap 地图
 * @param {*} features Feature集合
 */
setMapZoomToExtent: function (myMap, features) {
    var left = 0,right = 0,top = 0,bottom = 0;
    for (let i = 0; i < features.length; i++) {
        var polygon = features[i].geometry.toString();
        var feature = this.wkt_reader.read(polygon);
        feature.geometry.transform(
            new OpenLayers.Projection('EPSG:900913'),
            new OpenLayers.Projection('EPSG:4326')
        )
        var bounds = feature.geometry.getBounds();
        if(!left){
            left = bounds.left;
        }
        if(!right){
            right = bounds.right;
        }
        if(!top){
            top = bounds.top;
        }
        if(!bottom){
            bottom = bounds.bottom;
        }

        if(bounds.left > left){
            left = bounds.left;
        }
        if(bounds.right < right){
            right = bounds.right;
        }
        if(bounds.top > top){
            top = bounds.top;
        }
        if(bounds.bottom < bottom){
            bottom = bounds.bottom;
        }
    }
    /** 坐标系为4326 */
    var lonlat = [[left, bottom], [right, top]];
    myMap.zoomToExtent(lonlat,false);
},

参考openlayer官方文档

OpenLayers.Projection

image.png
setCenter

image.png
getBounds

image.png

最后编辑于：2020.10.26 11:41:51