场景

Leaflet快速入门与加载OSM显示地图：

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

前面所引用的leaflet.js等都是线上url。下面借助于本地leaflet.js以及相应插件实现图层要素编辑效果。

此插件依赖于Leaflet.draw

Leaflet.draw

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

添加图层要素

删除图层要素

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、插件地址

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

2、在线示例地址

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

3、在线示例地址中右键查看网页源代码

    "utf-8"/>
    
    
   'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700' rel='stylesheet' type='text/css'>
    "stylesheet" href="css/style.css" charset="utf-8">
    "stylesheet" href="css/leaflet.pin.css">
    "stylesheet" href="leaflet/css/leaflet.css" charset="utf-8">
    "stylesheet" href="leaflet/css/leaflet.draw.css" charset="utf-8">
    "stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    
    
    
    
    


class="header row">
    
Leaflet.Pin
        Draw and edit with pin.
    

"map">
class="footer row">
    "konradklimczak.plkonradklimczak.plkonradklimczak.plkonradklimczak.plkonradklimczak.plkonradklimczak.plkonradklimczak.plhttp://konradklimczak.pl">konradklimczak.pl
     | Visit my: 
    "" designtimesp="22793">http://github.com/kklimczak">

4、依次点击源码中所用到的文件，并依次另存为到本地，在本地html中全部引入和修改路径。

5、这些文件中有些图标文件仍然需要

部分照片可以从这里获取

这里提供一下

6、html完整示例代码

"en">


    "UTF-8">
    
    "stylesheet" href="./css/leaflet.css" />
    "stylesheet" href="./css/leaflet.draw.css" />
    "stylesheet" href="./css/font-awesome.min.css" />
    "stylesheet" href="./css/style.css" />
    "stylesheet" href="./css/leaflet.pin.css" />
    



    
"map">