526互联

OpenLayers 4326地图 根据距离设置地图分辨率

发布时间 2023-07-03 17:01:21作者: echo_lovely

问题：给一个距离，如何确定4326地图缩放等级或者分辨率使地图视口范围为这个距离

  1. 我本来打算计算从地图视口左上角到右下角的距离来计算地图缩放的，然后发现不好算，我也不会算，于是就计算水平方向距离的缩放。
  2. 然后我发现了地图分辨率的定义使是 ： 分辨率——屏幕上一个像素代表多少地图坐标单位
  3. 而问ChatGPT得知，4326地图的地图坐标单位是°，没错，经纬度的度
  4. 然后思路就来了，算出这段距离在水平方向上占据的经度数量，然后再除以地图的像素宽度，不就是分辨率了

Code


/**
 * 根据距离设置地图分辨率
 * @param {Number} distance 空间中的实际距离，单位：米
 */
export function setResolutionByDistance(distance) {
  const map = window.map // Openlayers的地图对象我放到window里面了
  const latitude = map.getView().getCenter()[1] // 当前地图中心坐标的纬度值
  const pixelWidth = map.getSize()[0]
  const equatorCircumference = 40075160; // 地球赤道周长（以米为单位）
  const latitudeRad = latitude * Math.PI / 180

  const longitudeCount = distance / (equatorCircumference * Math.cos(latitudeRad) / 360) // 跨越的经度数量
  const resolution = longitudeCount / pixelWidth // 分辨率

  map.getView().setResolution(resolution)
}

Reference

  1. https://blog.csdn.net/hi_kevin/article/details/34452601
  2. https://ask.supermap.com/125936