mapbox-gl开发：动态画线标绘

在mapbox-gl地图上，实现动态画线的效果，点击左键增加画线的点，鼠标移动，实现线随着鼠标移动位置的效果，点击右键结束画线。
mapbox-gl接口实现标绘数据存储在geojson数据中，通过添加数据源、修改数据源，实现地图上的标绘数据实时更新。

//添加geojson数据源：
      this.map.addSource(this.sourceid, {
            type: 'geojson',
           data: this.geojsondata
       })
//添加线标绘图层，设置线标绘的属性信息：
     this.map.addLayer({
       id: this.linelayerid,
       type: 'line',
       source: this.sourceid,
        layout: {
         'line-cap': 'round',
          'line-join': 'round'
       },
        paint: {
         'line-color': '#f00',
         'line-width': 2
       },
       filter: ['in', '$type', 'LineString']
    })

//鼠标动态移动事件，线的终点随着鼠标移动
this.mapmousemovefunc = function (e) {
    const _editfeature = scope.geojsondata.features[scope.getEditFeatureid()]
  _editfeature.geometry.coordinates.splice(_editfeature.geometry.coordinates.length - 1, 1, [e.lngLat.lng, e.lngLat.lat])
    scope.map.getSource(scope.sourceid).setData(scope.geojsondata)
  }
//鼠标点击事件，分为初次点击和之后点击的事件
  this.mapclickfunc = function (e) {
    if (_isfirst) {
//再次点击鼠标，修改最后一个点，并新增点
      const _editfeature = scope.geojsondata.features[scope.getEditFeatureid()]
      _editfeature.geometry.coordinates.splice(_editfeature.geometry.coordinates.length - 1, 1, [e.lngLat.lng, e.lngLat.lat])
      _editfeature.geometry.coordinates.push([e.lngLat.lng, e.lngLat.lat])
      let _centerpos = turf.centroid(scope.geojsondata) 
      _editfeature.properties.centerpos =  _centerpos.geometry.coordinates
      scope.map.getSource(scope.sourceid).setData(scope.geojsondata)
    } else {
   //初次点击鼠标，创建线数据
      _isfirst = true
      scope.editfeatureid = scope.createuuid()
      scope.geojsondata.features.push({
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: [
            [e.lngLat.lng, e.lngLat.lat],
            [e.lngLat.lng + 0.000001, e.lngLat.lat]
          ]
        },
        properties: {
          id: scope.editfeatureid,
          sourceid: scope.sourceid,
          isdraw: true,
          centerpos: [e.lngLat.lng, e.lngLat.lat], 
          color: '#f00',
          opacity: 0.7
        }
      })
      scope.map.on('mousemove', scope.mapmousemovefunc)
    }
  }

//增加鼠标点击，右键结束标绘事件
this.map.on('click', this.mapclickfunc)
this.maprightclickfunc = function () {
    scope.stop()
  }
  this.map.on('contextmenu', this.maprightclickfunc)