<template>
|
<GlobalWindow title="绘制运营区域" :visible.sync="isShowModal" :confirm-working="isWorking" @close="close"
|
@confirm="confirm" width="1000px">
|
<div class="map_title">绘制：鼠标左键点击及移动即可绘制图形，绘制过程中按下esc键可中断该过程</div>
|
<div class="map_title">鼠标左键双击即可结束当前多边形绘制，多边形会自动闭合；</div>
|
<div class="map_wrap">
|
<div class="btns">
|
<el-button plain type="primary" @click="reset">{{ polygons.length > 0 ? '重新绘制' : '开始绘制' }}</el-button>
|
<!-- <el-button plain type="primary" @click="changeMode">结束绘制</el-button> -->
|
<!-- <el-button plain @click="reset">重新绘制</el-button> -->
|
<!-- <el-button plain type="danger" @click="deleteObj">删除</el-button> -->
|
</div>
|
<div id="container" style="width: 100%; height: 100%"></div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { Message } from 'element-ui'
|
var map // 地图
|
// var editor // 编辑器
|
export default {
|
components: {
|
GlobalWindow
|
},
|
data() {
|
return {
|
isShowModal: false,
|
isWorking: false,
|
|
map: null,
|
editor: null,
|
polygon: null,
|
polygons: [], // 存储所有绘制的多边形
|
selectedPolygon: null,
|
}
|
},
|
methods: {
|
initMap() {
|
map = new TMap.Map("container", {
|
zoom: 16, // 设置地图缩放级别
|
center: new TMap.LatLng(31.722763, 117.385480) // 设置地图中心点坐标
|
})
|
var tempList = []
|
if (this.polygons.length > 0) {
|
tempList = [{ paths: this.polygons.map(item => new TMap.LatLng(item.lat, item.lng)) }]
|
}
|
this.polygon = new TMap.MultiPolygon({
|
map: map,
|
id: 'polygon',
|
selectedStyleId: 'highlight',
|
styles: {
|
highlight: new TMap.PolygonStyle({
|
color: 'rgba(255, 255, 0, 0.6)'
|
})
|
},
|
geometries: tempList
|
})
|
this.editor = new TMap.tools.GeometryEditor({
|
map,
|
overlayList: [{
|
overlay: this.polygon,
|
id: 'polygon',
|
}],
|
actionMode: tempList.length > 0 ? TMap.tools.constants.EDITOR_ACTION.INTERACT : TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
|
activeOverlayId: 'polygon', // 激活图层
|
snappable: true, // 开启吸附
|
selectable: true,
|
})
|
|
let evtList = ['delete', 'adjust', 'split', 'union']
|
evtList.forEach(evtName => {
|
this.editor.on(evtName + '_complete', evtResult => {
|
// console.log(evtName, evtResult)
|
})
|
})
|
this.editor.on('draw_complete', (geometry) => {
|
var id = geometry.id
|
if (this.editor.getActiveOverlay().id === 'polygon') {
|
var geo = this.polygon.geometries.filter(function (item) {
|
return item.id === id
|
})
|
this.polygons = geo[0].paths
|
// console.log('绘制的多边形坐标：', geo[0].paths)
|
}
|
this.changeMode()
|
})
|
},
|
handleAgain() {
|
this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
|
},
|
reset() {
|
// this.editor.enable()
|
this.polygons = []
|
this.polygon.setGeometries([])
|
this.polygon.remove('polygon')
|
this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW)
|
},
|
changeMode() {
|
this.editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT)
|
},
|
deleteObj() {
|
this.editor.delete()
|
},
|
close() {
|
this.reset()
|
map.destroy()
|
this.isShowModal = false
|
},
|
confirm() {
|
const list = this.editor.getOverlayList()[0].overlay.geometries
|
if (list.length == 0) return Message.warning('请先绘制运营区域')
|
this.isShowModal = false
|
this.reset()
|
this.$emit('change', list[0].paths)
|
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.map_title {
|
font-size: 14px;
|
font-weight: 500;
|
margin-bottom: 6px;
|
}
|
|
.map_wrap {
|
width: 100%;
|
height: calc(100% - 60px);
|
position: relative;
|
|
.btns {
|
position: absolute;
|
left: 50%;
|
top: 10px;
|
transform: translate(-50%, 0);
|
z-index: 99999999999;
|
}
|
}
|
</style>
|
