Leaflet中通过leaflet-measure插件实现测距测面效果

深藏阁楼爱情的钟 2023-10-01 12:04 31阅读 0赞

## 场景 ##

Leaflet中原生方式实现测距：

[Leaflet中原生方式实现测距\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Leaflet_BADAO_LIUMANG_QIZHI_-CSDN]

Leaflet中原生方式实现测量面积：

[Leaflet中原生方式实现测量面积\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Leaflet_BADAO_LIUMANG_QIZHI_-CSDN 1]

在上面原生方式实现测距测面的效果下，怎样通过插件的方式实现效果。

leaflet-measure插件地址：

[GitHub - ljagis/leaflet-measure: Coordinate, linear, and area measure control for Leaflet maps][GitHub - ljagis_leaflet-measure_ Coordinate_ linear_ and area measure control for Leaflet maps]

官方示例地址:

[Leaflet Measure Path - example][]

本地运行效果

![18119e4e34794dcaa655c36428098d79.gif][]

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、按照官方示例引入所需的js、css文件等

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

2、新建html，参考其官方代码修改如下

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>leaflet-measure插件测距测面</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
        <link rel="stylesheet" href="./css/leaflet-measure-path.css">
        <style>
            body {
                padding: 0;
                margin: 0;
                font-family: sans-serif;
                font-size: 10px;
            }
            #map {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    
    <body>
        <div id="map"></div>
        <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
        <script src="./js/leaflet-measure-path.js"></script>
        <script src="./js/Leaflet.Editable.js"></script>
        <script type="text/javascript">
            //实例化地图并添加osm地图
            //注意这里设置editable为true
            var map = L.map('map', {editable: true}).setView([36.09, 120.35], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: ''
            }).addTo(map);
            //新建多边形并添加到地图
            var polygon = L.polygon([
                    [36.208, 120.181],
                    [36.194, 120.359],
                    [36.105, 120.317],
                    [36.014, 120.250],
                    [36.107, 120.110]
                ], { showMeasurements: true })
                .addTo(map);
            //激活多边形的编辑功能
            polygon.enableEdit();
            map.on('editable:vertex:drag editable:vertex:deleted', polygon.updateMeasurements, polygon);
    
    
        </script>
    </body>
    
    </html>

[Leaflet_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122358379
[Leaflet_BADAO_LIUMANG_QIZHI_-CSDN 1]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122358946
[GitHub - ljagis_leaflet-measure_ Coordinate_ linear_ and area measure control for Leaflet maps]: https://github.com/ljagis/leaflet-measure
[Leaflet Measure Path - example]: http://xiaobaibai521.gitee.io/leaflet-measure-path/example/
[18119e4e34794dcaa655c36428098d79.gif]: https://img-blog.csdnimg.cn/18119e4e34794dcaa655c36428098d79.gif
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f7071eb55bf34cd6af339220dce4dd77.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16