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

最新推荐文章于 2024-09-20 10:51:21 发布

原创最新推荐文章于 2024-09-20 10:51:21 发布 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了如何在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([])
    }
  }