Javascript 套用；向量"；在传单上点或拉

例如，在传单地图上画一个半径为4km的圆圈非常简单。然而，标记这个圆圈（没有插件）不再那么简单了。下面的提琴有些效果，但是

4km

标签会随着您更改缩放级别而摆动：

你知道我该如何改进吗

---

（请不要推荐任何插件，除非它们维护良好，并已准备好用于1.0版手册，谢谢！）

您的示例中的标签是偏移的，因为您以不可靠的方式计算米/像素。无法保证

centerlating

正好位于地图上像素的中心。事实上，几乎可以保证不会出现这种情况，因此

map.containerPointToLatling（[centerPoint.x，centerPoint.y]）

将不会产生与

centerLatling

相同的坐标，并且您的距离将减少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配合使用。这里有一个小提琴的例子：

---

非常好，感谢您提供示例代码！通过计算标签位置，我已经取得了很好的效果，但是，包装API使其与传单兼容不是很优雅，因此我更喜欢您的解决方案。我刚刚看到传单1.0圆形确实支持

getBounds（）

，因此应该可以在不使用插件的情况下执行此操作，一旦Mapbox.js被更新，可以很好地使用传单1.0。它看起来像是圆的

getBounds（）

方法。