小冊子圈子繪圖/編輯問題

Question

我正在第一次爲小冊子工作，面臨與繪製圈子和編輯（改變圈子的位置）的問題。

我所面臨的問題是： -

1. 編輯（移動）圈從一個地方到另一個改變其半徑。
   注意：請嘗試在給定的小提琴上創建地圖頂部的圓形，然後通過單擊編輯按鈕將其移動到底部。

2. 如果我在地圖上部分創建圓圈，它可以正常工作。但是如果我在地圖的底部創建一個圓圈，它只會在地圖上打印一個DOT。 我檢查了幾個例子，它在任何地方都能正常工作。
   Here is the working example圓圈創建和移動圓圈完全正確。

我沒有使用google map等地理地圖。我正在使用靜態圖像，因爲這是我的項目要求。

這裏是fiddle of my code。

只需使用下面的代碼，以使繪製圓：

enabled : this.options.circle, 
handler : new L.Draw.Circle(map,this.options.circle), 
title : L.drawLocal.draw.toolbar.buttons.circle 

Answer 1

你看到的是扭曲的距離墨卡託投影固有的（以及基於關閉它的谷歌墨卡託投影所固有的大多數在線地圖）。由於您的地圖從縮放1開始，將圓圈標記向南/北拖動會導致大量失真。

因此，不要將圖像映射到全局邊界框，而是嘗試將其映射到更小的地方。在你的情況下，你正在添加你的圖像覆蓋相對於maxZoom，所以通過增加maxZoom，你的圖像將被覆蓋在地球的一個較小的區域，並且你會看到橫跨緯度的較少（或沒有）失真。

我改變了MAXZOOM從4到14，並且將結果看起來像它工作良好：fiddle here： VAR W = 553，H = 329，URL = 'https://kathleenmillar.files.wordpress.com/2012/10/picture2.png';

var map = L.map('map', { 
     minZoom : 10, 
     maxZoom : 14, 
     center : [ w/2, h/2 ], 
     zoom : 11, 
     crs : L.CRS.Simple 

    }); 

    // calculate the edges of the image, in coordinate space 
    var southWest = map.unproject([ 0, h ], map.getMaxZoom() - 3); 
    var northEast = map.unproject([ w, 0 ], map.getMaxZoom() - 3); 
    var bounds = new L.LatLngBounds(southWest, northEast);