|
|
|
@ -0,0 +1,232 @@
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<div class="bmap" id="container" ref="container"></div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import MapLine from "../../../public/zhenhaiLine.json"
|
|
|
|
|
|
|
|
import MapPoint from "../../../public/zhenhaiPoint.json"
|
|
|
|
|
|
|
|
import styleJson from "../../../public/custom_map_config.json"
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
|
|
name: 'zhenhaimap',
|
|
|
|
|
|
|
|
props: ['companyInfoList', 'deviceVideoInfoList'],
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
dongtaiPoint: [121.604192, 29.977299],
|
|
|
|
|
|
|
|
WaringList: this.companyInfoList,
|
|
|
|
|
|
|
|
VideoInfoList: this.deviceVideoInfoList,
|
|
|
|
|
|
|
|
villageList: [],
|
|
|
|
|
|
|
|
villageSumList: [],
|
|
|
|
|
|
|
|
flag: true,
|
|
|
|
|
|
|
|
companyList: [],
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
this.initMap()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
|
|
companyInfoList: {
|
|
|
|
|
|
|
|
handler(newVal) {
|
|
|
|
|
|
|
|
this.WaringList = newVal
|
|
|
|
|
|
|
|
this.initMap()
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
immediate: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
deviceVideoInfoList: {
|
|
|
|
|
|
|
|
handler(newVal) {
|
|
|
|
|
|
|
|
this.VideoInfoList = newVal
|
|
|
|
|
|
|
|
this.initMap()
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
immediate: true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
goBack() {
|
|
|
|
|
|
|
|
this.initMap()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.$emit('goBack')
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
initMap() {
|
|
|
|
|
|
|
|
var BMap = window.BMap
|
|
|
|
|
|
|
|
// console.log(BMap, 'BMap');
|
|
|
|
|
|
|
|
var map = new BMap.Map('container', {
|
|
|
|
|
|
|
|
style: {
|
|
|
|
|
|
|
|
styleJson
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(this.WaringList, 'waringList');
|
|
|
|
|
|
|
|
let that = this
|
|
|
|
|
|
|
|
map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 13);
|
|
|
|
|
|
|
|
map.setMinZoom(12)
|
|
|
|
|
|
|
|
map.setMaxZoom(19)
|
|
|
|
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
|
|
|
|
// hjrequest({
|
|
|
|
|
|
|
|
// url: '/yc/dt/statistical/village',
|
|
|
|
|
|
|
|
// method: 'get',
|
|
|
|
|
|
|
|
// params: { areaCode: that.areaCode }
|
|
|
|
|
|
|
|
// }).then((res) => {
|
|
|
|
|
|
|
|
// that.villageSumList = res.data
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
// console.log(MapLine, 'MapLine');
|
|
|
|
|
|
|
|
for (var i = 0, n = MapLine.features.length; i < n; i++) {
|
|
|
|
|
|
|
|
showBoundaryEx(MapLine.features[i]);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
var label = new BMap.Label();
|
|
|
|
|
|
|
|
showPoint()
|
|
|
|
|
|
|
|
showPic()
|
|
|
|
|
|
|
|
function showBoundaryEx(city) {
|
|
|
|
|
|
|
|
var paths = []
|
|
|
|
|
|
|
|
var list = city.geometry.coordinates
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(list.length, 'list[0].length')
|
|
|
|
|
|
|
|
//console.log(list[1], 'list[1].length')
|
|
|
|
|
|
|
|
var polygon = {}
|
|
|
|
|
|
|
|
if (list.length > 1) {
|
|
|
|
|
|
|
|
for (let a = 0; a < list.length; a++) {
|
|
|
|
|
|
|
|
paths = []
|
|
|
|
|
|
|
|
for (let i = 0; i < list[a][0].length; i++) {
|
|
|
|
|
|
|
|
let lat = list[a][0][i][1],
|
|
|
|
|
|
|
|
lng = list[a][0][i][0];
|
|
|
|
|
|
|
|
paths.push(new BMap.Point(lng, lat));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
polygon = new BMap.Polygon(paths, {
|
|
|
|
|
|
|
|
fillColor: '#3b4c44',
|
|
|
|
|
|
|
|
strokeColor: "#0f1423",
|
|
|
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
|
|
|
strokeWeight: 1
|
|
|
|
|
|
|
|
}); //创建多边形
|
|
|
|
|
|
|
|
map.addOverlay(polygon); //增加多边形
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// // console.log(list, 'length');
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// console.log(list[0], ' list[0]');
|
|
|
|
|
|
|
|
for (let i = 0; i < list[0].length; i++) {
|
|
|
|
|
|
|
|
let lat = list[0][i][1],
|
|
|
|
|
|
|
|
lng = list[0][i][0];
|
|
|
|
|
|
|
|
paths.push(new BMap.Point(lng, lat));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// console.log(list, 'length');
|
|
|
|
|
|
|
|
polygon = new BMap.Polygon(paths, {
|
|
|
|
|
|
|
|
fillColor: '#3b4c44',
|
|
|
|
|
|
|
|
strokeColor: "#0f1423",
|
|
|
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
|
|
|
strokeWeight: 1
|
|
|
|
|
|
|
|
}); //创建多边形
|
|
|
|
|
|
|
|
map.addOverlay(polygon); //增加多边形
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
polygon.infowindow = new BMap.InfoWindow();
|
|
|
|
|
|
|
|
polygon.infowindow.name = city.properties.name;
|
|
|
|
|
|
|
|
polygon.addEventListener("mouseover", function () {
|
|
|
|
|
|
|
|
polygon.setFillColor("#ffa500");
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
polygon.addEventListener("mouseout", function () {
|
|
|
|
|
|
|
|
map.removeOverlay(label);
|
|
|
|
|
|
|
|
polygon.setFillColor('#3b4c44');
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function showPoint() {
|
|
|
|
|
|
|
|
// console.log(MapPoint, 'MapPoint');
|
|
|
|
|
|
|
|
for (let i = 0; i < MapPoint.features.length; i++) {
|
|
|
|
|
|
|
|
var opts = {
|
|
|
|
|
|
|
|
position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
|
|
|
|
|
|
|
|
offset: new BMap.Size(-30, -30) // 设置文本偏移量
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 创建文本标注对象
|
|
|
|
|
|
|
|
var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
|
|
|
|
|
|
|
|
// 自定义文本标注样式
|
|
|
|
|
|
|
|
label1.setStyle({
|
|
|
|
|
|
|
|
color: 'orange',
|
|
|
|
|
|
|
|
borderRadius: '5px',
|
|
|
|
|
|
|
|
borderColor: '#ccc',
|
|
|
|
|
|
|
|
padding: '10px',
|
|
|
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
|
|
|
height: '20px',
|
|
|
|
|
|
|
|
lineHeight: '20px',
|
|
|
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
|
|
|
|
|
|
border: '0',
|
|
|
|
|
|
|
|
fontFamily: '微软雅黑'
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
map.addOverlay(label1);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function showPic() {
|
|
|
|
|
|
|
|
// console.log(that.WaringList, 'that.WaringList');
|
|
|
|
|
|
|
|
that.WaringList.forEach(item => {
|
|
|
|
|
|
|
|
// 创建小车图标
|
|
|
|
|
|
|
|
var myIcon = new BMap.Icon("pbImg/企业icon（悬浮）.png", new BMap.Size(80, 80));
|
|
|
|
|
|
|
|
myIcon.setImageUrl("pbImg/企业icon（悬浮）.png")
|
|
|
|
|
|
|
|
// 创建Marker标注，使用小车图标
|
|
|
|
|
|
|
|
var marker = new BMap.Marker(new BMap.Point(item.longitude, item.latitude), {
|
|
|
|
|
|
|
|
icon: myIcon
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// console.log(marker, 'marker');
|
|
|
|
|
|
|
|
map.addOverlay(marker);
|
|
|
|
|
|
|
|
marker.addEventListener("click", function () {
|
|
|
|
|
|
|
|
that.$emit('showCompanyData', item)
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
//that.flexPoint()
|
|
|
|
|
|
|
|
console.log(that.VideoInfoList, 'that.VideoInfoList');
|
|
|
|
|
|
|
|
that.VideoInfoList.forEach(item => {
|
|
|
|
|
|
|
|
// 创建小车图标
|
|
|
|
|
|
|
|
var myIcon = new BMap.Icon("pbImg/监控icon（悬浮）.png", new BMap.Size(80, 80));
|
|
|
|
|
|
|
|
myIcon.setImageUrl("pbImg/监控icon（悬浮）.png")
|
|
|
|
|
|
|
|
// 创建Marker标注，使用小车图标
|
|
|
|
|
|
|
|
var marker = new BMap.Marker(new BMap.Point(item.longitude, item.latitude), {
|
|
|
|
|
|
|
|
icon: myIcon
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// console.log(marker, 'marker');
|
|
|
|
|
|
|
|
map.addOverlay(marker);
|
|
|
|
|
|
|
|
marker.addEventListener("click", function () {
|
|
|
|
|
|
|
|
that.$emit('showCameraData', item)
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
flexPoint() {
|
|
|
|
|
|
|
|
var pointAll = document.querySelectorAll('.BMap_Marker.BMap_noprint')
|
|
|
|
|
|
|
|
console.log(pointAll, 'pointAll');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
|
|
.bmap {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
border: 1px solid #000000;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// /deep/ .BMap_Marker {
|
|
|
|
|
|
|
|
// z-index: 1000;
|
|
|
|
|
|
|
|
// background: url('../../../public/dongtai/awrni.png') no-repeat !important;
|
|
|
|
|
|
|
|
// background-size: 100% 100% !important;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.fanhui {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 49%;
|
|
|
|
|
|
|
|
bottom: 30px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
z-index: 50;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
lukeyan
2 years ago
