Comments (1)
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>
from webclient-vue.
Related Issues (6)
- README.md中的URL网址http://develop.smaryun.com:8899/无效 HOT 1
- Error in measure component destory HOT 1
- No matching version found for @mapgis/webclient-es6-service@^10.5.7 HOT 1
- README 文档共5处拼写笔误</temaplate>应改为</template> HOT 1
- measure component and draw component can't support multiple call enableMeasure and enableDrawer when hot reload HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webclient-vue.