应用“;矢量“;指向传单中的Point或LatLng

Apply "vector" to Point or LatLng in Leaflet

本文关键字：Point LatLng 单中 矢量 应用      更新时间：2023-09-26

例如，在传单地图上绘制一个4公里半径的圆圈非常简单。然而，给这个圈子贴标签（没有插件）已经不是那么简单了。以下小提琴在一定程度上起作用，但当您更改缩放级别时，4km标签会跳舞：

https://jsfiddle.net/svoop/y1jqoxu7/

你知道我该怎么改进吗？

（请不要建议任何插件，除非它们得到了很好的维护并为传单1.0做好了准备，谢谢！）

示例中的标签是偏移的，因为您以不可靠的方式计算米/像素。不能保证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]));

然而，这种方法仍然会有一些误差，因为真实的米/像素随纬度而变化。我的建议是使用传单大地测量来创建~圆形多边形，并根据这些多边形的边界放置标签。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);

这当然不是获得您想要的标签位置的唯一方法，但它相对简单，插件与传单1.0配合使用也很好。下面是一个小提琴的例子：

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

相关文章：