传单固定大小圆圈在地图上 [英] leaflet fixed size circle on map
问题描述
我使用leaflet.js创建几个标记和圆圈。我使用下面给出的代码绘制圆圈： -
I am using leaflet.js to create few markers and circles. I am using the below given code to draw circles : -
L.circle([ lat, lng ], 1000, {
color : colorCode,
stroke : false,
fillColor : colorCode,
fillOpacity : 0.7
});
现在，如果我在用户界面编辑此圈子并将此圈子垂直向下拖动，则圈子大小会增加反之亦然。类似的问题是使用不同的lat lng调用上面给出的方法。在地图上绘制具有不同尺寸的相同半径（1000）大小的圆。
Now if I edit this circle on UI and drag this circle vertically downwards, the circle size increases and vice a versa. Similar issue is with calling the above given method with different lat lngs. The same radius (1000) sized circle get plotted with different sizes on map.
我的要求是在地图上放置具有相同尺寸的相同半径的标记。
My requirement is to place marker with same radius with same size on map everywhere.
我检查了L. circleMarker但它需要以像素为单位的半径，并且circleMarkers也不会在zoomin zoomout事件中缩放。这就是为什么我不能使用circleMarkers。
I checked L.circleMarker but it takes radius in pixels and also circleMarkers does not scale in zoomin zoomout events. That is why I can't use circleMarkers.
我将crs选项更改为4326但没有成功。我使用的是imageOverlay而不是tileset。我创造了一个小提琴。
http://jsfiddle.net/newBee_/88bdrzkr/12/
I changed the crs option to 4326 but no success. I am using imageOverlay not tileset. I have created a fiddle.
http://jsfiddle.net/newBee_/88bdrzkr/12/
尝试在顶部区域创建一个圆圈然后编辑并向下移动它。它的尺寸增加了。这就是我想要停止的。这将解决在相同大小的地图的不同区域中通过代码生成相同半径的圆的问题。请帮忙。
Try creating a circle on top area then edit and move it downwards. It's size increases. This is what I want to stop. This will resolve the problem of generating circle of same radius via code in different area of map with same size. Please help.
请建议。
推荐答案
编辑：
看起来这是深入到Leaflet 0.x的错误：L。圆形半径计算使用硬编码的地球投影而不是指定的CRS。在使用与地球相关的计算之前，Leaflet 1.0似乎正确地检查了CRS。
It looks like this is a bug deep into Leaflet 0.x: L.Circle radius computation uses hard-coded Earth projection rather than the specified CRS. Leaflet 1.0 seems to correctly check for the CRS before using the Earth-related computation.
对于您的情况，简单地覆盖错误的方法似乎解决了它，至少在视觉上。
For your case, simply overriding the faulty method seems to fix it, at least visually.
演示： http://jsfiddle.net/88bdrzkr / 13 /
要包含在脚本中的更正方法：
The "corrected" method to include in your script:
L.Circle.include({
_getLngRadius: function () {
return this._getLatRadius();
}
});
关于iH8的答案，重写 L.CRS.Simple.scale的技巧类似于高度缩放（ 256 因子将latLng扩展到更多像素 - 任何高数字都可以）。在高变焦时，您将沿非常短的距离移动圆圈，纬度不会发生太大变化。所以你没有看到任何明显的半径差异，即使bug仍然存在。
Regarding iH8's answer, the trick to override L.CRS.Simple.scale is similar to highly zooming (the 256 factor expands the latLng to much further pixels - any high number will do). At high zoom, you are moving your circle along a very short distance, for which the latitude does not change much. So you do not see any visible difference in radius, even though the bug is still there.
使用更高的缩放演示，完全没有方法覆盖： http://jsfiddle.net/kau6g8fk/1/
Demo of using just higher zoom, no method override at all: http://jsfiddle.net/kau6g8fk/1/
根据您的需要，圆圈看起来更像是视觉辅助，这三种解决方案中的任何一种都足够了。
For your need where the circle looks to be more like a visual aid, any of these 3 solutions is enough.
编辑：CRS根本不是问题。
the CRS is not the issue at all.
上一条消息：
如果您使用Leaflet室内映射，正如你的jsFiddle建议的那样（或者任何平面型地图，而不是像地球一样投射到平面上），你可以简单地使用 L.CRS.Simple
If you use Leaflet for indoor mapping, as your jsFiddle suggests (or any flat type map, as opposed to the projection of a sphere like Earth on to a plane), you could simply use L.CRS.Simple
这篇关于传单固定大小圆圈在地图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
