场景

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

效果如下

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

 

首先搭建Vue项目

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


然后安装leaflet和pm插件

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


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的使用示例


注：

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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>