浅谈 SuperMap iClient for Leaflet （二）画点，画线功能的实现步骤

接上次我们所说的地图展示之后，后续一些我自己学习到的功能及应用，有什么不对的地方还希望大家指出来

 

先介绍一下我这边想做的功能把，这里有两个按钮，在按到按钮的时候做出响应的方法

第一个按钮呢功能是画点，第二个功能呢就是实现简单的画线 

1. 首先呢，我们还是在做这些功能之前，分析一个大体的方向

2. 我们要找到Leaflet.js中的画点，画线功能，封装成我们自己的方法

3. 在标记之前我们要清空上一次的点击事件，因为在同一个容器中，注册不一样的点击事件，会存在冒泡发生

好了话不多说了，我们看代码吧

首先我们看画点的代码

// 标记绘画
  function DrawPoint() {
    map.on('click', function (e) {
      var lat = e.latlng.lat;
      var lng = e.latlng.lng;
      var marker = L.marker([lat, lng], {
        draggable: true // 允许点位拖拽
      }).addTo(map);
      //拖拽结束
      marker.on('dragend', function (event) {
        console.log('实时坐标：' + marker.getLatLng());
      })
    });
  }

其次在看我们画线的代码

  //线绘画
  function DrawLine() {
    var points = [] // 定义一个空数组
    var lines = new L.polyline(points) //给数组点位信息添加到地图上绘制折线叠加层的类中
    var tempLines = new L.polyline([]) // 多点绘制的折线
    map.on('click', onClick); //绑定单击事件
    map.on('dblclick', onDoubleClick); //绑定双击事件

    // 鼠标单击事件
    function onClick(e) {
      points.push([e.latlng.lat, e.latlng.lng]) //把用户操作的经纬度添加到定义的空数组中
      lines.addLatLng(e.latlng) // 给数据添加到折线中。
      map.addLayer(lines) //给数组信息添加到图层中
      map.addLayer(L.polyline(e.latlng)) //把折线添加到数组中
      map.on('mousemove', onMove) // 绑定鼠标移动事件(单击后可以观察到线条)
      // 实时打印出来点位信息
      console.log(e.latlng.lat, e.latlng.lng);
    }

    // 移动过程中可视化线条
    function onMove(e) {
      if (points.length > 0) {
        ls = [points[points.length - 1],
          [e.latlng.lat, e.latlng.lng]
        ]
        tempLines.setLatLngs(ls)
        map.addLayer(tempLines)
      }
    }

    //鼠标双击事件
    function onDoubleClick(e) {
      L.polyline(points).addTo(map) //把最后绘制完成的折线添加到图层
      points = [] // 清空数组信息(准备下一次绘制)
      lines = new L.polyline(points) // 从新定义绘制折线叠加层的点位信息
      map.off('mousemove') // 双击完成后移除鼠标移动事件
      console.log('结束点' + e.latlng.lat, e.latlng.lng);
    }
  }

然后我们在上面做出调用，在这里要注意，map.off("click") 在从新注册事件之前清空上一次的点击事件

//动态标记
  $("#tourpoint").click(function () {
    // 在点击标记事件之前清空上一次的点击事件
    map.off('click');
    DrawPoint();
  });

//动态绘制线
  $("#linepatrol").click(function () {
    // 在点击标记事件之前清空上一次的点击事件
    map.off('click');
    DrawLine();
  });

这个功能也就算了完成了，有什么不对的地方希望大家指出来

后续在做更新，下期我们写点的聚散也成为撒点，在次之前我们要提前准备好这两个插件