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

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

@ -6,152 +6,151 @@
<p>1、绘制：鼠标左键点击及移动即可绘制图形; &nbsp;&nbsp; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束;&nbsp;&nbsp;
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 = [
{
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 {
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() + ']');
});
// 多边形绘制及回显
// 设置多边形路径以便回显
},
sendMsg() {
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))
},
/**
* //定位获得当前位置信息
*/
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.POLYGON,
// 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: {
@ -160,65 +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 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)); // 获得相应的经纬度值
});
console.log(JSON.stringify(lngLat, null, 2))
},
/**
* 获取所有围栏
*/
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); // 获得相应的经纬度值
});
]
},
{
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()
},
// 初始化回显
showpolygon(path3, editable) {
/**循环调用显示围栏方法 */
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,
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);
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>
@ -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>

Write Preview
Loading…
Cancel
Save