南宫职业教育中心示范校建设网站,苏州市建设职业培训中心网站,爱站网长尾词挖掘工具,wordpress medium主题在上一篇文章中#xff0c;我们学习了Leaflet的基础知识#xff0c;包括如何创建地图、添加图层等。在本文中#xff0c;我们将深入学习Leaflet中标注的创建和管理#xff0c;包括如何添加标注、自定义标注图标、创建图层组、批量添加和删除标注、为标注添加属性和弹出框等… 在上一篇文章中我们学习了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 idname typetext / br /描述: input iddesc typetext / br /button idsave保存/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 idname typetext value marker.options.title / br /描述: input iddesc typetext value marker.getPopup().getContent() / br /button typebutton idsave保存/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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet hrefhttps://unpkg.com/leaflet1.7.1/dist/leaflet.css /script srchttps://unpkg.com/leaflet1.7.1/dist/leaflet.js/scripttitleDocument/titlestyle* {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
/headbodydiv idmap/divbutton idmap-clickmark/buttonbutton iddownload下载/buttonbutton idclear清除标注/buttonscriptvar 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 hrefhttp://osm.org/copyrightOpenStreetMap/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 blockclearBtn.style.display blockL.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 idname typetext value marker.options.title / br /描述: input iddesc typetext value marker.getPopup().getContent() / br /button idsave 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/jsonvar 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.geojsona.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.htmlLeaflet 中文网https://leafletjs.com.cn/
项目地址
Github地址拓展阅读 如果觉得我的文章对您有帮助三连关注便是对我创作的最大鼓励或者一个star也可以.
