Leaflet像素大小取决于缩放级别

Question

我需要在地图上展示一个5x5度的饼状图。我可以使用 leaflet-dvf 库来显示饼状图，但我需要提供半径的像素值，并且目前它是静态的。

我希望能够动态设置，在任何缩放级别下，饼状图都可以填充5x5的正方形区域（即半径为5x5度长度）。

我如何知道在不同缩放级别下5x5度正方形的边长对应的像素长度？

谢谢。

- Bruno Deprez

Answer 1

这将计算每像素的米数。

metresPerPixel = 40075016.686 * Math.abs(Math.cos(map.getCenter().lat / 180 * Math.PI)) / Math.pow(2, map.getZoom()+8);

- synkyo

Answer 2

我使用了以下页面，该页面提供了叶片地图上每米像素数与缩放级别的对应关系：

http://wiki.openstreetmap.org/wiki/Zoom_levels

然后我计算了赤道上一个5x5的正方形的长度：556000米。 然后我储存了缩放级别为0时的长度比例： $scope.lengthRatio = 556000 / 156412 // 以米/像素为单位

最后，我根据缩放级别($scope.mapZoom)获取饼图的半径：

var radius = $scope.lengthRatio * Math.pow(2,$scope.mapZoom)) / 2

/2是因为我想要半径而不是直径。

简单吧！

- Bruno Deprez