問題描述

我正在使用 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

這篇關于地圖上的傳單固定大小圓圈的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！