Closed kimmy-stack closed 3 years ago
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类组件
【SDK】【MapboxGL】【修复Draw&Measure组件同时使用的事件混乱问题】
<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>
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'delete' of null at MapboxDraw.__webpack_exports.default.api.deleteAll (api.js?042a:142) at VueComponent.remove (Measure.vue?b5f7:181) at VueComponent.beforeDestroy (Measure.vue?b5f7:104) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at callHook (vue.runtime.esm.js?2b0e:4219) at VueComponent.Vue.$destroy (vue.runtime.esm.js?2b0e:3978) at destroy (vue.runtime.esm.js?2b0e:3159) at invokeDestroyHook (vue.runtime.esm.js?2b0e:6114) at invokeDestroyHook (vue.runtime.esm.js?2b0e:6119) at VueComponent.patch [as patch__] (vue.runtime.esm.js?2b0e:6467)