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; <p>1、绘制：鼠标左键点击及移动即可绘制图形; &nbsp;&nbsp; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束;&nbsp;&nbsp;
3、中断：绘制过程中按下esc键可中断该过程</p> 3、中断：绘制过程中按下esc键可中断该过程</p>
</div> </div>
<div id="mapFencecontainer" class="mapBox"> <div class="addpolygon">
<div id="mapFencecontainer">
<div class="mapBtn"> <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="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>
<div class="loadMap" v-if="loadMapFlag">稍等，拼命加载地图中...</div>
</div>
<!-- <p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p> --> <!-- <p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p> -->
</div> </div>
</el-dialog> </el-dialog>
</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; sendMsg() {
}
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() + ']');
});
// 多边形绘制及回显
// 设置多边形路径以便回显
arr.forEach(item => { },
// 商户 /**
item.mapInfo.forEach(e => { * //定位获得当前位置信息
// 多个区域 */
path4 = []; getMyLocation() {
e.areaDot.forEach(q => { var geolocation = new qq.maps.Geolocation('U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6', '易回收后台');
path4.push(new qq.maps.LatLng(q.lat, q.lng)); geolocation.getLocation(this.showPosition, this.showErr);
}) },
this.showpolygon(path4, item.editable); showPosition(position) {
console.log(JSON.stringify(path4, null, 2)) 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.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({
drawingMode: window.qq.maps.drawing.OverlayType.null, // 默认选中绘制方式
drawingControl: true, drawingControl: true,
drawingControlOptions: { drawingControlOptions: {
position: qq.maps.ControlPosition.TOP_CENTER, position: window.qq.maps.ControlPosition.TOP_CENTER,
// 表头显示区域 // 表头显示区域
drawingModes: [ 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: { markerOptions: {
@ -160,65 +159,147 @@ export default {
// 多边形样式 // 多边形样式
polygonOptions: { polygonOptions: {
editable: true, editable: true,
strokeColor: new qq.maps.Color(202, 67, 58, 0.8), strokeColor: new window.qq.maps.Color(202, 67, 58, 0.8),
fillColor: new qq.maps.Color(202, 67, 58, 0.1), fillColor: new window.qq.maps.Color(202, 67, 58, 0.1),
clickable: false 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) {
console.log('overlaycomplete', event)
// clearOverlays(overlaysArray) // clearOverlays(overlaysArray)
console.log('event',event); // 获得相应的经纬度值
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,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({ polygon = new qq.maps.Polygon({
map: map, map: map,
editable, editable,
clickable: true,
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)
}); });
polygon.setPath(path3); polygon.setPath(path);
}, },
// 删除初始化多边形 /**
delpolygon() { * 当前位置是否在围栏中
const a = []; */
polygon.setPath(a); existsPolygon() {
}, const _this = this;
// 删除绘制的多边形 // console.log("当前位置:"+ _this.position.latitude,_this.position.longitude)
clearOverlays() { axios.post(url.url + "/v1/polygons/existPolygons", {
arr = []; // 清除假数据 lng: _this.position.longitude, //如果改为在getMyLocation中调用该方法，该位置应该变为 obj.longitude和obj.latitude
path4 = []; lat: _this.position.latitude,
polygon.setPath(path4); }).then(function (response) {
if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0 // response.data以http or https开头，打开支付页面
// for (i in overlaysArray) { if(response.data.indexOf("http") == 0){
for (var i = 0; i < overlaysArray.length; i++) { window.location.href = response.data;
overlaysArray[i].setMap(null); } else {
} _this.$notify({
} title: '定位失败',
overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面 message: '经度: '+ _this.position.longitude + ", 纬度:" + _this.position.latitude + "，" + "信息:" + response.data,
lngLat = []; type: 'success'
console.log(drawingManager); })
// this.init();
} }
}).catch(function (error) {
console.error(error);
});
},
} }
}; };
</script> </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> </style>

Write Preview
Loading…
Cancel
Save