javascript - 传单在 map 上固定大小的圆圈

Question

我正在使用 leaflet.js 创建一些标记和圆圈。我正在使用下面给出的代码来绘制圆圈:-

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

现在，如果我在 UI 上编辑这个圆并垂直向下拖动这个圆，圆的大小会增加，反之亦然。类似的问题是用不同的 lat lngs 调用上面给定的方法。相同半径 (1000) 大小的圆在 map 上绘制为不同大小。

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

我检查了 L.circleMarker，但它采用以像素为单位的半径，而且 circleMarkers 不会在放大缩小事件中缩放。这就是我不能使用 circleMarkers 的原因。

我将 crs 选项更改为 4326 但没有成功。我使用的是 imageOverlay 而不是 tileset。我创建了一个 fiddle 。
http://jsfiddle.net/newBee_/88bdrzkr/12/

尝试在顶部区域创建一个圆圈，然后进行编辑并将其向下移动。它的体积增大。这就是我要阻止的。这将解决在相同大小的 map 的不同区域通过代码生成相同半径的圆的问题。请帮忙。

请提出建议。

Answer 1

编辑:

看起来这是一个 bug deep into Leaflet 0.x : L.Circle 半径计算使用硬编码地球投影而​​不是指定的 CRS。 Leaflet 1.0 似乎在使用与地球相关的计算之前正确检查了 CRS。

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

演示:http://jsfiddle.net/88bdrzkr/13/

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

L.Circle.include({
    _getLngRadius: function () {
        return this._getLatRadius();
    }
});

关于 iH8 的回答，覆盖 L.CRS.Simple.scale 的技巧类似于高度缩放(256 因子将 latLng 扩展到更多像素 - 任何高数字就可以了)。在高倍率下，您正在沿着非常短的距离移动圆圈，纬度变化不大。因此，即使错误仍然存​​在，您也看不到半径有任何明显差异。

使用更高缩放的演示，根本没有方法覆盖:http://jsfiddle.net/kau6g8fk/1/

对于圆圈看起来更像是视觉辅助工具的需求，这 3 种解决方案中的任何一种都足够了。

---

编辑:CRS 根本不是问题。

上一条消息:

如果您使用 Leaflet 进行室内映射，正如您的 jsFiddle 所建议的(或任何平面类型的 map ，而不是将像地球这样的球体投影到平面上)，您可以简单地使用 L.CRS.Simple