Javascript 地图上固定大小的圆形传单

我正在使用传单.js创建一些标记和圆圈。我正在使用以下给定的代码绘制圆：-

 L.circle([ lat, lng ], 1000, {
            color : colorCode,
            stroke : false,
            fillColor : colorCode,
            fillOpacity : 0.7
        });

现在，如果我在UI上编辑这个圆，并垂直向下拖动这个圆，圆的大小会增加，反之亦然。使用不同的lat lngs调用上述给定方法也存在类似问题。相同半径（1000）大小的圆在地图上以不同大小绘制

我的要求是在地图上的任何地方都放置相同半径、相同大小的标记

我检查了L.circleMarker，但它以像素为单位，并且circleMarker在zoomin zoomout事件中不缩放。这就是为什么我不能使用圆圈标记器

我将crs选项更改为4326，但没有成功。我使用的是imageOverlay而不是tileset。我创造了一把小提琴

尝试在顶部区域创建一个圆，然后编辑并向下移动它。它的尺寸增加了。这就是我想要停止的。这将解决在相同大小的地图的不同区域通过代码生成相同半径的圆的问题。请帮忙

---

请提出建议。

删除了Ghybs在回答中指出的错误解决方案

非常奇怪的问题，原来重载

L.CRS.Simple

的

scale

方法返回

256*Math.pow（2，zoom）

解决了这个问题。这里是您的一个问题：我不确定这个问题的原因，它需要更多的研究。如果我有时间就可以了。在此处找到解决方案：

下面的答案是在海报编辑他/她的问题之前给出的，显示使用的CRS是L.CRS.Simple，而我假设是默认的CRS。我会保持机智，因为它可能对某些用户有用：

拖动

L.Circle

时的大小更改是因为地图默认的球形墨卡托投影（EPSG:3857）。最好用图像来解释，这是一张地图，每10度有一个分划覆盖：

Plunker上的演示：

当你远离赤道时，每一个平面都会变得更高。因此，你的圆圈会自动变得更高，你越往北/南拖动它。您可以使用等矩形投影（EPSG:4326），其中每个平面的大小都相同，与赤道的距离无关：

Plunker上的演示：

使用等矩形投影，您不会遇到现在的问题，但您必须将您的瓷砖集更改为具有EPSG:4326投影的瓷砖集，与EPSG:3857瓷砖集相比，这些瓷砖集很难获得

如果您不愿意或无法更改投影，另一个解决方案可能是绕过L.CircleMarker并根据当前zoomlevel更改标记的半径。但在我看来，这相当丑陋。

编辑：

看起来这是a:L。圆半径计算使用硬编码地球投影，而不是指定的CRS。传单1.0似乎在使用与地球相关的计算之前正确检查了CRS

对于您的情况，简单地重写错误的方法似乎可以修复它，至少在视觉上是这样

演示：

要包含在脚本中的“已更正”方法：

L.Circle.include({
_getLngRadius:函数（）{
返回此项。_getLatRadius（）；
}
});

关于iH8的答案，覆盖

L.CRS.Simple.scale

的技巧类似于高度缩放（

256

因子将latLng扩展到更多像素-任何高数字都可以）。在“高缩放”下，您将沿着非常短的距离移动圆，而纬度变化不大。因此，即使bug仍然存在，也看不到半径上的任何可见差异

演示使用更高的缩放，完全没有方法覆盖：

如果圆看起来更像视觉辅助工具，那么这三种解决方案中的任何一种都足够了

---

编辑：CRS根本不是问题所在

上一条信息：

---

如果您使用传单进行室内制图，正如您的JSFIDLE建议的那样（或任何平面类型的地图，而不是像地球一样的球体投影到平面上），您可以简单地使用

L.CRS.Simple

您能建议我如何切换到等矩形投影吗？哇，真的很抱歉。我发现我把一个错误的例子链接到了Equirectangle。现在更正。您可以查看示例中的代码：只需将

L.Map

的

crs

选项设置为

L.crs.EPSG4326

并添加一个EPSG4326 tillelayer。我使用了WMS，这是第一个我可以通过谷歌找到的，但是还有其他的，只要搜索一下就可以了。非常感谢你的帮助：）。我将crs选项更改为4326，但没有成功。我使用的是imageOverlay而不是tileset。我创造了一把小提琴。尝试在顶部区域创建一个圆，然后编辑并向下移动它。它的尺寸增大了（.这就是我想要停止的。这将解决在相同大小的地图的不同区域通过代码生成相同半径的圆的问题。请帮助您将该信息添加到原始问题中，通过编辑它。无法在评论中给出正确的答案，这不是它们的意思。我已经编辑了or原始问题并添加了信息。：）小提琴使用

L.CRS.Simple

：）谢谢你指出，我确实没有注意到！：-）：）经过更多的研究，我得出了同样的结论，并想与大家分享，但我看到你击败了我。好东西，谢谢分享。同一个用户发现了相同的问题（？！？！），该用户有一个类似的解决方案，即提高最小/最大/缩放级别，这使我走上了正确的道路：感谢您共享链接！有趣的是，有人实际上问了两次，而第一个问题被认为有一个有效的解决方案。对于所描述的用例，我认为给定的3种变通方法中的任何一种都应该足够好。我又问了同样的问题。当时，通过设置高缩放级别解决了问题。我创造了圆圈，移动了，这很好（但在场景背后有一个