在地圖上的小冊子固定大小圓圈

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

在地圖上的小冊子固定大小圓圈

回答

相關問題