|
|
|
@ -1,19 +1,19 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<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
|
|
|
|
<el-dialog :title="title" style="z-index: 9999;" :append-to-body="true" :close-on-click-modal="false" :visible="true"
|
|
|
|
modal-append-to-body :before-close="handleClose" class="my-dialog">
|
|
|
|
top="10vh" width="90%" append-to-body modal-append-to-body :before-close="handleClose" class="my-dialog">
|
|
|
|
<div class="cont">
|
|
|
|
<div class="cont">
|
|
|
|
<div class="tips">
|
|
|
|
<div class="tips">
|
|
|
|
<p>1、绘制：鼠标左键点击及移动即可绘制图形; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束</p>
|
|
|
|
<p>1、绘制：鼠标左键点击及移动即可绘制图形; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="addpolygon">
|
|
|
|
<div class="addpolygon">
|
|
|
|
<div id="mapFencecontainer">
|
|
|
|
<div id="mapFencecontainer">
|
|
|
|
<div class="mapBtn">
|
|
|
|
<div class="mapBtn">
|
|
|
|
<template v-if="mode == 'add'">
|
|
|
|
<template v-if="mode == 'add'">
|
|
|
|
<el-button size="small" type="primary" @click="clearOverlays">清空</el-button>
|
|
|
|
<el-button size="small" type="primary" @click="clearOverlays">清空</el-button>
|
|
|
|
<el-button size="small" type="primary" @click="combineOverlays">合并</el-button>
|
|
|
|
<el-button size="small" type="primary" @click="combineOverlays">确认</el-button>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
|
|
|
|
<el-button v-else size="small" type="primary" @click="editCombineOverlays">确认</el-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="loadMap" v-if="loadMapFlag">稍等，拼命加载地图中...</div>
|
|
|
|
<div class="loadMap" v-if="loadMapFlag">稍等，拼命加载地图中...</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -31,61 +31,23 @@ import axios from 'axios'
|
|
|
|
let overlaysArray = []; // 标注点集合,绘制多边形时的集合
|
|
|
|
let overlaysArray = []; // 标注点集合,绘制多边形时的集合
|
|
|
|
// 默认展示假数据回显参数
|
|
|
|
// 默认展示假数据回显参数
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
props: ['position', 'areaMapInfo', 'mode'],
|
|
|
|
props: ['position', 'dataForm', 'mode'],
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
longitude: '',
|
|
|
|
longitude: '',
|
|
|
|
latitude: '',
|
|
|
|
latitude: '',
|
|
|
|
lngLatData: [], // 绘制多边形坐标点
|
|
|
|
lngLatData: [], // 绘制多边形坐标点
|
|
|
|
polygonPath: [
|
|
|
|
polygonPath: [
|
|
|
|
{
|
|
|
|
// {
|
|
|
|
provider: 'provider1',
|
|
|
|
// provider: 'provider1',
|
|
|
|
editable: false,
|
|
|
|
// editable: false,
|
|
|
|
polygonsVOS: [
|
|
|
|
// areaMapInfo: '[{"lat":31.125083855992244,"lng":121.18080418556929},{"lat":31.123026545535918,"lng":121.18114750832319},{"lat":31.123816411075495,"lng":121.18724148720503},{"lat":31.126828861148027,"lng":121.18616860359907}]'
|
|
|
|
{
|
|
|
|
// },
|
|
|
|
lat: '31.035352998532925',
|
|
|
|
// {
|
|
|
|
lng: '121.22047942131758',
|
|
|
|
// provider: 'provider2',
|
|
|
|
},
|
|
|
|
// editable: false,
|
|
|
|
{
|
|
|
|
// areaMapInfo: '[{"lat":31.12153691930525,"lng":121.18181705474854},{"lat":31.117881352066963,"lng":121.18325471878052},{"lat":31.119222355395767,"lng":121.19102239608765},{"lat":31.12271254919646,"lng":121.18784666061401}]'
|
|
|
|
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
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
],
|
|
|
|
],
|
|
|
|
editor: null,
|
|
|
|
editor: null,
|
|
|
|
loadMapFlag: true,
|
|
|
|
loadMapFlag: true,
|
|
|
|
@ -108,6 +70,9 @@ export default {
|
|
|
|
handleClose() {
|
|
|
|
handleClose() {
|
|
|
|
this.$emit('areaVisibleChange', false)
|
|
|
|
this.$emit('areaVisibleChange', false)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
editCombineOverlays() {
|
|
|
|
|
|
|
|
this.$emit('areaVisibleChange', false, this.targetAreaPath)
|
|
|
|
|
|
|
|
},
|
|
|
|
combineOverlays() {
|
|
|
|
combineOverlays() {
|
|
|
|
const lngLat = [];
|
|
|
|
const lngLat = [];
|
|
|
|
for (var i = 0;i < overlaysArray.length;i++) {
|
|
|
|
for (var i = 0;i < overlaysArray.length;i++) {
|
|
|
|
@ -121,13 +86,7 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.targetAreaPath = lngLat
|
|
|
|
this.targetAreaPath = lngLat
|
|
|
|
const obj = {
|
|
|
|
this.$emit('areaVisibleChange', false, this.targetAreaPath)
|
|
|
|
provider: '新增商户',
|
|
|
|
|
|
|
|
editable: true,
|
|
|
|
|
|
|
|
polygonsVOS: lngLat,
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.polygonPath.push(obj)
|
|
|
|
|
|
|
|
this.setMapData(true)
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 删除绘制的多边形
|
|
|
|
// 删除绘制的多边形
|
|
|
|
clearOverlays() {
|
|
|
|
clearOverlays() {
|
|
|
|
@ -139,18 +98,29 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
|
|
|
|
overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// clearOverlays() {
|
|
|
|
|
|
|
|
// polygon.setMap(null);
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
sendLngLat() {
|
|
|
|
|
|
|
|
this.$emit('areaVisibleChange', false, this.targetAreaPath)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* //定位获得当前位置信息
|
|
|
|
* //定位获得当前位置信息
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
getMyLocation() {
|
|
|
|
getMyLocation() {
|
|
|
|
const geolocation = new qq.maps.Geolocation('U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6', '易回收后台');
|
|
|
|
// const url = `https://apis.map.qq.com/ws/location/v1/ip?key=U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6`
|
|
|
|
geolocation.getLocation(this.showPosition, this.showErr);
|
|
|
|
// axios.get(url).then(function (response) {
|
|
|
|
|
|
|
|
// console.log('ip', response)
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// .catch(function (error) {
|
|
|
|
|
|
|
|
// console.error(error);
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// const ip =
|
|
|
|
|
|
|
|
// const url = `https://apis.map.qq.com/ws/location/v1/ip=${ip}&key=${key}`
|
|
|
|
|
|
|
|
// axios.get("").then(function (response) {
|
|
|
|
|
|
|
|
// _this.polygonPath = response.data
|
|
|
|
|
|
|
|
// _this.showArrayPolygon()
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// .catch(function (error) {
|
|
|
|
|
|
|
|
// console.error(error);
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
const geolocation = new qq.maps.Geolocation('U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6', '易回收后台');
|
|
|
|
|
|
|
|
console.log('geolocation', geolocation)
|
|
|
|
|
|
|
|
geolocation.getLocation(this.showPosition, this.showErr);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
showPosition(position) {
|
|
|
|
showPosition(position) {
|
|
|
|
this.loadMapFlag = false
|
|
|
|
this.loadMapFlag = false
|
|
|
|
@ -169,6 +139,7 @@ export default {
|
|
|
|
* 位置信息在地图上展示
|
|
|
|
* 位置信息在地图上展示
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
setMapData(flag) {
|
|
|
|
setMapData(flag) {
|
|
|
|
|
|
|
|
// const myLatlng = new qq.maps.LatLng(31.122163, 121.190419);
|
|
|
|
const myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
|
|
|
|
const myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
|
|
|
|
console.log("当前位置："+this.position.latitude, this.position.longitude, myLatlng)
|
|
|
|
console.log("当前位置："+this.position.latitude, this.position.longitude, myLatlng)
|
|
|
|
const myOptions = {
|
|
|
|
const myOptions = {
|
|
|
|
@ -187,6 +158,8 @@ export default {
|
|
|
|
if (!flag) {
|
|
|
|
if (!flag) {
|
|
|
|
//查询所有后台围栏
|
|
|
|
//查询所有后台围栏
|
|
|
|
this.getAllPolygons()
|
|
|
|
this.getAllPolygons()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.showArrayPolygon()
|
|
|
|
this.showArrayPolygon()
|
|
|
|
/**绘制围栏 */
|
|
|
|
/**绘制围栏 */
|
|
|
|
@ -248,7 +221,7 @@ export default {
|
|
|
|
lng: lng
|
|
|
|
lng: lng
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.targetAreaPath = lngLat
|
|
|
|
_this.targetAreaPath = lngLat
|
|
|
|
console.log("adjustNode后获得的："+JSON.stringify(lngLat,null,4)); // 获得相应的经纬度值
|
|
|
|
console.log("adjustNode后获得的："+JSON.stringify(lngLat,null,4)); // 获得相应的经纬度值
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -256,39 +229,33 @@ export default {
|
|
|
|
* 获取所有围栏
|
|
|
|
* 获取所有围栏
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
getAllPolygons(){
|
|
|
|
getAllPolygons(){
|
|
|
|
debugger
|
|
|
|
|
|
|
|
const _this = this;
|
|
|
|
|
|
|
|
request({
|
|
|
|
request({
|
|
|
|
url: '/api/scm/StationArea/getOthersArea/',
|
|
|
|
url: '/api/scm/StationArea/get/others',
|
|
|
|
method: 'post'
|
|
|
|
method: 'get',
|
|
|
|
}).then(res => {
|
|
|
|
}).then(res => {
|
|
|
|
console.log('getOthersArea',res)
|
|
|
|
console.log('getOthersArea',res)
|
|
|
|
// this.dataInfo(res.data)
|
|
|
|
this.polygonPath = res.data
|
|
|
|
|
|
|
|
this.polygonPath.forEach(e => {
|
|
|
|
|
|
|
|
e.editable = false
|
|
|
|
|
|
|
|
if (this.mode == 'edit' && this.dataForm.id == e.id) {
|
|
|
|
|
|
|
|
e.editable = true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
this.showArrayPolygon()
|
|
|
|
|
|
|
|
/**绘制围栏 */
|
|
|
|
|
|
|
|
this.addpolygon();
|
|
|
|
|
|
|
|
}).catch(function (error) {
|
|
|
|
|
|
|
|
console.error(error);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// axios.get(url.url + "/v1/polygons/findAll").then(function (response) {
|
|
|
|
|
|
|
|
// _this.polygonPath = response.data
|
|
|
|
|
|
|
|
// _this.showArrayPolygon()
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// .catch(function (error) {
|
|
|
|
|
|
|
|
// console.error(error);
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (this.mode == 'add') {
|
|
|
|
|
|
|
|
_this.polygonPath = _this.polygonPath.filter(e => !e.editable)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
_this.showArrayPolygon()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**绘制围栏 */
|
|
|
|
|
|
|
|
this.addpolygon();
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/**循环调用显示围栏方法 */
|
|
|
|
/**循环调用显示围栏方法 */
|
|
|
|
showArrayPolygon(){
|
|
|
|
showArrayPolygon(){
|
|
|
|
const _this = this
|
|
|
|
const _this = this
|
|
|
|
for (const polygonpath of _this.polygonPath) {
|
|
|
|
for (const polygonpath of _this.polygonPath) {
|
|
|
|
path = []
|
|
|
|
const path = []
|
|
|
|
for (const polygonsvos of polygonpath.polygonsVOS) {
|
|
|
|
const areaMapInfo = polygonpath.areaMapInfo && JSON.parse(polygonpath.areaMapInfo)
|
|
|
|
path.push(new qq.maps.LatLng(polygonsvos.lat, polygonsvos.lng))
|
|
|
|
for (const areaMapInfo of areaMapInfo) {
|
|
|
|
|
|
|
|
path.push(new qq.maps.LatLng(areaMapInfo.lat, areaMapInfo.lng))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
_this.showpolygons(path, polygonpath.editable)
|
|
|
|
_this.showpolygons(path, polygonpath.editable)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -310,7 +277,7 @@ export default {
|
|
|
|
const _this = this
|
|
|
|
const _this = this
|
|
|
|
polygon = new qq.maps.Polygon({
|
|
|
|
polygon = new qq.maps.Polygon({
|
|
|
|
map: map,
|
|
|
|
map: map,
|
|
|
|
editable,
|
|
|
|
editable: editable,
|
|
|
|
strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
|
|
|
|
strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
|
|
|
|
fillColor: new qq.maps.Color(202, 67, 58, 0.1)
|
|
|
|
fillColor: new qq.maps.Color(202, 67, 58, 0.1)
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
