使用OpenLayers API zoomToExtent 缩放

一、概述

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

二、步骤

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

三、具体步骤

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

   
   image.png

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

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

// 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);

参考openlayer官方文档

1. OpenLayers.Projection

   
   image.png

2. setCenter

   
   image.png