Question

绘图，例如Leaflet地图上一个4公里半径的圆圈很简单。但是，标记该圈（没有插件）并不那么简单。以下小提琴在某种程度上有效，但4km标签在您更改缩放级别时会跳舞：

知道如何改善这个吗？

（请不要建议任何插件，除非它们维护得很好并准备好使用Leaflet 1.0，谢谢！）

Answer 1

示例中的标签是偏移的，因为您以不可靠的方式计算米/像素。无法保证centerLatLng完全落在地图上像素的中心。实际上，它几乎可以保证不，因此map.containerPointToLatLng([centerPoint.x, centerPoint.y])不会产生与centerLatLng相同的坐标，并且您的距离将减少多达50％。通过计算metersPerPixelY这样的结果，您将获得更满意的结果：

metersPerPixelY = map.containerPointToLatLng([centerPoint.x, centerPoint.y + 1]).distanceTo(map.containerPointToLatLng([centerPoint.x, centerPoint.y]));

但是，此方法仍然存在一些错误，因为真实的米/像素随纬度而变化。我的建议是使用leaflet-geodesy来创建〜圆形多边形，并根据这些多边形的边界放置标签。 L.circle个对象没有提供任何方法来获取它们的边界，因此插件是必需的。下面将创建一个144边的多边形（足够精细以在任何比例下看起来都是圆形）并在圆的北边缘放置一个标签：

var circ = LGeo.circle(centerLatLng, radiusMeters, {parts: 144}).addTo(map);
var labelLatLng = [circ.getBounds().getNorth(),centerLatLng[1]];
var labelUp = L.divIcon({ className: 'four', html: '4km' });
L.marker(labelLatLng, { icon: labelUp }).addTo(map);

这肯定不是获取所需标签位置的唯一方法，但它相对简单，插件可以正常使用Leaflet 1.0。这是一个小例子：

http://jsfiddle.net/nathansnider/a022bL4q/

将“vector”应用于Leaflet中的Point或LatLng

1 个答案: