Question

我使用leaflet.js创建几个标记和圆圈。我使用下面给出的代码绘制圆圈： -

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

现在，如果我在UI上编辑此圆圈并将此圆圈垂直向下拖动，则圆圈尺寸会增加，反之亦然。类似的问题是使用不同的lat lng调用上面给出的方法。在地图上绘制具有不同尺寸的相同半径（1000）大小的圆。

我的要求是在地图上放置具有相同尺寸的相同半径的标记。

我检查了L.circleMarker，但是它以半径为单位，并且circleMarkers也没有在zoomin zoomout事件中缩放。这就是为什么我不能使用circleMarkers。

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

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

请建议。

Answer 1

编辑：

看起来这是bug deep into Leaflet 0.x：L。圆形半径计算使用硬编码的地球投影而不是指定的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扩展到更多像素 - 任何高数字都可以）。在高变焦时，您将沿非常短的距离移动圆圈，纬度不会发生太大变化。所以你看不到任何明显的半径差异，即使bug仍然存在。

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

根据您的需要，圆圈看起来更像是视觉辅助，这三种解决方案中的任何一种都足够了。

编辑：CRS根本不是问题。

上一条消息：

如果您使用Leaflet进行室内制图，就像您的jsFiddle建议的那样（或任何平面类型的地图，而不是像地球一样投射到平面上），您只需使用L.CRS.Simple

Answer 2

如Ghybs在回答中指出的那样，找出了这个错误的解决方案

非常奇怪的问题，结果是重载L.CRS.Simple的{{1}}方法返回scale修复此问题。这是你的JSFiddle的一个分支：http://jsfiddle.net/kau6g8fk/我不确定这个问题的原因，需要更多的研究。如果我找到时间会怎么做。在此处找到解决方案：http://codepen.io/mike_beweb/pen/BymKGe

下面的答案是在海报编辑他/她的问题之前给出的，并且表明使用的CRS是L.CRS.Simple，而我推测默认的CRS。我会把它留在原因，因为它可能会对一些用户派上用场：

256 * Math.pow(2, zoom)的拖动尺寸变化是因为您的地图的默认球形墨卡托投影（EPSG：3857）。最好用图像解释，这里是一个每隔10度有一个格子叠加的地图：

关于Plunker的演示：Leaflet 0.7.5 EPSG:3857 Spherical

当你从赤道越来越远时，每个飞机都会变得更高。因此，您拖动它时，您的圆圈会自动变得越来越高。您可以使用等距矩形投影（EPSG：4326），其中每个平面都具有相同的大小，无论距赤道的距离如何：

关于Plunker的演示：Leaflet 0.7.5 EPSG:4326 Equirectangular

通过equirectangle投影，您不会遇到现在遇到的问题，但是您必须将您的图块集更改为EPSG：4326投影，与EPSG相比，这些投影难以实现：3857个tilesets。

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

地图上的传单固定大小圆

2 个答案: