|
|
|
@ -6,115 +6,151 @@
|
|
|
|
|
<p>1、绘制:鼠标左键点击及移动即可绘制图形; 2、结束绘制:鼠标左键双击即可结束绘制折线、多边形会自动闭合;圆形、矩形、椭圆单击即可结束;
|
|
|
|
|
3、中断:绘制过程中按下esc键可中断该过程</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="mapFencecontainer" class="mapBox">
|
|
|
|
|
<div class="addpolygon">
|
|
|
|
|
<div id="mapFencecontainer">
|
|
|
|
|
<div class="mapBtn">
|
|
|
|
|
<el-button size="small" type="danger" @click="delpolygon()">删除多边形</el-button>
|
|
|
|
|
<el-button size="small" type="danger" @click="clearOverlays()">清除</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
|
|
|
|
|
<!-- <el-button size="small" type="primary" @click="sendMsg">返回</el-button> -->
|
|
|
|
|
<el-button size="small" type="primary" @click="sendMsg">返回</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="loadMap" v-if="loadMapFlag">稍等,拼命加载地图中...</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <p>给地图绑定了点击事件,当点击地图时,会在点击位置显示Marker。</p> -->
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let map, marker, polygon, drawingManager, lngLat; // 地图,坐标点,多边形初始化加载,多边形绘制,多边形每个点的集成数组
|
|
|
|
|
let marker, polygon, drawingManager, lngLat,ap, map;
|
|
|
|
|
let path = [];// 设置回显数据参数
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
// let map, marker, polygon, drawingManager, lngLat; // 地图,坐标点,多边形初始化加载,多边形绘制,多边形每个点的集成数组
|
|
|
|
|
let overlaysArray = []; // 标注点集合,绘制多边形时的集合
|
|
|
|
|
let path4 = [];// 设置回显数据参数
|
|
|
|
|
// 默认展示假数据回显参数
|
|
|
|
|
let arr = [{ 'lat': 34.80506482194067, 'lng': 113.59760284423828 },
|
|
|
|
|
{ 'lat': 34.780394716350614, 'lng': 113.59365463256836 },
|
|
|
|
|
{ 'lat': 34.760794345237514, 'lng': 113.58541488647461 },
|
|
|
|
|
{ 'lat': 34.7330074293797, 'lng': 113.58455657958984 },
|
|
|
|
|
{ 'lat': 34.70281206762318, 'lng': 113.61854553222656 },
|
|
|
|
|
{ 'lat': 34.70027176815597, 'lng': 113.62884521484375 },
|
|
|
|
|
{ 'lat': 34.6987193245323, 'lng': 113.63296508789062 },
|
|
|
|
|
{ 'lat': 34.69914272113635, 'lng': 113.63880157470703 },
|
|
|
|
|
{ 'lat': 34.699001589175694, 'lng': 113.64498138427734 },
|
|
|
|
|
{ 'lat': 34.698578191849535, 'lng': 113.68309020996094 },
|
|
|
|
|
{ 'lat': 34.73907339121123, 'lng': 113.68206024169922 },
|
|
|
|
|
{ 'lat': 34.738932327388824, 'lng': 113.6920166015625 },
|
|
|
|
|
{ 'lat': 34.76319176276739, 'lng': 113.69218826293945 },
|
|
|
|
|
{ 'lat': 34.763050740134055, 'lng': 113.70386123657227 },
|
|
|
|
|
{ 'lat': 34.7864571976711, 'lng': 113.70214462280273 },
|
|
|
|
|
{ 'lat': 34.786739162702524, 'lng': 113.68206024169922 },
|
|
|
|
|
{ 'lat': 34.809997957307736, 'lng': 113.68223190307617 },
|
|
|
|
|
{ 'lat': 34.81098454894641, 'lng': 113.64789962768555 },
|
|
|
|
|
{ 'lat': 34.81366238099493, 'lng': 113.62936019897461 }]; // 用于数据回显的假数据 后期会调用接口返回数据
|
|
|
|
|
export default {
|
|
|
|
|
props: ['position', 'areaMapInfo'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
longitude: '',
|
|
|
|
|
latitude: '',
|
|
|
|
|
lngLatData: [] // 绘制多边形坐标点
|
|
|
|
|
lngLatData: [], // 绘制多边形坐标点
|
|
|
|
|
polygonPath: [
|
|
|
|
|
{
|
|
|
|
|
provider: '',
|
|
|
|
|
polygonsVOS: [
|
|
|
|
|
{
|
|
|
|
|
lat: '',
|
|
|
|
|
lng: '',
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
editor: null,
|
|
|
|
|
loadMapFlag: true
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.init();
|
|
|
|
|
// this.init();
|
|
|
|
|
this.getMyLocation();
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleClose() {
|
|
|
|
|
this.$emit('areaVisibleChange', false);
|
|
|
|
|
this.$emit('areaVisibleChange', false)
|
|
|
|
|
},
|
|
|
|
|
// 子组件给父组件传值(返回按钮)
|
|
|
|
|
sendMsg() {
|
|
|
|
|
// func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
|
|
|
|
|
this.$emit('areaVisibleChange', false);
|
|
|
|
|
clearOverlays() {
|
|
|
|
|
polyline.setMap(null);
|
|
|
|
|
},
|
|
|
|
|
// 子组件给父组件传值(确认按钮)
|
|
|
|
|
sendLngLat() {
|
|
|
|
|
|
|
|
|
|
if (lngLat == undefined) {
|
|
|
|
|
lngLat = path4;
|
|
|
|
|
}
|
|
|
|
|
console.log('确认', lngLat)
|
|
|
|
|
this.$emit('areaVisibleChange', false, lngLat);
|
|
|
|
|
},
|
|
|
|
|
// 地图初始化
|
|
|
|
|
init() {
|
|
|
|
|
const lat = '34.81098454894641' || this.position.lat
|
|
|
|
|
const lng = '113.64789962768555' || this.position.lng
|
|
|
|
|
map = new qq.maps.Map(document.getElementById('mapFencecontainer'), {
|
|
|
|
|
center: new qq.maps.LatLng(lat, lng), // 暂时默认郑州
|
|
|
|
|
zoom: 22
|
|
|
|
|
});
|
|
|
|
|
qq.maps.event.addListener(map, "click", function (event) {
|
|
|
|
|
console.log('您点击的位置为: [' + event.latLng.getLat() + ', ' + event.latLng.getLng() + ']');
|
|
|
|
|
});
|
|
|
|
|
// 多边形绘制及回显
|
|
|
|
|
// 设置多边形路径以便回显
|
|
|
|
|
// path4 = [];
|
|
|
|
|
|
|
|
|
|
arr.forEach(item => {
|
|
|
|
|
path4.push(new qq.maps.LatLng(item.lat, item.lng));
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
sendMsg() {
|
|
|
|
|
|
|
|
|
|
console.log(path4);
|
|
|
|
|
this.showpolygon(path4);
|
|
|
|
|
// 绘制,操作
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* //定位获得当前位置信息
|
|
|
|
|
*/
|
|
|
|
|
getMyLocation() {
|
|
|
|
|
var geolocation = new qq.maps.Geolocation('U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6', '易回收后台');
|
|
|
|
|
geolocation.getLocation(this.showPosition, this.showErr);
|
|
|
|
|
},
|
|
|
|
|
showPosition(position) {
|
|
|
|
|
this.loadMapFlag = false
|
|
|
|
|
console.log(position);
|
|
|
|
|
this.position.latitude = position.lat;
|
|
|
|
|
this.position.longitude = position.lng;
|
|
|
|
|
this.position.city = position.city;
|
|
|
|
|
this.setMapData();
|
|
|
|
|
},
|
|
|
|
|
//定位失败再请求定位,测试使用
|
|
|
|
|
showErr() {
|
|
|
|
|
console.log("定位失败,请重试!");
|
|
|
|
|
this.getMyLocation();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 位置信息在地图上展示
|
|
|
|
|
*/
|
|
|
|
|
setMapData() {
|
|
|
|
|
var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
|
|
|
|
|
console.log("当前位置:"+this.position.latitude, this.position.longitude, myLatlng)
|
|
|
|
|
var myOptions = {
|
|
|
|
|
zoom: 16,
|
|
|
|
|
center: myLatlng,
|
|
|
|
|
mapTypeId: qq.maps.MapTypeId.ROADMAP
|
|
|
|
|
}
|
|
|
|
|
console.log(myOptions)
|
|
|
|
|
//获取dom元素添加地图信息
|
|
|
|
|
map = new qq.maps.Map(document.getElementById('mapFencecontainer'), myOptions)
|
|
|
|
|
//给定位的位置添加图片标注
|
|
|
|
|
marker = new qq.maps.Marker({
|
|
|
|
|
position: myLatlng,
|
|
|
|
|
map: map,
|
|
|
|
|
})
|
|
|
|
|
this.mouseClick()
|
|
|
|
|
/**绘制围栏 */
|
|
|
|
|
this.addpolygon();
|
|
|
|
|
//查询所有后台围栏
|
|
|
|
|
this.getAllPolygons()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 多边形绘制
|
|
|
|
|
* 鼠标点击获取标记位置事件
|
|
|
|
|
*/
|
|
|
|
|
// 绘制
|
|
|
|
|
mouseClick () {
|
|
|
|
|
const _this = this
|
|
|
|
|
qq.maps.event.addListener(map, 'click', function (event) {
|
|
|
|
|
if(!marker) {
|
|
|
|
|
marker=new qq.maps.Marker({
|
|
|
|
|
position: event.latLng,
|
|
|
|
|
map:map
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
marker.setPosition(event.latLng)
|
|
|
|
|
console.log("鼠标点击位置:"+event.latLng)
|
|
|
|
|
_this.position.latitude = event.latLng.getLat();
|
|
|
|
|
_this.position.longitude = event.latLng.getLng();
|
|
|
|
|
_this.existsPolygon();
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
/**绘制围栏 */
|
|
|
|
|
addpolygon() {
|
|
|
|
|
drawingManager = new qq.maps.drawing.DrawingManager({
|
|
|
|
|
drawingMode: qq.maps.drawing.OverlayType.POLYGON, // 默认选中多边形绘制
|
|
|
|
|
const _this = this
|
|
|
|
|
drawingManager = new window.qq.maps.drawing.DrawingManager({
|
|
|
|
|
drawingMode: window.qq.maps.drawing.OverlayType.null, // 默认选中绘制方式
|
|
|
|
|
drawingControl: true,
|
|
|
|
|
drawingControlOptions: {
|
|
|
|
|
position: qq.maps.ControlPosition.TOP_CENTER,
|
|
|
|
|
position: window.qq.maps.ControlPosition.TOP_CENTER,
|
|
|
|
|
// 表头显示区域
|
|
|
|
|
drawingModes: [
|
|
|
|
|
// qq.maps.drawing.OverlayType.CIRCLE,
|
|
|
|
|
qq.maps.drawing.OverlayType.POLYGON,
|
|
|
|
|
// qq.maps.drawing.OverlayType.POLYLINE,
|
|
|
|
|
// qq.maps.drawing.OverlayType.RECTANGLE
|
|
|
|
|
// window.qq.maps.drawing.OverlayType.MARKER,
|
|
|
|
|
// window.qq.maps.drawing.OverlayType.CIRCLE,
|
|
|
|
|
window.qq.maps.drawing.OverlayType.POLYGON,
|
|
|
|
|
// window.qq.maps.drawing.OverlayType.POLYLINE,
|
|
|
|
|
window.qq.maps.drawing.OverlayType.RECTANGLE
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
markerOptions: {
|
|
|
|
@ -123,75 +159,147 @@ export default {
|
|
|
|
|
// 多边形样式
|
|
|
|
|
polygonOptions: {
|
|
|
|
|
editable: true,
|
|
|
|
|
strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
|
|
|
|
|
fillColor: new qq.maps.Color(202, 67, 58, 0.1),
|
|
|
|
|
strokeColor: new window.qq.maps.Color(202, 67, 58, 0.8),
|
|
|
|
|
fillColor: new window.qq.maps.Color(202, 67, 58, 0.1),
|
|
|
|
|
clickable: false
|
|
|
|
|
},
|
|
|
|
|
// // 圆形样式
|
|
|
|
|
// circleOptions: {
|
|
|
|
|
// fillColor: new qq.maps.Color(255, 208, 70, 0.3),
|
|
|
|
|
// strokeColor: new qq.maps.Color(88, 88, 88, 1),
|
|
|
|
|
// fillColor: new window.qq.maps.Color(255, 208, 70, 0.3),
|
|
|
|
|
// strokeColor: new window.qq.maps.Color(88, 88, 88, 1),
|
|
|
|
|
// strokeWeight: 3,
|
|
|
|
|
// clickable: false
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
drawingManager.setMap(map);
|
|
|
|
|
qq.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
|
|
|
|
|
window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
|
|
|
|
|
console.log('overlaycomplete', event)
|
|
|
|
|
// clearOverlays(overlaysArray)
|
|
|
|
|
console.log('event',event); // 获得相应的经纬度值
|
|
|
|
|
lngLat = [];
|
|
|
|
|
overlaysArray.push(event.overlay);
|
|
|
|
|
for (const item of event.overlay.getPath().elems) {
|
|
|
|
|
const lng = item.getLng();
|
|
|
|
|
const lat = item.getLat();
|
|
|
|
|
|
|
|
|
|
lngLat.push({
|
|
|
|
|
lat: lat,
|
|
|
|
|
lng: lng
|
|
|
|
|
// overlaysArray.push(event.overlay);
|
|
|
|
|
// for (const item of event.overlay.getPath().elems) {
|
|
|
|
|
// const lng = item.getLng();
|
|
|
|
|
// const lat = item.getLat();
|
|
|
|
|
// lngLat.push({
|
|
|
|
|
// lat: lat,
|
|
|
|
|
// lng: lng
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
console.log("绘图后获得的:"+JSON.stringify(lngLat,null,4)); // 获得相应的经纬度值
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 获取所有围栏
|
|
|
|
|
*/
|
|
|
|
|
getAllPolygons(){
|
|
|
|
|
const _this = this;
|
|
|
|
|
// axios.get(url.url + "/v1/polygons/findAll").then(function (response) {
|
|
|
|
|
// _this.polygonPath = response.data
|
|
|
|
|
// _this.showArrayPolygon()
|
|
|
|
|
// })
|
|
|
|
|
// .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',
|
|
|
|
|
}
|
|
|
|
|
console.log('overlaycomplete',lngLat, overlaysArray); // 获得相应的经纬度值
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
qq.maps.event.addListener(drawingManager, 'markercomplete', function (event) {
|
|
|
|
|
console.log('markercomplete', event); // 获得相应的经纬度值
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
provider: 'provider2',
|
|
|
|
|
editable: true,
|
|
|
|
|
polygonsVOS: [
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.036180364592568,
|
|
|
|
|
"lng": 121.22818272560835
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.033992425381925,
|
|
|
|
|
"lng": 121.22753899544477
|
|
|
|
|
},
|
|
|
|
|
// 初始化回显
|
|
|
|
|
showpolygon(path3) {
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.03472787274239,
|
|
|
|
|
"lng": 121.22535031288862
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.03625390789439,
|
|
|
|
|
"lng": 121.22625153511763
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 31.036879023666664,
|
|
|
|
|
"lng": 121.2274531647563
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
_this.showArrayPolygon()
|
|
|
|
|
},
|
|
|
|
|
/**循环调用显示围栏方法 */
|
|
|
|
|
showArrayPolygon(){
|
|
|
|
|
const _this = this
|
|
|
|
|
for (const polygonpath of _this.polygonPath) {
|
|
|
|
|
path = []
|
|
|
|
|
for (const polygonsvos of polygonpath.polygonsVOS) {
|
|
|
|
|
path.push(new qq.maps.LatLng(polygonsvos.lat, polygonsvos.lng))
|
|
|
|
|
}
|
|
|
|
|
_this.showpolygons(path, polygonpath.editable)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 显示围栏
|
|
|
|
|
*/
|
|
|
|
|
showpolygons(path, editable) {
|
|
|
|
|
const _this = this
|
|
|
|
|
polygon = new qq.maps.Polygon({
|
|
|
|
|
map: map,
|
|
|
|
|
editable: true,
|
|
|
|
|
editable,
|
|
|
|
|
strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
|
|
|
|
|
fillColor: new qq.maps.Color(202, 67, 58, 0.1)
|
|
|
|
|
});
|
|
|
|
|
polygon.setPath(path3);
|
|
|
|
|
polygon.setPath(path);
|
|
|
|
|
},
|
|
|
|
|
// 删除初始化多边形
|
|
|
|
|
delpolygon() {
|
|
|
|
|
const a = [];
|
|
|
|
|
polygon.setPath(a);
|
|
|
|
|
},
|
|
|
|
|
// 删除绘制的多边形
|
|
|
|
|
clearOverlays() {
|
|
|
|
|
arr = []; // 清除假数据
|
|
|
|
|
path4 = [];
|
|
|
|
|
polygon.setPath(path4);
|
|
|
|
|
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 = []; // 需要重置为空,否则之前的数据还在这个数组里面
|
|
|
|
|
lngLat = [];
|
|
|
|
|
console.log(drawingManager);
|
|
|
|
|
this.init();
|
|
|
|
|
/**
|
|
|
|
|
* 当前位置是否在围栏中
|
|
|
|
|
*/
|
|
|
|
|
existsPolygon() {
|
|
|
|
|
const _this = this;
|
|
|
|
|
// console.log("当前位置:"+ _this.position.latitude,_this.position.longitude)
|
|
|
|
|
axios.post(url.url + "/v1/polygons/existPolygons", {
|
|
|
|
|
lng: _this.position.longitude, //如果改为在getMyLocation中调用该方法,该位置应该变为 obj.longitude和obj.latitude
|
|
|
|
|
lat: _this.position.latitude,
|
|
|
|
|
}).then(function (response) {
|
|
|
|
|
// response.data以http or https开头,打开支付页面
|
|
|
|
|
if(response.data.indexOf("http") == 0){
|
|
|
|
|
window.location.href = response.data;
|
|
|
|
|
} else {
|
|
|
|
|
_this.$notify({
|
|
|
|
|
title: '定位失败',
|
|
|
|
|
message: '经度: '+ _this.position.longitude + ", 纬度:" + _this.position.latitude + "," + "信息:" + response.data,
|
|
|
|
|
type: 'success'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}).catch(function (error) {
|
|
|
|
|
console.error(error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
@ -221,4 +329,24 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
#mapFencecontainer{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 87%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
.mapBtn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
}
|
|
|
|
|
.loadMap {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 40%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
color: #333;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|