传单圈子绘图/编辑问题 [英] leaflet circle drawing / editing issue

问题描述

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

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

问题我面对的是： -

1. 从一个位置到另一个位置编辑（移动）圆会改变其半径。 >
   注意：请尝试在给定小提琴的地图上创建圆圈，然后通过单击编辑按钮将其移动到底部。

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.

如果我在地图的顶部创建圆圈，它可以正常工作。但如果我在地图底部创建圆圈，它只会在地图上打印一个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

推荐答案

你所看到的是失真mercator投影中固有的距离（以及基于它的Google Mercator投影，这是大多数在线地图所固有的）。因为地图从缩放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，结果看起来效果很好：在这里小提琴：
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);

这篇关于传单圈子绘图/编辑问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！