yunxi
/
ningxiaWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

map

Browse Source
master
jevononlie 5 months ago
parent 607edef07f
commit 6c786ec3cb
1 changed files with 275 additions and 174 deletions
Show Stats Download Patch File Download Diff File

449
jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue
Unescape View File

@ -6,13 +6,15 @@
<p>1、绘制：鼠标左键点击及移动即可绘制图形; &nbsp;&nbsp; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束;&nbsp;&nbsp; <p>1、绘制：鼠标左键点击及移动即可绘制图形; &nbsp;&nbsp; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束;&nbsp;&nbsp;
3、中断：绘制过程中按下esc键可中断该过程</p> 3、中断：绘制过程中按下esc键可中断该过程</p>
</div> </div>
<div id="mapFencecontainer" class="mapBox"> <div class="addpolygon">
<div class="mapBtn"> <div id="mapFencecontainer">
<el-button size="small" type="danger" @click="delpolygon()">删除多边形</el-button> <div class="mapBtn">
<el-button size="small" type="danger" @click="clearOverlays()">清除</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="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>
<div class="loadMap" v-if="loadMapFlag">稍等，拼命加载地图中...</div>
</div> </div>
<!-- <p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p> --> <!-- <p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p> -->
</div> </div>
@ -20,206 +22,285 @@
</template> </template>
<script> <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 overlaysArray = []; // 标注点集合,绘制多边形时的集合
let path4 = [];// 设置回显数据参数 let path4 = [];// 设置回显数据参数
// 默认展示假数据回显参数 // 默认展示假数据回显参数
let arr = [
{
name: '商户1',
editable: true,
mapInfo: [
{
mapName: '区域1',
areaDot: [
{
"lat": 34.81183810359681,
"lng": 113.64705095998943
},
{
"lat": 34.81134040998215,
"lng": 113.64699731580913
},
{
"lat": 34.81148135007192,
"lng": 113.64640722982585
},
{
"lat": 34.811912977597295,
"lng": 113.646434051916
}
]
},
]
},
{
name: '商户2',
editable: false,
mapInfo: [
{
mapName: '区域1',
areaDot: [
{
"lat": 34.811776442604156,
"lng": 113.64557038061321
},
{
"lat": 34.81182048617505,
"lng": 113.64621411077678
},
{
"lat": 34.81198344718268,
"lng": 113.64581714384258
}
]
}
]
}
]; // 用于数据回显的假数据 后期会调用接口返回数据
export default { export default {
props: ['position', 'areaMapInfo'], props: ['position', 'areaMapInfo'],
data() { data() {
return { return {
longitude: '', longitude: '',
latitude: '', latitude: '',
lngLatData: [] // 绘制多边形坐标点 lngLatData: [], // 绘制多边形坐标点
polygonPath: [
{
provider: '',
polygonsVOS: [
{
lat: '',
lng: '',
}
]
}
],
editor: null,
loadMapFlag: true
}; };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.init(); // this.init();
this.getMyLocation();
}) })
}, },
methods: { methods: {
handleClose() { handleClose() {
this.$emit('areaVisibleChange', false); this.$emit('areaVisibleChange', false)
}, },
// 子组件给父组件传值(返回按钮) clearOverlays() {
sendMsg() { polyline.setMap(null);
// func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
this.$emit('areaVisibleChange', false);
}, },
// 子组件给父组件传值(确认按钮)
sendLngLat() { sendLngLat() {
if (lngLat == undefined) {
lngLat = path4;
}
console.log('确认', lngLat)
this.$emit('areaVisibleChange', false, lngLat);
}, },
// 地图初始化 sendMsg() {
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() + ']');
});
// 多边形绘制及回显
// 设置多边形路径以便回显
arr.forEach(item => {
// 商户
item.mapInfo.forEach(e => {
// 多个区域
path4 = [];
e.areaDot.forEach(q => {
path4.push(new qq.maps.LatLng(q.lat, q.lng));
})
this.showpolygon(path4, item.editable);
console.log(JSON.stringify(path4, null, 2))
})
});
// 绘制,操作
this.addpolygon();
}, },
/** /**
* 多边形绘制 * //定位获得当前位置信息
*/ */
// 绘制 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() { addpolygon() {
drawingManager = new qq.maps.drawing.DrawingManager({ const _this = this
drawingMode: qq.maps.drawing.OverlayType.POLYGON, // 默认选中多边形绘制 drawingManager = new window.qq.maps.drawing.DrawingManager({
drawingControl: true, drawingMode: window.qq.maps.drawing.OverlayType.null, // 默认选中绘制方式
drawingControlOptions: { drawingControl: true,
position: qq.maps.ControlPosition.TOP_CENTER, drawingControlOptions: {
// 表头显示区域 position: window.qq.maps.ControlPosition.TOP_CENTER,
drawingModes: [ // 表头显示区域
qq.maps.drawing.OverlayType.POLYGON, drawingModes: [
] // window.qq.maps.drawing.OverlayType.MARKER,
}, // window.qq.maps.drawing.OverlayType.CIRCLE,
markerOptions: { window.qq.maps.drawing.OverlayType.POLYGON,
visible: false // window.qq.maps.drawing.OverlayType.POLYLINE,
}, window.qq.maps.drawing.OverlayType.RECTANGLE
// 多边形样式 ]
polygonOptions: { },
editable: true, markerOptions: {
strokeColor: new qq.maps.Color(202, 67, 58, 0.8), visible: false
fillColor: new qq.maps.Color(202, 67, 58, 0.1), },
clickable: false // 多边形样式
}, polygonOptions: {
editable: true,
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 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); drawingManager.setMap(map);
qq.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) { window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
// clearOverlays(overlaysArray) console.log('overlaycomplete', event)
console.log('event',event); // 获得相应的经纬度值 // clearOverlays(overlaysArray)
lngLat = []; lngLat = [];
overlaysArray.push(event.overlay); // overlaysArray.push(event.overlay);
for (const item of event.overlay.getPath().elems) { // for (const item of event.overlay.getPath().elems) {
const lng = item.getLng(); // const lng = item.getLng();
const lat = item.getLat(); // const lat = item.getLat();
// lngLat.push({
lngLat.push({ // lat: lat,
lat: lat, // lng: lng
lng: lng // });
}); // }
console.log(JSON.stringify(lngLat, null, 2)) console.log("绘图后获得的："+JSON.stringify(lngLat,null,4)); // 获得相应的经纬度值
}
console.log('overlaycomplete',lngLat, overlaysArray); // 获得相应的经纬度值
});
},
// 初始化回显
showpolygon(path3, editable) {
polygon = new qq.maps.Polygon({
map: map,
editable,
clickable: true,
strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
fillColor: new qq.maps.Color(202, 67, 58, 0.1)
}); });
polygon.setPath(path3);
}, },
// 删除初始化多边形 /**
delpolygon() { * 获取所有围栏
const a = []; */
polygon.setPath(a); 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',
}
]
},
{
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
}
]
}
]
_this.showArrayPolygon()
}, },
// 删除绘制的多边形 /**循环调用显示围栏方法 */
clearOverlays() { showArrayPolygon(){
arr = []; // 清除假数据 const _this = this
path4 = []; for (const polygonpath of _this.polygonPath) {
polygon.setPath(path4); path = []
if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0 for (const polygonsvos of polygonpath.polygonsVOS) {
// for (i in overlaysArray) { path.push(new qq.maps.LatLng(polygonsvos.lat, polygonsvos.lng))
for (var i = 0; i < overlaysArray.length; i++) { }
overlaysArray[i].setMap(null); _this.showpolygons(path, polygonpath.editable)
} }
} },
overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面 /**
lngLat = []; * 显示围栏
console.log(drawingManager); */
// this.init(); showpolygons(path, editable) {
} const _this = this
polygon = new qq.maps.Polygon({
} map: map,
editable,
strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
fillColor: new qq.maps.Color(202, 67, 58, 0.1)
});
polygon.setPath(path);
},
/**
* 当前位置是否在围栏中
*/
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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -248,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> </style>

Write Preview
Loading…
Cancel
Save