問題描述
我是第一次制作傳單，并面臨繪制圓圈和編輯(更改圓圈位置)的問題.
I am working on leaflet for the very first time and facing the issue with drawing circles and editing (changing location of circle).
我面臨的問題是:-
將圓從一個位置編輯(移動)到另一個位置會改變其半徑.
注意:請嘗試在給定的小提琴中在地圖頂部創建圓圈，然后通過單擊編輯按鈕將其移動到底部.
Editing (moving) circle from one location to another changes its radius.
Note: Pls try to create circle on top of map in given fiddle and then move it to the bottom by clicking edit button.
如果我在地圖的頂部創建圓圈，它可以正常工作.但如果我在地圖底部創建圓圈，它只會在地圖上打印一個 DOT.我檢查了幾個例子，它在任何地方都可以正常工作.
這里是工作示例，其中圓圈創建和移動圓圈完全很好.
If I create circle on top section of map it works fine. But If I create circle on bottom of map it only prints a single DOT on map.
I checked few examples and it works fine everywhere.
Here is the working example where circle creation and moving circle is completely fine.
我沒有使用像谷歌地圖這樣的地理地圖.我正在使用靜態圖像，因為這是我的項目要求.
I am not using the geographic map like google maps. I am using and static image as it is my project requirement.
這是我的代碼的小提琴.
Here is the fiddle of my code.
只需使用以下代碼即可啟用畫圈:
Just using following code to enable drawing circle :
enabled : this.options.circle,
handler : new L.Draw.Circle(map,this.options.circle),
title : L.drawLocal.draw.toolbar.buttons.circle
推薦答案
您看到的是墨卡托投影固有的距離失真(以及基于它的谷歌墨卡托投影，這是大多數在線地圖所固有的).因為您的地圖從縮放 1 開始，所以向北/向南拖動圓形標記會導致很多失真.
What you're seeing is distortion in distance inherent in the mercator projection (and the Google Mercator projection based off it that is inherent to most online maps). Because your map starts at zoom 1, dragging the circle marker north/south will cause a lot of distortion.
因此，與其將您的圖像地理配準到全局邊界框，不如嘗試將其地理配準到更小的物體.在您的情況下，您正在添加相對于 maxZoom 的圖像疊加層，因此通過增加 maxZoom，您的圖像將覆蓋在地球的較小區域上，并且您將看到更少(或沒有)跨緯度的失真.
So, rather than georeference your image to a global bounding box, try georeferencing it to something much smaller. In your case, your are adding your image overlay relative to the maxZoom, so by increasing maxZoom, your image will be overlayed over a smaller area of the globe, and you will see less (or no) distortions across latitudes.
我將 maxZoom 從 4 更改為 14，結果看起來效果很好:fiddle here:var w = 553, h = 329, url = 'https://kathleenmillar.files.wordpress.com/2012/10/picture2.png';
I changed the maxZoom from 4 to 14, and the result looked like it worked well: 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);
這篇關于傳單圓圈繪圖/編輯問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！