Question

我第一次正在制作传单，面对绘制圆圈和编辑（更改圆圈位置）的问题。

我面临的问题是： -

从一个位置编辑（移动）圆圈会改变其半径 注意：请尝试在给定小提琴的地图上创建圆圈，然后点击编辑按钮将其移到底部。
如果我在地图的顶部创建圆圈，它可以正常工作。但如果我在地图底部创建圆圈，它只会在地图上打印一个DOT。我检查了几个例子，到处都可以正常工作 Here is the working example 圈子创建和移动圈完全没问题。

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

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

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 =＆＃39; https://kathleenmillar.files.wordpress.com/2012/10/picture2.png＆＃39;;

    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);

传单圈子绘图/编辑问题

1 个答案: