场景
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124009721
上面在使用draw进行绘制几何图形的基础上，怎样在绘制结束后获取图形的几何信息。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、添加地图与显示几何信息的面板
<div id="map"></div>
<div id="info" style="position: absolute; top: 0px; right: 10px; height: 200px; width: 350px; z-index: 1; border: solid 1px;background-color:white;">
<label id="type">
几何图形类型：
</label>
<p style="margin:0">
图形几何信息如下：
</p>
<div id="result" style="height: 100px; font-family: 微软雅黑; font-size: 14px; font-weight: bold;">
</div>
</div>2、引入所需js依赖与jquery
<script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script type="text/javascript" src="./js/leaflet.draw.js"></script>
<script type="text/javascript" src="./js/jquery/jquery-1.11.2.min.js"></script>
3、在上面实现绘制的基础上重新绘制结束事件
//绘制事件
map.on(L.Draw.Event.CREATED, function(e){
//获取绘制图形类型
var type = e.layerType,
//获取绘制图层
drawlayer = e.layer;
if (type === 'marker') {
//显示Popup
drawlayer.bindPopup('A popup!');
}
//显示图层
drawnItems.addLayer(drawlayer);
//几何信息字符串
var latlngsStr = "";
//获取线几何信息
if (type == "polyline") {
$("#type").text("几何图形类型： 线");
if (drawlayer.editing.latlngs[0].length > 0) {
for (var latlngslength = 0; latlngslength < drawlayer.editing.latlngs[0].length; latlngslength++) {
//获取几何信息
latlngsStr += "<font>" + drawlayer.editing.latlngs[0][latlngslength].lat + "," + drawlayer.editing.latlngs[0][latlngslength].lng + "</font><br>"
}
}
}
//获取多边形几何信息
else if (type == 'polygon') {
$("#type").text("几何图形类型： 多边形");
if (drawlayer._latlngs[0].length > 0) {
for (var latlngslength = 0; latlngslength < drawlayer._latlngs[0].length; latlngslength++) {
//获取几何信息
latlngsStr += "<font>" + drawlayer._latlngs[0][latlngslength].lat + "," + drawlayer._latlngs[0][latlngslength].lng + "</font><br>"
}
}
}
//获取矩形几何信息
else if (type == 'rectangle') {
if (drawlayer._latlngs[0].length) {
$("#type").text("几何图形类型： 矩形");
for (var latlngslength = 0; latlngslength < drawlayer._latlngs[0].length; latlngslength++) {
//获取几何信息
latlngsStr += "<font>" + drawlayer._latlngs[0][latlngslength].lat + "," + drawlayer._latlngs[0][latlngslength].lng + "</font><br>"
}
}
}
//获取圆几何信息
else if (type == 'circle') {
$("#type").text("几何图形类型： 圆");
if (drawlayer._radius > 0) {
//获取几何信息
latlngsStr += "<font>圆心坐标：" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>" + "<font>半径：" + drawlayer._radius + "</font>"
}
}
//获取标记几何信息
else if (type == 'marker') {
$("#type").text("几何图形类型： 标注");
if (drawlayer._latlng != "" && drawlayer._latlng != null && drawlayer._latlng != undefined) {
//获取几何信息
latlngsStr += "<font>" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>"
}
}
//获取圆标记几何信息
else if (type == 'circlemarker') {
$("#type").text("几何图形类型： 圆形标注");
if (drawlayer._latlng != "" && drawlayer._latlng != null && drawlayer._latlng != undefined) {
//获取几何信息
latlngsStr += "<font>" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>"
}
}
//显示信息
document.getElementById('result').innerHTML = latlngsStr;
});4、完整示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leaflet-draw获取图形几何信息</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="./css/leaflet.draw.css" />
<style>
html,
body,
#map {
padding: 0;
margin: 0;
width: 80%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body >
<div id="map"></div>
<div id="info" style="position: absolute; top: 0px; right: 10px; height: 200px; width: 350px; z-index: 1; border: solid 1px;background-color:white;">
<label id="type">
几何图形类型：
</label>
<p style="margin:0">
图形几何信息如下：
</p>
<div id="result" style="height: 100px; font-family: 微软雅黑; font-size: 14px; font-weight: bold;">
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script type="text/javascript" src="./js/leaflet.draw.js"></script>
<script type="text/javascript" src="./js/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([36.09, 120.35], 13);
var tiles =
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: ''
});
tiles.addTo(map);
//添加绘制图层
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
//添加绘制控件
var drawControl = new L.Control.Draw({
draw:{
//绘制线
polyline:true,
//绘制多边形
polygon:true,
//绘制矩形
rectangle:true,
//绘制圆
circle:true,
//绘制标注
marker:true,
//绘制圆形标注
circlemarker:true
},
edit:{
//绘制图层
featureGroup:drawnItems,
//图形编辑控件
edit:true,
//图形删除控件
remove:true,
}
});
//添加绘制控件
map.addControl(drawControl);
//绘制事件
map.on(L.Draw.Event.CREATED, function(e){
//获取绘制图形类型
var type = e.layerType,
//获取绘制图层
drawlayer = e.layer;
if (type === 'marker') {
//显示Popup
drawlayer.bindPopup('A popup!');
}
//显示图层
drawnItems.addLayer(drawlayer);
//几何信息字符串
var latlngsStr = "";
//获取线几何信息
if (type == "polyline") {
$("#type").text("几何图形类型： 线");
if (drawlayer.editing.latlngs[0].length > 0) {
for (var latlngslength = 0; latlngslength < drawlayer.editing.latlngs[0].length; latlngslength++) {
//获取几何信息
latlngsStr += "<font>" + drawlayer.editing.latlngs[0][latlngslength].lat + "," + drawlayer.editing.latlngs[0][latlngslength].lng + "</font><br>"
}
}
}
//获取多边形几何信息
else if (type == 'polygon') {
$("#type").text("几何图形类型： 多边形");
if (drawlayer._latlngs[0].length > 0) {
for (var latlngslength = 0; latlngslength < drawlayer._latlngs[0].length; latlngslength++) {
//获取几何信息
latlngsStr += "<font>" + drawlayer._latlngs[0][latlngslength].lat + "," + drawlayer._latlngs[0][latlngslength].lng + "</font><br>"
}
}
}
//获取矩形几何信息
else if (type == 'rectangle') {
if (drawlayer._latlngs[0].length) {
$("#type").text("几何图形类型： 矩形");
for (var latlngslength = 0; latlngslength < drawlayer._latlngs[0].length; latlngslength++) {
//获取几何信息
latlngsStr += "<font>" + drawlayer._latlngs[0][latlngslength].lat + "," + drawlayer._latlngs[0][latlngslength].lng + "</font><br>"
}
}
}
//获取圆几何信息
else if (type == 'circle') {
$("#type").text("几何图形类型： 圆");
if (drawlayer._radius > 0) {
//获取几何信息
latlngsStr += "<font>圆心坐标：" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>" + "<font>半径：" + drawlayer._radius + "</font>"
}
}
//获取标记几何信息
else if (type == 'marker') {
$("#type").text("几何图形类型： 标注");
if (drawlayer._latlng != "" && drawlayer._latlng != null && drawlayer._latlng != undefined) {
//获取几何信息
latlngsStr += "<font>" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>"
}
}
//获取圆标记几何信息
else if (type == 'circlemarker') {
$("#type").text("几何图形类型： 圆形标注");
if (drawlayer._latlng != "" && drawlayer._latlng != null && drawlayer._latlng != undefined) {
//获取几何信息
latlngsStr += "<font>" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>"
}
}
//显示信息
document.getElementById('result').innerHTML = latlngsStr;
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136028.html
