传单圆圈绘图/编辑问题 [英] 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

推荐答案

您看到的是墨卡托投影固有的距离失真(以及基于它的谷歌墨卡托投影，这是大多数在线地图所固有的).因为您的地图从缩放 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，结果看起来效果很好: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);

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