<template>
|
<div>
|
<div style="float: left;width: 15%;overflow:auto">
|
<Table
|
border
|
:columns="columns"
|
:data="data"
|
ref="table"
|
height="600"
|
highlight-row
|
@on-current-change="handleRowChange"
|
></Table>
|
</div>
|
<div style="float: right;width: 85%;">
|
<!--<div id="container"></div>-->
|
<!--<ul class="drawing-panel" style="z-index: 99;">-->
|
<!--<li class = "btn" @click="openEdit">开启编辑</li>-->
|
<!--<li class = "btn" @click="closeEdit">保存编辑</li>-->
|
<!--</ul>-->
|
|
<ul class = "drawing-panel">
|
<li class="bmap-btn bmap-polygon" id="polygon" @click="draw"></li>
|
<!--<li class = "btn" @click="clearAll">清除重画</li>-->
|
</ul>
|
<div id = "container"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getAllArea,
|
addAreaMap,
|
getAllByAreaId,
|
delAreaMap,
|
} from "@/api/open";
|
export default {
|
name: "",
|
data() {
|
return {
|
polygon: {},
|
columns: [
|
{
|
title: "片区名称",
|
key: "name",
|
},
|
],
|
data:[],
|
map:{},
|
areaId:"",
|
drawingManager:{},
|
overlays:[]
|
}
|
},
|
mounted() {
|
this.getDataList();
|
|
this.map = new BMapGL.Map('container',{enableMapClick:false});
|
var point = new BMapGL.Point(118.187167,39.636514);
|
this.map.centerAndZoom(point, 12);
|
this.map.enableScrollWheelZoom(true);
|
|
|
|
|
|
|
|
// this.polygon = new BMapGL.Polygon([
|
// new BMapGL.Point(118.127822,39.697015),
|
// new BMapGL.Point(118.253728,39.697459),
|
// new BMapGL.Point(118.256028,39.601458),
|
// new BMapGL.Point(118.109424,39.59612),
|
// new BMapGL.Point(118.100801,39.650809),
|
// ], {
|
// strokeColor: 'blue',
|
// strokeWeight: 2,
|
// strokeOpacity: 0.5
|
// });
|
// this.map.addOverlay(this.polygon);
|
},
|
methods:{
|
clearAll() {
|
for(var i = 0; i < this.overlays.length; i++){
|
this.map.removeOverlay(this.overlays[i]);
|
}
|
this.overlays.length = 0
|
},
|
draw(e) {
|
this.clearAll();
|
|
var styleOptions = {
|
strokeColor: '#5E87DB', // 边线颜色
|
fillColor: '#5E87DB', // 填充颜色。当参数为空时，圆形没有填充颜色
|
strokeWeight: 2, // 边线宽度，以像素为单位
|
strokeOpacity: 1, // 边线透明度，取值范围0-1
|
fillOpacity: 0.2 // 填充透明度，取值范围0-1
|
};
|
|
// 实例化鼠标绘制工具
|
this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
|
// isOpen: true, // 是否开启绘制模式
|
enableCalculate: false, // 绘制是否进行测距测面
|
enableSorption: true, // 是否开启边界吸附功能
|
sorptiondistance: 20, // 边界吸附距离
|
polygonOptions: styleOptions, // 多边形的样式
|
});
|
|
console.log(e)
|
var arr = document.getElementsByClassName('bmap-btn');
|
for(var i = 0; i<arr.length; i++) {
|
arr[i].style.backgroundPositionY = '0';
|
}
|
//e.style.backgroundPositionY = '-52px';
|
var drawingType = BMAP_DRAWING_POLYGON;
|
// 进行绘制
|
if (this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === drawingType) {
|
this.drawingManager.close();
|
} else {
|
this.drawingManager.setDrawingMode(drawingType);
|
this.drawingManager.open();
|
}
|
|
this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete);
|
},
|
overlaycomplete(e){
|
this.overlays.push(e.overlay);
|
var path = e.overlay.getPath();
|
delAreaMap({id:this.areaId}).then((res) => {
|
if(res.success){
|
for(var i=0;i<path.length;i++){
|
addAreaMap({areaId:this.areaId,lng:path[i].lng,lat:path[i].lat,seq:i}).then((res) => {
|
this.findMap();
|
});
|
//this.sleep(150)
|
}
|
// addAreaMap({areaId:this.areaId,lng:path[0].lng,lat:path[0].lat}).then((res) => {
|
//
|
// });
|
}
|
});
|
},
|
sleep(delay) {
|
var start = (new Date()).getTime();
|
while((new Date()).getTime() - start < delay) {
|
continue;
|
}
|
},
|
openEdit() {
|
this.polygon.enableEditing();
|
},
|
closeEdit() {
|
this.polygon.disableEditing();
|
var obj = this.polygon.points;
|
console.log(this.polygon)
|
|
delAreaMap({id:this.areaId}).then((res) => {
|
if(res.success){
|
for(var i=0;i<obj.length;i++){
|
addAreaMap({areaId:this.areaId,lng:this.getLng(obj[i].lng,obj[i].lat),lat:this.getLat(obj[i].lng,obj[i].lat)}).then((res) => {
|
this.findMap();
|
});
|
}
|
}
|
});
|
|
},
|
getDataList() {
|
getAllArea({}).then((res) => {
|
if (res.success) {
|
this.data = res.result;
|
}
|
});
|
},
|
handleRowChange(currentRow, oldCurrentRow){
|
this.areaId = currentRow.id
|
this.findMap();
|
},
|
findMap(){
|
getAllByAreaId({id:this.areaId}).then((res) => {
|
if (res.success) {
|
this.map.clearOverlays();
|
if(res.result.length>2){
|
var ps = []
|
for(var i=0;i<res.result.length;i++){
|
ps.push(new BMapGL.Point(res.result[i].lng,res.result[i].lat))
|
}
|
this.polygon = new BMapGL.Polygon(ps, {
|
strokeColor: 'blue',
|
strokeWeight: 2,
|
strokeOpacity: 0.5
|
});
|
this.map.addOverlay(this.polygon);
|
}else{
|
// this.polygon = new BMapGL.Polygon([
|
// new BMapGL.Point(118.127822,39.697015),
|
// new BMapGL.Point(118.253728,39.697459),
|
// new BMapGL.Point(118.256028,39.601458),
|
// new BMapGL.Point(118.109424,39.59612),
|
// new BMapGL.Point(118.100801,39.650809),
|
// ], {
|
// strokeColor: 'blue',
|
// strokeWeight: 2,
|
// strokeOpacity: 0.5
|
// });
|
// this.map.addOverlay(this.polygon);
|
}
|
}
|
});
|
}
|
}
|
}
|
|
</script>
|
|
<style scoped>
|
body, html, #container {width: 100%; height: 600px; overflow: hidden; margin: 0; font-family: "微软雅黑";}
|
ul li {list-style: none;}
|
.drawing-panel {
|
z-index: 999;
|
position: fixed;
|
bottom: 3.5rem;
|
margin-left: 2.5rem;
|
padding-left: 0;
|
border-radius: .25rem;
|
height: 47px;
|
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
|
}
|
.bmap-btn {
|
border-right: 1px solid #d2d2d2;
|
float: left;
|
width: 64px;
|
height: 100%;
|
background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
|
cursor: pointer;
|
}
|
.drawing-panel .bmap-marker {
|
background-position: -65px 0;
|
}
|
.drawing-panel .bmap-polyline {
|
background-position: -195px 0;
|
}
|
.drawing-panel .bmap-rectangle {
|
background-position: -325px 0;
|
}
|
.drawing-panel .bmap-polygon {
|
background-position: -260px 0;
|
}
|
.drawing-panel .bmap-circle {
|
background-position: -130px 0;
|
}
|
/*body,*/
|
/*html,*/
|
/*#container {*/
|
/*overflow: hidden;*/
|
/*width: 100%;*/
|
/*height: 600px;*/
|
/*margin: 0;*/
|
/*font-family: "微软雅黑";*/
|
/*}*/
|
/*ul li {*/
|
/*list-style: none;*/
|
/*}*/
|
/*.drawing-panel {*/
|
/*z-index: 999;*/
|
/*position: fixed;*/
|
/*bottom: 3.5rem;*/
|
/*margin-left: 3rem;*/
|
/*padding: 1rem 1rem;*/
|
/*border-radius: .25rem;*/
|
/*background-color: #fff;*/
|
/*box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);*/
|
/*}*/
|
/*.btn {*/
|
/*width: 150px;*/
|
/*height: 30px;*/
|
/*float: left;*/
|
/*background-color: #fff;*/
|
/*color: rgba(27, 142, 236, 1);*/
|
/*font-size: 14px;*/
|
/*border:1px solid rgba(27, 142, 236, 1);*/
|
/*border-radius: 5px;*/
|
/*margin: 0 5px;*/
|
/*text-align: center;*/
|
/*line-height: 30px;*/
|
/*}*/
|
/*.btn:hover {*/
|
/*background-color: rgba(27, 142, 236, 0.8);*/
|
/*color: #fff;*/
|
/*}*/
|
</style>
|
