問(wèn)題描述

我是第一次制作傳單，并面臨繪制圓圈和編輯(更改圓圈位置)的問(wèn)題.

I am working on leaflet for the very first time and facing the issue with drawing circles and editing (changing location of circle).

我面臨的問(wèn)題是:-

1. 將圓從一個(gè)位置編輯(移動(dòng))到另一個(gè)位置會(huì)改變其半徑.
   注意:請(qǐng)嘗試在給定的小提琴中在地圖頂部創(chuàng)建圓圈，然后通過(guò)單擊編輯按鈕將其移動(dòng)到底部.

1. 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.

如果我在地圖的頂部創(chuàng)建圓圈，它可以正常工作.但如果我在地圖底部創(chuàng)建圓圈，它只會(huì)在地圖上打印一個(gè) DOT.我檢查了幾個(gè)例子，它在任何地方都可以正常工作.
這里是工作示例，其中圓圈創(chuàng)建和移動(dòng)圓圈完全很好.

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.

我沒(méi)有使用像谷歌地圖這樣的地理地圖.我正在使用靜態(tài)圖像，因?yàn)檫@是我的項(xiàng)目要求.

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.

只需使用以下代碼即可啟用畫(huà)圈:

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

推薦答案

您看到的是墨卡托投影固有的距離失真(以及基于它的谷歌墨卡托投影，這是大多數(shù)在線地圖所固有的).因?yàn)槟牡貓D從縮放 1 開(kāi)始，所以向北/向南拖動(dòng)圓形標(biāo)記會(huì)導(dǎo)致很多失真.

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.

因此，與其將您的圖像地理配準(zhǔn)到全局邊界框，不如嘗試將其地理配準(zhǔn)到更小的物體.在您的情況下，您正在添加相對(duì)于 maxZoom 的圖像疊加層，因此通過(guò)增加 maxZoom，您的圖像將覆蓋在地球的較小區(qū)域上，并且您將看到更少(或沒(méi)有)跨緯度的失真.

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，結(jié)果看起來(lái)效果很好: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);

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