|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog :title="title" :close-on-click-modal="false" :visible="true" top="10vh" width="90%" append-to-body
|
|
|
|
|
<el-dialog :title="title" style="z-index: 9999;" :append-to-body="true" :close-on-click-modal="false" :visible="true" top="10vh" width="90%" append-to-body
|
|
|
|
|
modal-append-to-body :before-close="handleClose" class="my-dialog">
|
|
|
|
|
<div class="cont">
|
|
|
|
|
<div class="tips">
|
|
|
|
@ -8,6 +8,10 @@
|
|
|
|
|
<div class="addpolygon">
|
|
|
|
|
<div id="mapFencecontainer">
|
|
|
|
|
<div class="mapBtn">
|
|
|
|
|
<template v-if="mode == 'add'">
|
|
|
|
|
<el-button size="small" type="primary" @click="clearOverlays">清空</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="combineOverlays">合并</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
<el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -19,7 +23,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let marker, polygon, drawingManager, lngLat,ap, map, MultiPolygon;
|
|
|
|
|
let marker, polygon, drawingManager, lngLat, map, MultiPolygon;
|
|
|
|
|
let path = [];// 设置回显数据参数
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
// let map, marker, polygon, drawingManager, lngLat; // 地图,坐标点,多边形初始化加载,多边形绘制,多边形每个点的集成数组
|
|
|
|
@ -64,9 +68,25 @@ export default {
|
|
|
|
|
handleClose() {
|
|
|
|
|
this.$emit('areaVisibleChange', false)
|
|
|
|
|
},
|
|
|
|
|
combineOverlays() {
|
|
|
|
|
// overlaysArray.
|
|
|
|
|
},
|
|
|
|
|
// 删除绘制的多边形
|
|
|
|
|
clearOverlays() {
|
|
|
|
|
polygon.setMap(null);
|
|
|
|
|
polygon.setPath([]);
|
|
|
|
|
if (overlaysArray) { // 这个if判断在vue中会报错,不知道是里面的for in 被重写还是咋的,原因还不知道,如果报错可以不要这个if判断,删除标注那个地方跟这个原理是一样的,报错的话也不要,把长度重置为0
|
|
|
|
|
// for (i in overlaysArray) {
|
|
|
|
|
for (var i = 0;i < overlaysArray.length;i++) {
|
|
|
|
|
overlaysArray[i].setMap(null);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
overlaysArray = []; // 需要重置为空,否则之前的数据还在这个数组里面
|
|
|
|
|
console.log(drawingManager);
|
|
|
|
|
this.setMapData();
|
|
|
|
|
},
|
|
|
|
|
// clearOverlays() {
|
|
|
|
|
// polygon.setMap(null);
|
|
|
|
|
// },
|
|
|
|
|
sendLngLat() {
|
|
|
|
|
this.$emit('areaVisibleChange', false, this.targetAreaPath)
|
|
|
|
|
},
|
|
|
|
@ -139,9 +159,10 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
drawingManager.setMap(map);
|
|
|
|
|
// 监听
|
|
|
|
|
window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
|
|
|
|
|
console.log('overlaycomplete', event)
|
|
|
|
|
// polygon.setMap(null);
|
|
|
|
|
overlaysArray.push(event.overlay);
|
|
|
|
|
const lngLat = [];
|
|
|
|
|
for (const item of event.overlay.getPath().elems) {
|
|
|
|
|
const lng = item.getLng();
|
|
|
|
@ -152,7 +173,6 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
console.log("绘图后获得的:",JSON.stringify(lngLat,null,4), polygon); // 获得相应的经纬度值
|
|
|
|
|
_this.showPolygons(lngLat, true)
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 编辑
|
|
|
|
@ -240,9 +260,6 @@ export default {
|
|
|
|
|
|
|
|
|
|
/**绘制围栏 */
|
|
|
|
|
this.addpolygon();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
/**循环调用显示围栏方法 */
|
|
|
|
|
showArrayPolygon(){
|
|
|
|
@ -277,9 +294,6 @@ export default {
|
|
|
|
|
fillColor: new qq.maps.Color(202, 67, 58, 0.1)
|
|
|
|
|
});
|
|
|
|
|
polygon.setPath(path);
|
|
|
|
|
// if (editable && this.mode == 'add') {
|
|
|
|
|
// polygon.setMap(map);
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
@ -324,7 +338,7 @@ export default {
|
|
|
|
|
.loadMap {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 40%;
|
|
|
|
|
top: 30%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
color: #333;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|