在vue使用leaflet手动绘制动态多边形

在vue使用leaflet手动绘制动态多边形

第一步：

// An highlighted block
  data() {
    return {
      map: {},//地图
      points: [],//点
      lines: null,//线
      tempLines: null,//连接
    };

第二步：

// An highlighted block
mounted() {
    // 绘制多边形
    this.lines=L.polyline([])
    this.tempLines=L.polyline([])
    this.map.on('click', this.setVertex);    //点击地图
    this.map.on('mousemove',this.setMoveLine)//双击地图
    this.map.on('dblclick',this.exitDraw);//退出绘制
}

第三步：

// An highlighted block
  methods: {
  // 单击顶点开始绘制
    setVertex(e)
    {
      this.points.push([e.latlng.lat,e.latlng.lng])
      this.lines.addLatLng(e.latlng)
      this.map.addLayer(this.lines)
      this.map.addLayer(L.circle(e.latlng,{color:'#ff0000',fillColor:'ff0000',fillOpacity:1}))

    },
    // 单击后移动绘制线
    setMoveLine(e) {
      if(this.points.length>0) {
        var ls=[this.points[this.points.length-1],[e.latlng.lat,e.latlng.lng]]
        this.tempLines.setLatLngs(ls)
        this.map.addLayer(this.tempLines)
      }
    },
    //双击退出绘制
    exitDraw(e)
    {
      L.polygon([this.points]).addTo(this.map)
      this.points=[]
      this.lines=new L.polyline([])
    }
  }