在地图上的小册子固定大小圆圈

我使用leaflet.js创建几个标记和圆圈。我使用的是下面给出的代码来绘制圆： -在地图上的小册子固定大小圆圈

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

现在如果我编辑的UI这个圈子并拖动这个圈子垂直向下，圆尺寸增大，反之一个反之亦然。类似的问题是用不同的经度来调用上面给出的方法。同一半径（1000）尺寸的圆在地图上绘制为不同尺寸。

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

我检查了L.circleMarker，但它需要以像素为单位的半径，并且circleMarkers在缩放缩放事件中不缩放。这就是为什么我不能使用circleMarkers。

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

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

请建议。

来源

2015-10-20 New Bee

删除线出在他的回答

很奇怪的问题指出了Ghybs这种错误的解决方案，事实证明，超载 L.CRS.Simple的 scale方法返回 256 * Math.pow(2, zoom)修复了这个。这里是你的JSFiddle的一个分支： http://jsfiddle.net/kau6g8fk/我不确定这个问题的原因，它需要更多的研究。如果我找到时间，我会做。在这里找到解决方案： http://codepen.io/mike_beweb/pen/BymKGe

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

您的L.Circle的拖动尺寸变化是因为您的地图的默认球面墨卡托投影（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瓷砖组相比，这很难实现。

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

来源

2015-10-20 11:39:46 iH8

你能否请建议我如何切换到equirectangular投影？ –

哎呦，真的很抱歉。我看到我把equierctangular的错误例子连接起来。现在更正。您可以查看示例中的代码：http://embed.plnkr.co/Ww5TXtfl7YcrxYDfgoWs/preview只需将'L.Map'的'crs'选项设置为'L.CRS.EPSG4326'，然后添加一个EPSG4326瓷砖层。我使用了WMS，第一个我可以用google找到，但也有其他的，只是做一个搜索。 – iH8

非常感谢您的帮助:)。我将crs选项更改为4326，但没有成功。我正在使用imageOverlay而不是tileset。我创造了一个小提琴。尝试在顶部区域创建一个圆，然后编辑并向下移动它。它的尺寸增加了。 :(这是我想要停止的，这样可以解决在同一地图的不同地区通过代码生成相同半径的圆的问题，请帮助 –

编辑：

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

对于你的情况，简单地覆盖错误的方法似乎修复它，至少在视觉上。

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

“校正”的方法在脚本中包括：

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

关于IH8的回答，覆盖L.CRS.Simple.scale诀窍是类似于高变焦（在256因素扩大的经纬度到更远的像素 - 任何高数量都可以）。在高变焦时，您将沿着非常短的距离移动您的圆圈，因此纬度变化不大。所以你不会在半径上看到任何可见的差异，即使这个bug仍然存在。

只使用高变焦的演示，没有方法覆盖所有：http://jsfiddle.net/kau6g8fk/1/

您的需求，其中圆看上去更像视觉辅助，这些解决方案3的就够了。

编辑：CRS根本不是问题。

上一条消息：

如果使用单张室内地图，为您的jsfiddle建议（或任何平面型地图，而不是像地球球体投射到一个平面上），你可以简单地使用L.CRS.Simple

来源

2015-10-27 13:34:04 ghybs

小提琴使用'L.CRS.Simple' :) – iH8

谢谢你指出，我没有确实注意！ :-) – ghybs

:)经过一些更多的研究，我想出了相同的结论，并希望分享，但我看到你击败了我一拳。好东西，谢谢分享。由同一用户发现相同的问题（？！？！）其中有一个类似的解决方案的最小/最大/缩放级别，这使我在正确的道路上：http://stackoverflow.com/questions/29366268/leaflet-circle-drawing-editing-issue – iH8

在地图上的小册子固定大小圆圈

回答

相关问题