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

场景

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

效果如下

 

首先搭建Vue项目

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

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

然后安装leaflet和pm插件

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

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

Turf.js

Turf.js中文网

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

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

buffer

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

参数	类型	描述
geojson	(FeatureCollection|Geometry|Feature )	input to be buffered
radius	number	distance to draw the buffer (negative values are allowed)
options	Object	Optional parameters: see below

options选项

属性	类型	默认值	描述
units	string	kilometers	any of the options supported by turf units
steps	number	64	number of steps

Turf的使用示例

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

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

注：

博客：
霸道流氓气质的博客_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>

​