mapbox - Mapbox 在移动浏览器中使用 unproject 的结果不准确

Question

我在确定可见视口的纬度/经度范围时遇到了问题，经过大量挖掘后，我认为我可以通过获取画布大小并使用 unproject 来完成这项工作，这对于桌面测试非常有效。作为一个例子，这显示了一个简单的地图并绘制了一个可见区域大小的多边形，如果你缩小一点你应该看到它。

  var displayBoundingBox = new mapboxgl.LngLatBounds(sw, ne);

  displayBoundingBox._ne.lat = map.unproject([map.getCanvas().width, 0]).lat;
  displayBoundingBox._ne.lng = map.unproject([map.getCanvas().width, 0]).lng;
  displayBoundingBox._sw.lat = map.unproject([0, map.getCanvas().height]).lat;
  displayBoundingBox._sw.lng = map.unproject([0, map.getCanvas().height]).lng;

https://jsbin.com/kesezamiya/2

如果您在移动浏览器（例如 iOS Chrome 或 Safari）上访问相同的链接，则多边形看起来大约是可见地图大小的 3-4 倍。我不确定这是否与视网膜显示器或其他东西有关，但似乎无法找到任何已报告的地方，我认为识别可见区域将是一个非常常见的问题。

任何建议都会受到欢迎，尤其是这是否是 unproject 或画布尺寸的问题。

标签： mapboxmapbox-gl-js

Answer 1

我的目标是跟踪可见区域，以便在地图移动时（驾驶时）刷新数据。我发现地图边界表示的区域大于可见区域，经过大量搜索后发现我需要取消投影画布以获得角落的纬度/经度。

在我的桌面上工作后，我在 iOS 上进行了测试，这一切都变得很奇怪，画布并没有以同样的方式取消投影，经过更多挖掘后发现这与（我认为）视网膜样式显示有关，这可以使用 window.xml 来确定。 devicePixelRatio，因此如下所示更改我的代码会导致在所有设备上识别出正确的视口。即在视网膜设备上返回的画布大小是预期的 3 倍。

displayBoundingBox._ne.lat = map.unproject([map.getCanvas().width / window.devicePixelRatio, 0]).lat;
displayBoundingBox._ne.lng = map.unproject([map.getCanvas().width / window.devicePixelRatio, 0]).lng;
displayBoundingBox._sw.lat = map.unproject([0, map.getCanvas().height / window.devicePixelRatio]).lat;
displayBoundingBox._sw.lng = map.unproject([0, map.getCanvas().height / window.devicePixelRatio]).lng;