地图上的传单固定大小圆圈 [英] 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
        });

现在，如果我在 UI 上编辑这个圆圈并垂直向下拖动这个圆圈，圆圈的大小会增加，反之亦然.类似的问题是用不同的 lat lngs 调用上述给定的方法.相同半径 (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.Circle 半径计算使用硬编码的地球投影而​​不是指定的 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 扩展到更多像素 - 任何高数字会做).在高变焦时，您正在沿非常短的距离移动圆圈，而纬度不会发生太大变化.因此，即使错误仍然存​​在，您也看不到任何明显的半径差异.

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/

如果您需要让圆圈看起来更像视觉辅助工具，这 3 种解决方案中的任何一种都足够了.

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屋！