Vue+Leaflet.PM+Turf.js实现绘制多线段并自动生成辐射区(缓冲区)

Dear 丶 2023-09-30 14:54 2阅读 0赞

## 场景 ##

在底图上绘制多线段时，设置固定的辐射范围，可以自动生成该线段可以覆盖的区域。

效果如下

![193871793bc44b539f3b6fc653701ced.gif][]

首先搭建Vue项目

若依前后端分离版手把手教你本地搭建环境并运行项目：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_霸道流氓气质的博客-CSDN博客\_前后端分离项目本地运行][-CSDN]

然后安装leaflet和pm插件

Vue+Leaflet.PM插件实现创建和编辑几何图形(点、线、面、圆等)：

[Vue+Leaflet.PM插件实现创建和编辑几何图形(点、线、面、圆等)\_霸道流氓气质的博客-CSDN博客][Vue_Leaflet.PM_-CSDN]

### Turf.js ###

[Turf.js中文网][Turf.js]

借助于turf.js的buffer计算缓冲区/辐射区

[计算缓冲区(辐射区) | Turf.js中文网][_ Turf.js]

buffer

为给定半径的Feature计算一个缓冲区。支持的单位是英里、公里和度数。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>geojson</td> 
   <td>(FeatureCollection|Geometry|Feature )</td> 
   <td>input to be buffered</td> 
  </tr> 
  <tr> 
   <td>radius</td> 
   <td>number</td> 
   <td>distance to draw the buffer (negative values are allowed)</td> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>Object</td> 
   <td>Optional parameters: see below</td> 
  </tr> 
 </tbody> 
</table>

options选项

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>units</td> 
   <td>string</td> 
   <td>kilometers</td> 
   <td>any of the options supported by turf units</td> 
  </tr> 
  <tr> 
   <td>steps</td> 
   <td>number</td> 
   <td>64</td> 
   <td>number of steps</td> 
  </tr> 
 </tbody> 
</table>

Turf的使用示例

Turf.js(地理空间GIS分析的js库)，处理地图相关算法：

[Turf.js(地理空间GIS分析的js库)，处理地图相关算法\_霸道流氓气质的博客-CSDN博客][Turf.js_GIS_js_-CSDN]

注：

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

## 实现 ##

1、在pm绘制结束事件中判断是否为线段

this.map.on("pm:create", (e) => {
            let _that = this;
            //判断绘制结束之后是否为线
            if (e.shape == "Line") {
    
            }
          });

2、获取绘制线段的geojson数据

var geojson = e.layer.toGeoJSON();

3、调用计算辐射区的方法

var buffered = turf.buffer(geojson, 30, { units: "meters" });

4、将辐射区图层添加到地图

var bufferLayer = L.geoJSON(buffered, {
                pmIgnore: true,
              });
              bufferLayer.addTo(_that.map);

5、完整示例代码

<template>
      <div id="map" class="map"></div>
    </template>
    
    <script>
    import "leaflet/dist/leaflet.css";
    import L from "leaflet";
    import "leaflet.pm";
    import "leaflet.pm/dist/leaflet.pm.css";
    import * as turf from "@turf/turf";
    export default {
      name: "leafletWithTurf",
      data() {
        return {
          map: null,
          OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          this.map = L.map("map");
          this.map.setView([34.03, -118.15], 13);
          let tileLayer = L.tileLayer(this.OSMUrl);
          tileLayer.addTo(this.map);
    
          // 添加绘制工具
          this.map.pm.setLang("zh");
          this.map.pm.addControls({
            position: "topleft",
            drawPolygon: true, //绘制多边形
            drawMarker: false, //绘制标记点
            drawCircleMarker: false, //绘制圆形标记
            drawPolyline: true, //绘制线条
            drawRectangle: false, //绘制矩形
            drawCircle: true, //绘制圆圈
            editMode: true, //编辑多边形
            dragMode: true, //拖动多边形
            cutPolygon: true, //添加⼀个按钮以删除多边形⾥⾯的部分内容
            removalMode: true, //清除多边形
          });
    
          // 全局设置绘制样式
          this.map.pm.setPathOptions({
            color: "orange",
            fillColor: "green",
            fillOpacity: 0.4,
          });
    
          this.map.on("pm:create", (e) => {
            let _that = this;
            //判断绘制结束之后是否为线
            if (e.shape == "Line") {
              //获取绘制线的geojson
              var geojson = e.layer.toGeoJSON();
              //辐射30米
              var buffered = turf.buffer(geojson, 30, { units: "meters" });
              //辐射区添加到地图
              var bufferLayer = L.geoJSON(buffered, {
                pmIgnore: true,
              });
              bufferLayer.addTo(_that.map);
            }
          });
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
      width: 100%;
      height: 400px;
    }
    </style>

[193871793bc44b539f3b6fc653701ced.gif]: https://img-blog.csdnimg.cn/193871793bc44b539f3b6fc653701ced.gif
[-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[Vue_Leaflet.PM_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/126351717
[Turf.js]: https://turfjs.fenxianglu.cn/
[_ Turf.js]: https://turfjs.fenxianglu.cn/category/transformation/buffer.html
[Turf.js_GIS_js_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/126364847
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi