|
|
|
|
@ -38,11 +38,50 @@ export default {
|
|
|
|
|
lngLatData: [], // 绘制多边形坐标点
|
|
|
|
|
polygonPath: [
|
|
|
|
|
{
|
|
|
|
|
provider: '',
|
|
|
|
|
provider: 'provider1',
|
|
|
|
|
editable: false,
|
|
|
|
|
polygonsVOS: [
|
|
|
|
|
{
|
|
|
|
|
lat: '',
|
|
|
|
|
lng: '',
|
|
|
|
|
lat: '31.035352998532925',
|
|
|
|
|
lng: '121.22047942131758',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
lat: '31.034433694479787',
|
|
|
|
|
lng: '121.22200291603804',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
lat: '31.035408156493887',
|
|
|
|
|
lng: '121.22356932610273',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
lat: '31.03625390789439',
|
|
|
|
|
lng: '121.22146647423506',
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
provider: 'provider2',
|
|
|
|
|
editable: true,
|
|
|
|
|
polygonsVOS: [
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.036180364592568,
|
|
|
|
|
"lng": 121.22818272560835
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.033992425381925,
|
|
|
|
|
"lng": 121.22753899544477
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.03472787274239,
|
|
|
|
|
"lng": 121.22535031288862
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.03625390789439,
|
|
|
|
|
"lng": 121.22625153511763
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.036879023666664,
|
|
|
|
|
"lng": 121.2274531647563
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
@ -69,11 +108,28 @@ export default {
|
|
|
|
|
this.$emit('areaVisibleChange', false)
|
|
|
|
|
},
|
|
|
|
|
combineOverlays() {
|
|
|
|
|
// overlaysArray.
|
|
|
|
|
const lngLat = [];
|
|
|
|
|
for (var i = 0;i < overlaysArray.length;i++) {
|
|
|
|
|
for (const item of overlaysArray[i].getPath().elems) {
|
|
|
|
|
const lng = item.getLng();
|
|
|
|
|
const lat = item.getLat();
|
|
|
|
|
lngLat.push({
|
|
|
|
|
lat: lat,
|
|
|
|
|
lng: lng
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.targetAreaPath = lngLat
|
|
|
|
|
const obj = {
|
|
|
|
|
provider: '新增商户',
|
|
|
|
|
editable: true,
|
|
|
|
|
polygonsVOS: lngLat,
|
|
|
|
|
}
|
|
|
|
|
this.polygonPath.push(obj)
|
|
|
|
|
this.setMapData(true)
|
|
|
|
|
},
|
|
|
|
|
// 删除绘制的多边形
|
|
|
|
|
clearOverlays() {
|
|
|
|
|
polygon.setPath([]);
|
|
|
|
|
if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0
|
|
|
|
|
// for (i in overlaysArray) {
|
|
|
|
|
for (var i = 0;i < overlaysArray.length;i++) {
|
|
|
|
|
@ -81,8 +137,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
|
|
|
|
|
console.log(drawingManager);
|
|
|
|
|
this.setMapData();
|
|
|
|
|
},
|
|
|
|
|
// clearOverlays() {
|
|
|
|
|
// polygon.setMap(null);
|
|
|
|
|
@ -113,7 +167,7 @@ export default {
|
|
|
|
|
/**
|
|
|
|
|
* 位置信息在地图上展示
|
|
|
|
|
*/
|
|
|
|
|
setMapData() {
|
|
|
|
|
setMapData(flag) {
|
|
|
|
|
const myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
|
|
|
|
|
console.log("当前位置："+this.position.latitude, this.position.longitude, myLatlng)
|
|
|
|
|
const myOptions = {
|
|
|
|
|
@ -129,8 +183,14 @@ export default {
|
|
|
|
|
map: map,
|
|
|
|
|
draggable: false
|
|
|
|
|
})
|
|
|
|
|
if (!flag) {
|
|
|
|
|
//查询所有后台围栏
|
|
|
|
|
this.getAllPolygons()
|
|
|
|
|
} else {
|
|
|
|
|
this.showArrayPolygon()
|
|
|
|
|
/**绘制围栏 */
|
|
|
|
|
this.addpolygon();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/**绘制围栏 */
|
|
|
|
|
addpolygon() {
|
|
|
|
|
@ -143,7 +203,6 @@ export default {
|
|
|
|
|
position: window.qq.maps.ControlPosition.TOP_CENTER,
|
|
|
|
|
// 表头显示区域
|
|
|
|
|
drawingModes: [
|
|
|
|
|
// window.qq.maps.drawing.OverlayType.MARKER,
|
|
|
|
|
window.qq.maps.drawing.OverlayType.POLYGON,
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
@ -162,6 +221,7 @@ export default {
|
|
|
|
|
// 监听
|
|
|
|
|
window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
|
|
|
|
|
console.log('overlaycomplete', event)
|
|
|
|
|
_this.clearOverlays()
|
|
|
|
|
overlaysArray.push(event.overlay);
|
|
|
|
|
const lngLat = [];
|
|
|
|
|
for (const item of event.overlay.getPath().elems) {
|
|
|
|
|
@ -203,56 +263,7 @@ export default {
|
|
|
|
|
// .catch(function (error) {
|
|
|
|
|
// console.error(error);
|
|
|
|
|
// });
|
|
|
|
|
_this.polygonPath = [
|
|
|
|
|
{
|
|
|
|
|
provider: 'provider1',
|
|
|
|
|
editable: false,
|
|
|
|
|
polygonsVOS: [
|
|
|
|
|
{
|
|
|
|
|
lat: '31.035352998532925',
|
|
|
|
|
lng: '121.22047942131758',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
lat: '31.034433694479787',
|
|
|
|
|
lng: '121.22200291603804',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
lat: '31.035408156493887',
|
|
|
|
|
lng: '121.22356932610273',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
lat: '31.03625390789439',
|
|
|
|
|
lng: '121.22146647423506',
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
provider: 'provider2',
|
|
|
|
|
editable: true,
|
|
|
|
|
polygonsVOS: [
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.036180364592568,
|
|
|
|
|
"lng": 121.22818272560835
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.033992425381925,
|
|
|
|
|
"lng": 121.22753899544477
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.03472787274239,
|
|
|
|
|
"lng": 121.22535031288862
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.03625390789439,
|
|
|
|
|
"lng": 121.22625153511763
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.036879023666664,
|
|
|
|
|
"lng": 121.2274531647563
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
if (this.mode == 'add') {
|
|
|
|
|
_this.polygonPath = _this.polygonPath.filter(e => !e.editable)
|
|
|
|
|
}
|
|
|
|
|
|
