在上一篇文章中，我们学习了Leaflet的基础知识，包括如何创建地图、添加图层等。在本文中，我们将深入学习Leaflet中标注的创建和管理，包括如何添加标注、自定义标注图标、创建图层组、批量添加和删除标注、为标注添加属性和弹出框等。
一、介绍
Leaflet中的标注是指在地图上添加的一种标记，用于标识某个位置。在实际应用中，我们常常需要在地图上添加多个标注，并为其添加属性和弹出框，以便用户可以查看更详细的信息。在本文中，我们将学习如何创建和管理Leaflet中的标注。
二、内容
1.创建标注
在Leaflet中，我们可以使用L.marker方法创建一个标注，并将其添加到地图中。例如：
var marker = L.marker([34.063380, 108.951128]).addTo(map);
这里的[34.063380, 108.951128]就是标注的坐标。
2.自定义标注图标
在创建标注时，我们可以使用icon选项来自定义标注图标。例如：
var myIcon = L.icon({
iconUrl: 'icon/marker.png',
iconSize: [20, 30],
iconAnchor: [10, 30]
});
var marker = L.marker([34.063380, 108.951128], {icon: myIcon}).addTo(map);
这里的iconUrl是图标文件的路径，iconSize是图标的大小，iconAnchor是图标的锚点。
3.创建图层组
如果我们需要在地图上添加多个标注，可以将它们添加到一个图层组中，然后将图层组添加到地图中。这样，多个标注就作为一个图层组呈现在地图上。当需要移除这些标注时，只需移除该图层组即可。例如：
var markers = L.layerGroup().addTo(map);
var marker1 = L.marker([34.063380, 108.951128]).addTo(markers);
var marker2 = L.marker([34.263380, 108.951128]).addTo(markers);
var marker3 = L.marker([34.063380, 109.151128]).addTo(markers);
// 移除所有标注
map.removeLayer(markers);
4.为标注添加属性和弹出框
在创建标注时，我们可以使用title选项来为标注添加一个提示框，使用bindPopup方法为标注添加一个弹出框。例如：
var marker = L.marker([34.063380, 108.951128], {title: '我的位置'}).addTo(map);
marker.bindPopup('CSDN 博主 GISer Liu 认证');
点击标注时，就会显示弹出框。
5.点击开始标注并填写属性
如果我们需要在点击地图时开始标注，并弹出一个弹出框让用户填写标注的属性，可以使用以下代码：
var markers = L.layerGroup().addTo(map);
function onMapClick(e) {
var marker = L.marker(e.latlng, {draggable: true}).addTo(markers);
var popupContent = '<form>' +
'名称: <input id="name" type="text" />' +
'<br />描述: <input id="desc" type="text" />' +
'<br /><button id="save">保存</button>' +
'</form>';
marker.bindPopup(popupContent).openPopup(); // 设置popup 弹窗的innerHtml为popupContent，并打开该弹窗；
L.DomEvent.on(marker, 'popupopen', function() {
L.DomEvent.on('#save', 'click', function() {
marker.options.title = L.DomUtil.get('name').value;
marker.bindPopup(L.DomUtil.get('desc').value);
});
});
}
map.on('click', onMapClick);
点击地图时，会在该位置创建一个可拖动的标注，并弹出一个弹出框让用户填写标注的名称和描述。点击保存按钮后，会将名称和描述保存到标注的title和弹出框中。
6.右击设置标注属性
如果我们需要在右击标注时设置标注的属性，可以使用以下代码：
function onMarkerContextMenu(e) {
var marker = e.target;
var popupContent = '<form>' +
'名称: <input id="name" type="text" value="' + marker.options.title + '" />' +
'<br />描述: <input id="desc" type="text" value="' + marker.getPopup().getContent() + '" />' +
'<br /><button type="button" id="save">保存</button>' +
'</form>';
marker.bindPopup(popupContent).openPopup();
L.DomEvent.on(marker, 'popupopen', function() {
L.DomEvent.on('#save', 'click', function() {
marker.options.title = L.DomUtil.get('name').value;
marker.bindPopup(L.DomUtil.get('desc').value);
});
});
}
markers.on('contextmenu', onMarkerContextMenu);
点击标注时，会弹出一个弹出框让用户设置标注的名称和描述。点击保存按钮后，会将名称和描述保存到标注的title和弹出框中。
7. 移除已有标注
方法有二
①清除图层组
markers.clearLayers();
②移除整个图层组，然后重新初始化添加
map.removeLayer(markers);
markersInfo = [];
markers = L.layerGroup().addTo(map);
三、Leaflet标注Geojson数据下载器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 100vh;
width: 100vw;
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
z-index: 0;
}
#map-click {
position: absolute;
top: 30px;
left: 60px;
border: none;
outline: none;
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
transition: all 200ms;
box-shadow: #333 4px 4px 8px;
background-color: red;
color: yellow;
font-size: 1.2em;
font-family: 'Courier New', Courier, monospace;
z-index: 100;
}
#map-click:active {
box-shadow: #e0dcdc 2px 2px 4px;
background-color: green;
}
#download {
position: absolute;
width: 70px;
height: 50px;
top: 10px;
right: 10px;
z-index: 100;
display: none;
}
#clear {
position: absolute;
width: 70px;
height: 50px;
top: 60px;
right: 10px;
z-index: 100;
display: none;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="map-click">mark</button>
<button id="download">下载</button>
<button id="clear">清除标注</button>
<script>
var map = L.map('map').setView([34.063380, 108.951128], 13)
var clickBtn = document.querySelector('#map-click')
var downloadBtn = document.querySelector('#download')
var clearBtn = document.querySelector('#clear')
// 存储构建的geojson数据
var markersInfo = [];
// 增加OSM底图
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 设置标注图标
var myIcon = L.icon({
iconUrl: '../assit/marker.png',
iconSize: [20, 30], // 尺寸
iconAnchor: [10, 15] // 图标左上角相对于标记点的偏移，这里图标大小为[20,30]，则为了保证中央，我们要往左偏移10，向上偏移15；
});
// 创建图层组，本质也是一个数组对象
var markers = L.layerGroup().addTo(map);
// 创建地图点击事件
function onMapClick(e) {
var marker = L.marker(e.latlng, { icon: myIcon, draggable: true }).addTo(markers);
var popupContent = document.createElement('div');
var nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.placeholder = '名称';
var descInput = document.createElement('input');
descInput.type = 'text';
descInput.placeholder = '描述';
var saveBtn = document.createElement('button');
saveBtn.type = 'button';
saveBtn.textContent = '保存';
popupContent.appendChild(nameInput);
popupContent.appendChild(document.createElement('br'));
popupContent.appendChild(descInput);
popupContent.appendChild(document.createElement('br'));
popupContent.appendChild(saveBtn);
marker.bindPopup(popupContent);
marker.on('popupopen', function () {
downloadBtn.style.display = 'block'
clearBtn.style.display = 'block'
L.DomEvent.on(saveBtn, 'click', function () {
saveMarkerInfo(marker, nameInput, descInput);
});
});
function saveMarkerInfo(marker, nameInput, descInput) {
marker.options.title = nameInput.value;
marker.setPopupContent(descInput.value);
console.log(123);
var markerInfo = {
title: marker.options.title,
desc: marker.getPopup().getContent(),
latlng: marker.getLatLng()
};
markersInfo.push(markerInfo);
console.log(markersInfo);
}
marker.openPopup();
}
// 标注点击事件
function onMarkerContextMenu(e) {
var marker = e.target;
var popupContent = '<form>' +
'名称: <input id="name" type="text" value="' + marker.options.title + '" />' +
'<br />描述: <input id="desc" type="text" value="' + marker.getPopup().getContent() + '" />' +
'<br /><button id="save" type = "button">保存</button>' +
'</form>';
marker.bindPopup(popupContent).openPopup();
L.DomEvent.on(marker, 'popupopen', function () {
L.DomEvent.on('#save', 'click', function (event) {
marker.options.title = L.DomUtil.get('name').value;
marker.bindPopup(L.DomUtil.get('desc').value);
downloadBtn.style.display = "black"
});
});
}
// 标注切换点击事件
flag = false
clickBtn.addEventListener('click', () => {
flag = !flag
if (flag) {
map.on('click', onMapClick);
} else {
map.off('click', onMapClick)
}
})
markers.on('contextmenu', onMarkerContextMenu);
// 监听下载按钮的点击事件
downloadBtn.addEventListener('click', function () {
// 构建 geojson 数据
var geojsonData = {
type: "FeatureCollection",
features: []
};
// 遍历markersInfo 然后存储元素信息到geojson
markersInfo.forEach(function (markerInfo) {
// 构建geojson元素
var feature = {
type: "Feature",
properties: {
name: markerInfo.title,
desc: markerInfo.desc
},
geometry: {
type: "Point",
coordinates: [markerInfo.latlng.lng, markerInfo.latlng.lat]
}
};
// 保存到features属性中
geojsonData.features.push(feature);
});
// 将 geojsonData 序列化为 JSON 字符串，并指定 MIME 类型为 'application/json'
var blob = new Blob([JSON.stringify(geojsonData)], { type: 'application/json' });
// 创建一个 blob URL，用于下载
var url = window.URL.createObjectURL(blob, { oneTimeOnly: true });
// 创建一个新的超链接元素
var a = document.createElement('a');
// 设置超链接的 href 属性为 blob URL
a.href = url;
// 设置超链接的 download 属性为 'markers.geojson'，表示下载的文件名为 'markers.geojson'
a.download = 'markers.geojson';
// 触发超链接的点击事件，开始下载
a.click();
window.URL.revokeObjectURL(url);
});
clearBtn.addEventListener('click', () => {
// 移除 markers 图层组
// map.removeLayer(markers);
// 清空 markersInfo 数组
// markersInfo = [];
// 隐藏下载按钮
// downloadBtn.style.display = 'none';
// 重新创建一个空的图层组
// markers = L.layerGroup().addTo(map);
// 清空 markers 图层组
markers.clearLayers();
// 隐藏下载按钮
downloadBtn.style.display = 'none';
clearBtn.style.display = 'none';
})
</script>
</body>
</html>
效果如下：
四、总结
本文介绍了Leaflet中标注的创建和管理，包括如何添加标注、自定义标注图标、创建图层组、批量添加和删除标注、为标注添加属性和弹出框等。通过示例代码，我们学会了如何实现点击开始标注并填写属性，以及右击设置标注属性。最后实现了一个地图标注geojson下载器，这些知识在实际应用中非常有用，希望对大家有所帮助。
文章参考
- Leaflet 官方文档：https://leafletjs.com/reference.html
- Leaflet 中文网：https://leafletjs.com.cn/
项目地址
- Github地址
- 拓展阅读
如果觉得我的文章对您有帮助，三连+关注便是对我创作的最大鼓励！或者一个star🌟也可以😂.
