問(wèn)題描述

我正在使用 Leaflet.js 創(chuàng)建一些標(biāo)記和圓圈.我正在使用下面給出的代碼來(lái)繪制圓圈:-

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
        });

現(xiàn)在，如果我在 UI 上編輯這個(gè)圓圈并垂直向下拖動(dòng)這個(gè)圓圈，圓圈的大小會(huì)增加，反之亦然.類(lèi)似的問(wèn)題是用不同的 lat lngs 調(diào)用上述給定的方法.相同半徑 (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.

我的要求是在地圖上到處放置相同半徑和相同大小的標(biāo)記.

My requirement is to place marker with same radius with same size on map everywhere.

我檢查了 L.circleMarker，但它需要以像素為單位的半徑，并且 circleMarkers 不會(huì)在 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 選項(xiàng)更改為 4326 但沒(méi)有成功.我使用的是 imageOverlay 而不是tileset.我創(chuàng)造了一個(gè)小提琴.
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/

嘗試在頂部區(qū)域創(chuàng)建一個(gè)圓圈，然后對(duì)其進(jìn)行編輯并向下移動(dòng).它的大小增加了.這就是我想要停止的.這將解決通過(guò)代碼在相同大小的地圖的不同區(qū)域生成相同半徑的圓的問(wèn)題.請(qǐng)幫忙.

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.

請(qǐng)?zhí)岢鼋ㄗh.

推薦答案

看起來(lái)這是一個(gè) 深入 Leaflet 0.x 的錯(cuò)誤:L.Circle 半徑計(jì)算使用硬編碼的地球投影而??不是指定的 CRS.Leaflet 1.0 似乎在使用與地球相關(guān)的計(jì)算之前正確檢查了 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.

對(duì)于您的情況，簡(jiǎn)單地覆蓋錯(cuò)誤的方法似乎可以修復(fù)它，至少在視覺(jué)上是這樣.

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();
    }
});

關(guān)于 iH8 的回答，覆蓋 L.CRS.Simple.scale 的技巧類(lèi)似于高度縮放(256 因子將 latLng 擴(kuò)展到更多像素 - 任何高數(shù)字會(huì)做).在高變焦時(shí)，您正在沿非常短的距離移動(dòng)圓圈，而緯度不會(huì)發(fā)生太大變化.因此，即使錯(cuò)誤仍然存??在，您也看不到任何明顯的半徑差異.

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.

僅使用更高縮放的演示，根本沒(méi)有方法覆蓋:http://jsfiddle.net/kau6g8fk/1/

Demo of using just higher zoom, no method override at all: http://jsfiddle.net/kau6g8fk/1/

如果您需要讓圓圈看起來(lái)更像視覺(jué)輔助工具，這 3 種解決方案中的任何一種都足夠了.

For your need where the circle looks to be more like a visual aid, any of these 3 solutions is enough.

CRS 根本不是問(wèn)題.

the CRS is not the issue at all.

上一條消息:

如果您使用 Leaflet 進(jìn)行室內(nèi)映射，正如您的 jsFiddle 建議的那樣(或任何平面類(lèi)型的地圖，而不是像地球這樣的球體在平面上的投影)，您可以簡(jiǎn)單地使用 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

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