我是第一次制作传单,并且面临绘制圆和编辑(更改圆的位置)的问题.

我面临的问题是：

>将圆从一个位置编辑(移动)到另一位置会更改其半径.
注意：请尝试在给定的小提琴中在地图顶部创建圆,然后通过单击“编辑”按钮将其移动到底部.
>如果我在地图的顶部创建圆圈,则效果很好.但是,如果我在地图底部创建圆,它只会在地图上打印一个DOT.
我检查了几个示例,它在任何地方都可以正常工作.
Here is the working example,其中创建圆和移动圆完全可以.

我没有使用谷歌地图这样的地理地图.我正在使用静态图像,因为这是我的项目要求.

这是fiddle of my code.

只需使用以下代码即可启用绘图圆：

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

解决方法:

您所看到的是墨卡托投影中固有的距离失真(以及大多数在线地图所固有的基于该距离的Google Mercator投影).因为您的地图从缩放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);