传单圆绘图/编辑问题

Question

我是第一次制作传单，遇到了绘制圆圈和编辑（更改圆圈位置）的问题。

我面临的问题是：-

将圆从一个位置编辑（移动）到另一个位置会改变其半径。
注意：请尝试在给定 fiddle 的地图顶部创建圆圈，然后通过单击编辑按钮将其移动到底部。
如果我在地图的顶部创建圆圈，效果很好。但是如果我在地图底部创建圆圈，它只会在地图上打印一个点。我检查了几个例子，它在任何地方都运行良好。
Here is the working example 其中圆圈创建和移动圆圈完全没问题。

我没有像 google 地图那样使用地理地图。我正在使用静态图像，因为这是我的项目要求。

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

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

Answer 1

您看到的是墨卡托投影中固有的距离失真（以及基于它的 Google 墨卡托投影，这是大多数在线地图所固有的）。因为您的地图从缩放 1 开始，拖动圆圈标记 north/south 会导致大量变形。

因此，与其将图像地理配准到全局边界框，不如尝试将其地理配准到更小的东西。在您的情况下，您正在添加相对于 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);

传单圆绘图/编辑问题

leaflet circle drawing / editing issue

javascript

leaflet

mapbox