我知道使用 leaflet.js 可以在图 block 图像上绘制圆形或矩形。这是一个链接 http://jsfiddle.net/tridip/p6ssbvqj/
leaflet 具有名为 circle() polygon() 等的函数
我的界面就像我有 4 个按钮，一个是圆形、矩形、加载图像、保存图像。
当页面第一次加载时，我将通过 leaflet.js 显示图像，当用户单击圆形或矩形按钮时，我必须允许用户在图像上绘制圆形或矩形。 我应该使用哪个 jquery 或任何 javascript 库来允许在图像上绘制圆形或矩形的问题？
接下来我需要在客户端存储那些圆或矩形的坐标，因为稍后我可以将这些信息保存在数据库中。
第 3 个，当我再次重新加载图像时，我需要在同一图像上和用户绘制的相同位置显示绘制的圆形或矩形。
请指导我如何实现它。我以前从未做过所以不知道我有。请帮我。谢谢
编辑 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);
上面的代码是做什么的。上面的代码似乎试图以编程方式在 map 上绘制控件。可能是我不对。 因为如果上面的行与以编程方式在 map 上绘制控件相关，那么应该有坐标或者应该有一些相关的东西但我没有 在上面的代码中找到任何东西。所以请告诉我上面的代码在做什么？
3) 如果我需要在 map 上绘制任何形状，那么我是否需要先在 map 上添加任何图层，因为根据您的代码，您首先通过此行添加图层
map.addLayer(drawnItems);
4) 下面的代码很清楚
if (type === 'marker') {
coords = JSON.stringify(layer._latlng);
}
上面的代码将 lat 和 lang 作为坐标存储在变量中，但是你错过了显示另一组代码，我将在其中提供 lat 和 lang 详细信息作为坐标，然后代码将根据 lat 和 lang 值在正确位置绘制相同的形状。
请阅读我的所有 4 点并写下答案以消除我的困惑。特别是第 1 点和第 2 点相关代码我不清楚 接下来给我代码，我将在其中传递形状名称和 latlang，然后 leaflet api 将相应地绘制形状。
谢谢
最佳答案
作为gusper注意到，Leaflet.draw是一个现成的库，用于在 Leaflet map 上进行交互式绘图。这是他们的演示，稍作修改以显示在 map 上绘制的形状的坐标。
如有必要，您可以将这些坐标存储在数据库中，然后使用 native Leaflet functions从坐标列表中重新绘制这些形状。
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <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>关于javascript - 如何在平铺图像上绘制圆形或矩形 leaflet.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31885536/