如何在平铺图像上绘制圆形或矩形leaflet.js

Question

我知道在使用leaflet.js时可以在平铺图像上绘制圆形或矩形。 这里有一个链接http://jsfiddle.net/tridip/p6ssbvqj/

leaflet具有称为circle() polygon() etc函数

我的界面就像我有4个按钮，一个是圆形，矩形，加载图像，保存图像。

当页面第一次加载时，我将通过leaflet.js显示图像，当用户点击圆形或矩形按钮时，我必须允许用户在图像上绘制一个圆形或矩形。 the question which jquery or any javascript library i should use which will allow to draw a circle or rectangle on image ?

接下来我需要在客户端存储圆形或矩形的坐标，因为稍后我可以在db中保存这些信息。

第三，当我再次重新加载图像时，我需要在同一图像和用户绘制的相同位置显示绘制的圆形或矩形。

请指导我如何实现它。 我从来没有做过，所以我不知道。 请帮我。 谢谢

编辑1

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

1） L.FeatureGroup()的含义是什么？ L.FeatureGroup()做什么？

2）下面的代码是做什么的？

var drawControl = new L.Control.Draw({
    draw: {
        position: 'topleft',
        polygon: {
            allowIntersection: false,
            drawError: {
                color: '#b00b00',
                timeout: 1000
            },
            shapeOptions: {
                color: '#bada55'
            },
            showArea: true
        },
        polyline: {
            metric: false
        },
        circle: {
            shapeOptions: {
                color: '#662d91'
            }
        }
    },
    edit: {
        featureGroup: drawnItems
    }
});

map.addControl(drawControl);

上面的代码是做什么的。 似乎上面的代码试图以编程方式在地图上绘制控件。 可能是我不对。 因为如果上面的行与编程地图上的绘制控件有关，那么应该有坐标或者相关的东西应该存在，但是我没有在上面的代码中找到任何东西。 所以请告诉我上面的代码是做什么的？

3）如果我需要在地图上绘制任何形状，那么我是否需要首先在地图上添加任何图层，因为根据您的代码，您首先通过此行map.addLayer(drawnItems);添加图层map.addLayer(drawnItems);

4）以下代码清楚

if (type === 'marker') {
   coords = JSON.stringify(layer._latlng);
}

上面的代码将lat和lang存储为变量中的坐标但你已经推荐显示另一组代码，我将提供lat和lang细节作为坐标，然后代码将按照lat＆lang值在正确的位置绘制相同的形状。

请阅读我的全部4分，请写下答案以消除我的困惑。 特别是第1和第2点相关代码对我来说不清楚，接下来给我代码，我将通过形状名称和latlang然后传单api将相应地绘制形状。

谢谢

Answer 1

正如Gusper所说， Leaflet.draw是一个现成的图书馆，用于在Leaflet地图上进行交互式绘图。 这是他们的演示稍作修改，以显示在地图上绘制的形状的坐标。

如有必要，可以将这些坐标存储在DB中，然后使用本机Leaflet函数从坐标列表中重新绘制这些形状。

 var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }), map = new L.Map('map', { layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 }); var drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems); var drawControl = new L.Control.Draw({ draw: { position: 'topleft', polygon: { allowIntersection: false, drawError: { color: '#b00b00', timeout: 1000 }, shapeOptions: { color: '#bada55' }, showArea: true }, polyline: { metric: false }, circle: { shapeOptions: { color: '#662d91' } } }, edit: { featureGroup: drawnItems } }); map.addControl(drawControl); map.on('draw:created', function(e) { var type = e.layerType; var layer = e.layer; var coords; console.log(e); if (type === 'marker') { coords = JSON.stringify(layer._latlng); } if (type === 'circle') { coords = JSON.stringify(layer._latlng) + " " + layer._mRadius; } if (type === 'rectangle') { coords = JSON.stringify(layer._latlngs); } if (type === 'polygon') { coords = JSON.stringify(layer._latlngs); } if (type === 'polyline') { coords = JSON.stringify(layer._latlngs); } document.getElementById("coords").innerHTML = coords; drawnItems.addLayer(layer); });

 <head> <title>Leaflet Draw</title> <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" /> <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" /> <link rel="stylesheet" href="leaflet.draw.ie.css" /> <![endif]--> <script src="http://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script> <script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script> </head> <body> <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div> <div id="coords" style="position: fixed; bottom: 0; right: 0; width: 50%; height: 20%; z-index: 99; background-color: white; text-wrap: "></div>

如何在平铺图像上绘制圆形或矩形leaflet.js

问题描述

编辑1

1 个解决方案

解决方案1
1 已采纳 2015-08-07 22:05:52

如何在平铺图像上绘制圆形或矩形leaflet.js

问题描述

编辑1

1 个解决方案

解决方案1 1 已采纳 2015-08-07 22:05:52

解决方案1
1 已采纳 2015-08-07 22:05:52