Error in measure component destory

[mapgis]

Error in measure component destory

[ParnDeedlit]

reason 原因

vue data bind this to draw/measure control , so can not get ctx.store.deleteAll, use window.control to replace vue binding

之前是通过Vue的data来bind（this），发现无法获得ctx.store的上下文环境来做删除操作，后面统一采取window.control的全局对象来管理这2类组件

fix 修复

【SDK】【MapboxGL】【修复Draw&Measure组件同时使用的事件混乱问题】

code

<template>
  <div>
    <mapgis-web-map @load="handleMapLoad">
      <mapgis-rastertile-layer :layerId="layerId" :url="url" />
      <mapgis-mvt-style-layer :mvtStyle="mvtStyle" v-if="show" />
      <div id="mapgis-2d-draw-measure-switch">
         <a-switch 
          checked-children="绘制" 
          un-checked-children="测量" 
          default-checked
          @change="handleDrawMeasure"
        />
      </div>
      <mapgis-draw
        v-if="drawOrMeasure"
        position="top-left"
        v-bind:controls="controls"
        v-on:added="handleDrawAdded"
        v-on:drawcreate="handleDrawCreate"
        ref="draw"
      >
        <div id="mapgis-2d-draw-wrapper">
          <a-button-group>
            <a-button v-on:click="togglePoint">画点</a-button>
            <a-button v-on:click="togglePolyline">画线</a-button>
            <a-button v-on:click="togglePolygon">画区</a-button>
            <a-button type="primary" v-on:click="toggleDelete">删除</a-button>
          </a-button-group>
        </div>
      </mapgis-draw>
      <mapgis-measure
        v-else
        position="top-left"
        :measureMode="measureMode"
        v-on:added="handleMeasureAdded"
        ref="measure"
      >
        <div id="mapgis-2d-measure-wrapper">
          <a-button-group>
            <a-button v-on:click="toggleLength">长度</a-button>
            <a-button v-on:click="toggleArea">面积</a-button>
          </a-button-group>
        </div>
      </mapgis-measure>
    </mapgis-web-map>
  </div>
</template>

<script>
export default {
  name: 'mapgis-2d-map-wrapper',
  data () {
    return {
      show: true,
      layerId: 'igsLayer_layerId',
      url: 'http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',

      mvtStyle: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/街道-墨卡托.json',
      drawOrMeasure: true,
      drawer: undefined,
      measure: undefined,
      measureMode: undefined,
      controls: {
        point: false,
        line_string: false,
        polygon: false,
        trash: false,
        combine_features: false,
        uncombine_features: false
      }
    }
  },
  methods: {
    handleMapLoad () {
      /* const vm = this
      window.setTimeout(() => {
        vm.mvtStyle = 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/深色-墨卡托.json'
      }, 5000)
      window.setTimeout(() => {
        vm.show = false
      }, 15000) */
    },
    handleDrawMeasure (draw) {
      this.drawOrMeasure = draw
    },
    enableDrawer () {
      const component = this.$refs.draw
      if (component) {
        component.enableDrawer()
      }
    },
    handleDrawAdded (e) {
      const { drawer } = e
      this.drawer = drawer
    },
    togglePoint (e) {
      this.type = 'point'
      this.enableDrawer()
      this.drawer && this.drawer.changeMode('draw_point')
    },
    togglePolyline () {
      this.type = 'polyline'
      this.enableDrawer()
      this.drawer && this.drawer.changeMode('draw_line_string')
    },
    togglePolygon () {
      this.type = 'polygon'
      this.enableDrawer()
      this.drawer && this.drawer.changeMode('draw_polygon')
    },
    toggleDelete () {
      this.featureArr = ''
      this.queryParameters = ''
      this.drawer && this.drawer.deleteAll()
    },
    handleDrawCreate () {
    },
    handleMeasureAdded (e) {
      const { measure } = e
      this.measure = measure
    },
    enableMeasure () {
      const component = this.$refs.measure
      if (component) {
        component.enableMeasure()
      }
    },
    toggleLength () {
      this.enableMeasure()
      // this.coordinates = []
      this.measureMode = 'measure-length'
      this.measure && this.measure.changeMode('draw_line_string')
    },
    toggleArea () {
      this.enableMeasure()
      // this.coordinates = [];
      this.measureMode = 'measure-area'
      this.measure && this.measure.changeMode('draw_polygon')
    }
  }
}
</script>

<style>
#mapgis-2d-draw-measure-switch {
  position: absolute;
  z-index: 9999;
  top: 10px;
  left: 10px;
}
#mapgis-2d-draw-wrapper {
  position: absolute;
  z-index: 9999;
  top: 40px;
  left: 10px;
}
#mapgis-2d-measure-wrapper {
  position: absolute;
  z-index: 9999;
  top: 80px;
  left: 10px;
}
</style>