Vue leaflet 距离面积量算

注意：使用vue2，请先检查是否有vue2已经已经安装leafletjs依赖 如果为对leaflet未有了解或者未安装leafletjs 请阅读以下文章

Vue LeafletJS热力图

Vue LeafletJS Maker信息窗口 点线面 卷帘效果

1. 在scr/assets/下面创建js文件夹并且引入leaflet-measure文件

1. 在需要使用的vue页面导入leaflet-measure

import '@/assets/JS/leaflt-measure/leaflet-measure-path.css'
import '@/assets/JS/leaflt-measure/leaflet-measure-path.js'

2. 实例化一个leaflet地图

    initDate() {
      this.map = L.map("map", {
        center: [27.68, 112],
        zoom: 6.5,
        maxZoom: 22,
        zoomControl: false,
        ///编辑插件
        editable: true,
        attributionControl: false, // 移除右下角leaflet标识
        crs: L.CRS.EPSG4326,
      });
      var tiandituimg = L.tileLayer(
          "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=6c6c18e4ec555ea8f0976ec71960021f",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      ).addTo(this.map);
     },

3. 整体代码

<template>
  <div>
    <div id="map"></div>
    <div id="top">
      <Button @click="init()">距离面积量算</Button>
      <Button  @click="destory()">关闭</Button>
    </div>
  </div>
</template>


<script>
import '@/assets/JS/leaflt-measure/leaflet-measure-path.css'
import '@/assets/JS/leaflt-measure/leaflet-measure-path.js'
export default {
  data() {
    return {
      map: "",
      areaMeasure:{
        points: [],
        layers: L.layerGroup(),
        polygon: null,
      }
    };
  },
  mounted() {
    this.initDate();
  },
  methods: {
    initDate() {
      this.map = L.map("map", {
        center: [27.68, 112],
        zoom: 6.5,
        maxZoom: 22,
        zoomControl: false,
        ///编辑插件
        editable: true,
        attributionControl: false, // 移除右下角leaflet标识
        crs: L.CRS.EPSG4326,
      });
      var tiandituimg = L.tileLayer(
          "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=6c6c18e4ec555ea8f0976ec71960021f",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      ).addTo(this.map);
     },
    init(){
      this.map.off('click')
      this.map.off('dblclick')
      this.areaMeasure.points = [];
      this.areaMeasure.polygon = null;
      this.map.on('click', this.click).on('dblclick', this.dblclick);
    },
    click(e){
      this.map.doubleClickZoom.disable();
      // 添加点信息
      this.areaMeasure.points.push(e.latlng);
      // 添加面
      this.map.on('mousemove', this.mousemove);
    },
    dblclick(){
      this.areaMeasure.polygon.addTo(this.areaMeasure.layers);
      this.map.on('editable:vertex:drag editable:vertex:deleted', this.areaMeasure.polygon.updateMeasurements, this.areaMeasure.polygon);
      this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dblclick);
    },
    mousemove(e){
      this.areaMeasure.points.push(e.latlng);
      if ( this.areaMeasure.polygon)
        this.map.removeLayer( this.areaMeasure.polygon);
      this.areaMeasure.polygon = L.polygon( this.areaMeasure.points, {
        showMeasurements: true,
        color: '#20B2AA',
        fillColor: '#ffff',
        fillOpacity: 0.3
      });
      this.areaMeasure.polygon.addTo( this.areaMeasure.layers);
      this.areaMeasure.layers.addTo( this.map);
      this.areaMeasure.points.pop();
    },
    destory(){
      if (this.areaMeasure.polygon)
        this.map.removeLayer(this.areaMeasure.polygon);
    }

  }
};
</script>

<style lang="scss"  scoped>
#map {
  width: 100%;
  height: calc(100vh);
  z-index: 1;
}
#top {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 999;
  /* color: aliceblue; */
  padding: 1%;
  border-radius: 10px;
  button{
    margin: 20px;
  }
}

</style>