将 "vector" 应用于 Leaflet 中的点或经纬度

Question

绘图，例如Leaflet 地图上的 4 公里半径圆非常简单。然而，标记那个圈子（没有插件）不再那么简单了。以下 fiddle 有点管用，但 4km 标签会随着您更改缩放级别而跳动：

知道如何改进吗？

（请不要推荐任何插件，除非它们得到很好的维护并为 Leaflet 1.0 做好准备，谢谢！）

Answer 1

您示例中的标签发生偏移，因为您正在以不可靠的方式计算 meters/pixel。无法保证 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]));

但是，这个方法还是会有一些误差，因为真正的meters/pixel随着纬度的不同而变化。我的建议是使用 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 配合良好。这是一个例子 fiddle:

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

将 "vector" 应用于 Leaflet 中的点或经纬度

Apply "vector" to Point or LatLng in Leaflet

javascript

maps

leaflet