基于Leatlet标注Geojson下载器实现

cover

在上一篇文章中，我们学习了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: '&copy; <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>复制

效果如下：

output

四、总结

本文介绍了Leaflet中标注的创建和管理，包括如何添加标注、自定义标注图标、创建图层组、批量添加和删除标注、为标注添加属性和弹出框等。通过示例代码，我们学会了如何实现点击开始标注并填写属性，以及右击设置标注属性。最后实现了一个地图标注geojson下载器，这些知识在实际应用中非常有用，希望对大家有所帮助。

文章参考

Leaflet 官方文档：https://leafletjs.com/reference.html
Leaflet 中文网：https://leafletjs.com.cn/

项目地址

Github地址
拓展阅读

如果觉得我的文章对您有帮助，三连+关注便是对我创作的最大鼓励！或者一个star🌟也可以😂.

	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);

	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);

	var marker = L.marker([34.063380, 108.951128], {title: '我的位置'}).addTo(map);

	marker.bindPopup('CSDN 博主 GISer Liu 认证');

	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);

	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);

	map.removeLayer(markers);
	markersInfo = [];
	markers = L.layerGroup().addTo(map);

	<!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>