基于Leatlet标注Geojson下载器实现

2024-03-09 16:12

本文主要是介绍基于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 = falseclickBtn.addEventListener('click', () => {flag = !flagif (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 然后存储元素信息到geojsonmarkersInfo.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 URLa.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🌟也可以😂.

这篇关于基于Leatlet标注Geojson下载器实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/791208

相关文章

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客: mac安装jdk oracle 版本:https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本:https://adoptium.net/zh-CN/temurin/releases/ 阿里版本: github:https://github.com/

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

烟火目标检测数据集 7800张 烟火检测 带标注 voc yolo

一个包含7800张带标注图像的数据集,专门用于烟火目标检测,是一个非常有价值的资源,尤其对于那些致力于公共安全、事件管理和烟花表演监控等领域的人士而言。下面是对此数据集的一个详细介绍: 数据集名称:烟火目标检测数据集 数据集规模: 图片数量:7800张类别:主要包含烟火类目标,可能还包括其他相关类别,如烟火发射装置、背景等。格式:图像文件通常为JPEG或PNG格式;标注文件可能为X

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P