當前位置：首頁 >

Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果

發(fā)布時間：2025/3/19 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

場景

Leaflet快速入門與加載OSM顯示地圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?

前面所引用的leaflet.js等都是線上url。下面借助于本地leaflet.js以及相應(yīng)插件實現(xiàn)圖層要素編輯效果。

此插件依賴于Leaflet.draw

Leaflet.draw

https://github.com/Leaflet/Leaflet.draw

添加圖層要素

?刪除圖層要素

?編輯圖層要素

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

1、插件地址

https://github.com/kklimczak/Leaflet.Pin

2、在線示例地址

Leaflet.Pin Example

3、在線示例地址中右鍵查看網(wǎng)頁源代碼

? <!DOCTYPE html> <head><meta charset="utf-8"/><title>Leaflet.Pin Example</title><BR>???<linkhref='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/style.css" charset="utf-8"><link rel="stylesheet" href="css/leaflet.pin.css"><link rel="stylesheet" href="leaflet/css/leaflet.css" charset="utf-8"><link rel="stylesheet" href="leaflet/css/leaflet.draw.css" charset="utf-8"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><script src="leaflet/js/leaflet.js" charset="utf-8"></script><script src="leaflet/js/leaflet.draw.js" charset="utf-8"></script><script src="leaflet/js/leaflet.geometryutil.js" charset="utf-8"></script><script src="vendor/js/lodash.min.js"></script><script src="js/leaflet.pin.js" charset="utf-8"></script> </head> <body> <div class="header row"><h1><b>Leaflet.Pin</b><small>Draw and edit with pin.</small></h1> </div> <div id="map"></div> <div class="footer row"><a href="konradklimczak.plkonradklimczak.plkonradklimczak.plkonradklimczak.plkonradklimczak.plkonradklimczak.plkonradklimczak.plhttp://konradklimczak.pl">konradklimczak.pl</a><span> | Visit my: </span><a href="http://github.com/kklimczak"><i class="fa fa-github fa-lg"></i></a> </div> <script src="js/default.js" charset="utf-8"></script> <script src="js/main.js" charset="utf-8"></script> </body> </html>?

4、依次點擊源碼中所用到的文件，并依次另存為到本地，在本地html中全部引入和修改路徑。

5、這些文件中有些圖標文件仍然需要

部分照片可以從這里獲取

這里提供一下

leaflet.js中默認使用的marker的圖標和其陰影的圖標可以將在線示例網(wǎng)頁中右鍵另存為里面去找

這里也提供一下

將這兩個圖標放在leaflet.js所在目錄下新建images目錄下

6、html完整示例代碼

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet實現(xiàn)圖層要素編輯</title><link rel="stylesheet" href="./css/leaflet.css" /><link rel="stylesheet" href="./css/leaflet.draw.css" /><link rel="stylesheet" href="./css/font-awesome.min.css" /><link rel="stylesheet" href="./css/style.css" /><link rel="stylesheet" href="./css/leaflet.pin.css" /><style></style> </head><body><div id="map"></div><script type="text/javascript" src="./js/leaflet.js"></script><script type="text/javascript" src="./js/leaflet.draw.js"></script><script type="text/javascript" src="./js/leaflet.geometryutil.js"></script><script type="text/javascript" src="./js/lodash.min.js"></script><script type="text/javascript" src="./js/leaflet.pin.js"></script><script type="text/javascript" src="./js/default.js"></script><script type="text/javascript">var map = L.map('map', {pin: true,pinCircle: true,pinControl: true,guideLayers: []});var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';var osm = new L.TileLayer(osmUrl, {minZoom: 8,maxZoom: 16,});map.setView(new L.LatLng(36.09, 120.35), 12);map.addLayer(osm);var drawnItems = new L.FeatureGroup();map.addLayer(drawnItems);var drawControl = new L.Control.Draw({draw: {polyline: {distance: 20},polygon: {distance: 25},marker: {distance: 25},rectangle: {},circle: {}},edit: {featureGroup: drawnItems}});L.geoJson(loadJson(), {onEachFeature: function (feature, layer) {if (feature.geometry.type == "LineString") {layer.setStyle({color: 'purple',weight: 5});}drawnItems.addLayer(layer);}});map.addGuideLayer(drawnItems);map.removeGuideLayer(drawnItems);map.addControl(drawControl);map.on('draw:created', function (e) {var layer = e.layer;drawnItems.addLayer(layer);//console.log(JSON.stringify(drawnItems.toGeoJSON()));});map.on('mousemove', function (e) {//console.log(e.latlng);});</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Leaflet中使用leaflet.ea
下一篇： Leaflet中加载离线OSM瓦片地图(