mapkit.js如何获取地图边界与四角坐标 实现类似google.maps getBounds效果

核心属性说明 #

visibleMapRect是和边界计算直接相关的官方属性，并非无关联的冗余返回值。它采用Web墨卡托投影的归一化比例坐标，而非直接的经纬度值：

• origin：可视矩形左上角在投影坐标系下的坐标，x对应经度方向归一化值，y对应纬度方向归一化值
• size：可视矩形的投影尺寸，width为东西方向的投影跨度，height为南北方向的投影跨度

边界计算实现 #

MapKit JS 目前没有提供名为getBounds()的、和Google Maps API完全同名的开箱方法，但内置了完整的坐标转换能力，不需要自行实现投影换算逻辑：

• 无需手动推导墨卡托投影公式，直接调用地图实例自带的convertPointOnMapToCoordinate方法，即可将投影坐标点转为标准经纬度坐标
• 可视区域四个角的经纬度可通过如下方式计算（效果完全等价于Google Maps map.getBounds()的返回范围）：
  • 西北角（左上角）：map.convertPointOnMapToCoordinate(new MapKit.Point(visibleMapRect.origin.x, visibleMapRect.origin.y))
  • 东北角（右上角）：map.convertPointOnMapToCoordinate(new MapKit.Point(visibleMapRect.origin.x + visibleMapRect.size.width, visibleMapRect.origin.y))
  • 西南角（左下角）：map.convertPointOnMapToCoordinate(new MapKit.Point(visibleMapRect.origin.x, visibleMapRect.origin.y + visibleMapRect.size.height))
  • 东南角（右下角）：map.convertPointOnMapToCoordinate(new MapKit.Point(visibleMapRect.origin.x + visibleMapRect.size.width, visibleMapRect.origin.y + visibleMapRect.size.height))

常见避坑点 #

• 不要通过map.center的经纬度加减固定偏移值推算边界。投影坐标对应的经纬度跨度会随所在纬度、地图缩放级别动态变化，固定偏移的计算结果存在明显误差
• 不需要引入第三方投影计算库，上述内置转换方法的精度和官方地图渲染的边界完全一致
• 转换完成的四个坐标可直接组装为MapKit.BoundingRegion对象，实现和Google Maps边界对象完全一致的使用能力

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