ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

地图公司点位

Browse Source
pull/117/head
lukeyan 2 years ago
parent a945cde3d5
commit 5c56e879eb
7 changed files with 1489 additions and 1298 deletions
Show Stats Download Patch File Download Diff File

8
public/baiduapi.js
Unescape View File

@ -6034,13 +6034,13 @@ window.BMAP_AUTHENTIC_KEY = "iSZit9hpxlgGq28nmIyFk8lQQ21widby";
}) })
} }
}); });
var Ad = new nd(I.pa + "", new M(19, 25), { var Ad = new nd(I.pa + "marker_red_sprite.png", new M(19, 25), {
anchor: new M(10, 25), anchor: new M(10, 25),
infoWindowAnchor: new M(10, 0) infoWindowAnchor: new M(10, 0)
}) })
, Bd = new nd(I.pa + "marker_red_sprite.png", new M(20, 11), { , Bd = new nd(I.pa + "marker_red_sprite.png", new M(50, 120), {
anchor: new M(6, 11), anchor: new M(50, 120),
imageOffset: new M(-19, -13) imageOffset: new M(-10, 40)
}); });
function W(a, b) { function W(a, b) {
b = b || {}; b = b || {};

535
src/components/offLineMap/index.vue
Unescape View File

@ -1,234 +1,202 @@
<template> <template>
<div> <div>
<div class="bmap" id="container" ref="container"></div> <div class="bmap" id="container" ref="container"></div>
<el-button class="fanhui" @click="goBack" v-if="isGoBack">返回</el-button> <el-button class="fanhui" @click="goBack" v-if="isGoBack">返回</el-button>
</div> </div>
</template> </template>
<script> <script>
import MapLine from "../../../public/zhenhaiLine.json"; import MapLine from "../../../public/zhenhaiLine.json"
import MapPoint from "../../../public/zhenhaiPoint.json"; import MapPoint from "../../../public/zhenhaiPoint.json"
import styleJson from "../../../public/custom_map_config.json"; import styleJson from "../../../public/custom_map_config.json"
import { topMap, topMapOne } from "@/api/offLineMap"; import { topMap, topMapOne } from '@/api/offLineMap'
export default { export default {
name: "zhenhaimap", name: 'zhenhaimap',
data() { data() {
return { return {
dongtaiPoint: [121.604192, 29.971189], dongtaiPoint: [121.604192, 29.971189],
isGoBack: false, isGoBack: false,
villageList: [], villageList: [],
villageSumList: [], villageSumList: [],
flag: true, flag: true,
companyList: [], companyList: [],
label1: {}, label1: {}
}; }
}, },
mounted() { mounted() {
topMap({ scoreType: "season" }).then((res) => { topMap({ scoreType: 'season' }).then(res => {
this.companyList = res.data; this.companyList = res.data
this.initMap(); this.initMap()
}); })
},
methods: {
goBack() {
this.initMap();
this.isGoBack = false;
this.$emit("goBack");
}, },
initMap() { methods: {
var BMap = window.BMap; goBack() {
// console.log(BMap, 'BMap'); this.initMap()
var map = new BMap.Map("container", { this.isGoBack = false
style: { this.$emit('goBack')
styleJson,
}, },
}); initMap() {
let that = this; var BMap = window.BMap
map.centerAndZoom( // console.log(BMap, 'BMap');
new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), var map = new BMap.Map('container', {
12 style: {
); styleJson
map.setMinZoom(12); }
map.setMaxZoom(19); });
map.enableScrollWheelZoom(true); let that = this
// hjrequest({ map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 12);
// url: '/yc/dt/statistical/village', map.setMinZoom(12)
// method: 'get', map.setMaxZoom(19)
// params: { areaCode: that.areaCode } map.enableScrollWheelZoom(true);
// }).then((res) => { // hjrequest({
// that.villageSumList = res.data // url: '/yc/dt/statistical/village',
// }) // method: 'get',
// console.log(MapLine, 'MapLine'); // params: { areaCode: that.areaCode }
for (var i = 0, n = MapLine.features.length; i < n; i++) { // }).then((res) => {
showBoundaryEx(MapLine.features[i]); // that.villageSumList = res.data
} // })
var label = new BMap.Label(); // console.log(MapLine, 'MapLine');
showPoint(); for (var i = 0, n = MapLine.features.length; i < n; i++) {
// 城市区域划分，例如九龙湖镇区域，骆驼街道区域等等...区域边界为不规则多边形 showBoundaryEx(MapLine.features[i]);
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, { var label = new BMap.Label();
fillColor: "#3b4c44", showPoint()
strokeColor: "#0f1423", function showBoundaryEx(city) {
fillOpacity: 0.6, var paths = []
strokeWeight: 1, var list = city.geometry.coordinates
}); //创建多边形 // console.log(list.length, 'list[0].length')
map.addOverlay(polygon); //增加多边形 //console.log(list[1], 'list[1].length')
} var polygon = {}
// // console.log(list, 'length'); if (list.length > 1) {
} else { for (let a = 0; a < list.length; a++) {
// console.log(list[0], ' list[0]'); paths = []
for (let i = 0; i < list[0].length; i++) { for (let i = 0; i < list[a][0].length; i++) {
let lat = list[0][i][1], let lat = list[a][0][i][1],
lng = list[0][i][0]; lng = list[a][0][i][0];
paths.push(new BMap.Point(lng, lat)); paths.push(new BMap.Point(lng, lat));
} }
// console.log(list, 'length'); polygon = new BMap.Polygon(paths, {
polygon = new BMap.Polygon(paths, { fillColor: '#3b4c44',
fillColor: "#3b4c44", strokeColor: "#0f1423",
strokeColor: "#0f1423", fillOpacity: 0.6,
fillOpacity: 0.6, strokeWeight: 1
strokeWeight: 1, }); //创建多边形
}); //创建多边形 map.addOverlay(polygon); //增加多边形
map.addOverlay(polygon); //增加多边形 }
} // // console.log(list, 'length');
polygon.infowindow = new BMap.InfoWindow(); } else {
polygon.infowindow.name = city.properties.name; // console.log(list[0], ' list[0]');
polygon.addEventListener("mouseover", function () { for (let i = 0; i < list[0].length; i++) {
polygon.setFillColor("#ffa500"); let lat = list[0][i][1],
}); lng = list[0][i][0];
polygon.addEventListener("mouseout", function () { paths.push(new BMap.Point(lng, lat));
map.removeOverlay(label); }
polygon.setFillColor("#3b4c44"); // 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');
});
//开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
polygon.addEventListener("click", function () {
console.log(city.properties.name, "city.properties.name");
if (city.properties.name == "骆驼街道") {
map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
that.isGoBack = true;
} else if (city.properties.name == "招宝山街道") {
map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
that.isGoBack = true;
} else if (city.properties.name == "蛟川街道") {
map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
that.isGoBack = true;
} else if (city.properties.name == "庄市街道") {
map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
that.isGoBack = true;
} else if (city.properties.name == "贵驷街道") {
map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
that.isGoBack = true;
} else if (city.properties.name == "澥浦镇") {
map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
that.isGoBack = true;
} else if (city.properties.name == "九龙湖镇") {
map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
that.isGoBack = true;
}
// let streetCode = that.streetCodeList.filter((item) => {
// if (item.areaName == city.properties.name) {
// return item.areaCode
// }
// });
// let goStreetData = { areaCode: that.areaCode, streetCode: streetCode[0].areaCode }
// that.$emit('goStreet', streetCode[0].areaCode)
// hjrequest({
// url: '/yc/dt/statistical/villages',
// method: 'get',
// params: goStreetData
// }).then((res) => {
// that.villageList = res.data
// that.villageList.forEach((item) => {
// var point = new BMap.Point(item.longitude, item.latitude);
// var marker = new BMap.Marker(point); // 创建标注
// map.addOverlay(marker);
// var content = item.villageName;
// var label = new BMap.Label(content, { // 创建文本标注
// position: point, // 设置标注的地理位置
// offset: new BMap.Size(-10, -50) // 设置标注的偏移量
// })
// label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: 'yellow', fontSize: '20px' })
// map.addOverlay(label);
// marker.addEventListener("click", function () {
// // Cookies.set('village_current', item.villageCode)
// window.open(window.location.origin + '/#/communityShow', '_blank');
// });
// })
// })
that.companyList.forEach((item) => { //开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
var point = new BMap.Point(item.longitude, item.latitude); polygon.addEventListener("click", function () {
console.log(point, "point"); console.log(city.properties.name, 'city.properties.name');
// var myIcon = new BMap.Icon( if (city.properties.name == '骆驼街道') {
// "../../../public/images/marker_red_sprite.png", map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
// new BMap.Size(23, 25), that.isGoBack = true
// { } else if (city.properties.name == '招宝山街道') {
// anchor: new BMap.Size(10, 25), map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
// imageOffset: new BMap.Size(0, 0 - 25), // 设置图片偏移 that.isGoBack = true
// } } else if (city.properties.name == '蛟川街道') {
// ); map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
var marker = new BMap.Marker(point); // 创建标注 that.isGoBack = true
// 向地图添加覆盖物 } else if (city.properties.name == '庄市街道') {
map.addOverlay(marker); map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
var content = item.companyName; that.isGoBack = true
// 各公司点位 } else if (city.properties.name == '贵驷街道') {
var label = new BMap.Label(content, { map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
// 创建文本标注 that.isGoBack = true
position: point, // 设置标注的地理位置 } else if (city.properties.name == '澥浦镇') {
offset: new BMap.Size(-10, -50), // 设置标注的偏移量 map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
}); that.isGoBack = true
label.setStyle({ } else if (city.properties.name == '九龙湖镇') {
backgroundColor: " rgba(0, 0, 0, 0)", map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
border: "0", that.isGoBack = true
color: "#0060ce", }
fontSize: "16px", // let streetCode = that.streetCodeList.filter((item) => {
}); // if (item.areaName == city.properties.name) {
map.addOverlay(label); // return item.areaCode
marker.addEventListener("click", function () { // }
map.removeOverlay(that.label1); // });
topMapOne({ // let goStreetData = { areaCode: that.areaCode, streetCode: streetCode[0].areaCode }
companyId: item.companyId, // that.$emit('goStreet', streetCode[0].areaCode)
companyName: item.companyName, // hjrequest({
}).then((res) => { // url: '/yc/dt/statistical/villages',
that.label1 = new BMap.Label(); // method: 'get',
that.label1.setStyle({ // params: goStreetData
color: "blue", // }).then((res) => {
borderRadius: "5px", // that.villageList = res.data
borderColor: "#ccc", // that.villageList.forEach((item) => {
padding: "10px", // var point = new BMap.Point(item.longitude, item.latitude);
fontSize: "16px", // var marker = new BMap.Marker(point); // 创建标注
fontFamily: "微软雅黑", // map.addOverlay(marker);
transform: "translateX(-50%) translateY(calc(-100% - 10px))", // var content = item.villageName;
}); // var label = new BMap.Label(content, { // 创建文本标注
// position: point, // 设置标注的地理位置
// offset: new BMap.Size(-10, -50) // 设置标注的偏移量
// })
// label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: 'yellow', fontSize: '20px' })
// map.addOverlay(label);
// marker.addEventListener("click", function () {
// // Cookies.set('village_current', item.villageCode)
// window.open(window.location.origin + '/#/communityShow', '_blank');
// });
// })
// })
that.label1.setPosition( that.companyList.forEach((item) => {
new BMap.Point(item.longitude, item.latitude) var point = new BMap.Point(item.longitude, item.latitude);
); console.log(point, 'point123');
that.label1.setOffset(new BMap.Size(130, -10)); var marker = new BMap.Marker(point); // 创建标注
that.label1.setStyle({ map.addOverlay(marker);
width: "372px", var content = item.companyName;
height: "242px", var label = new BMap.Label(content, { // 创建文本标注
background: "url(pbImg/bz49.png) no-repeat", position: point, // 设置标注的地理位置
backgroundSize: "100% 100%", offset: new BMap.Size(-10, -50) // 设置标注的偏移量
border: "0", })
color: "#fff", label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: '#0060ce', fontSize: '16px' })
padding: "13px 20px", map.addOverlay(label);
}); label.addEventListener("click", function () {
that.label1.setContent(` map.removeOverlay(that.label1);
topMapOne({ companyId: item.companyId, companyName: item.companyName }).then(res => {
that.label1 = new BMap.Label();
that.label1.setStyle({
color: 'blue',
borderRadius: '5px',
borderColor: '#ccc',
padding: '10px',
fontSize: '16px',
fontFamily: '微软雅黑',
transform: 'translateX(-50%) translateY(calc(-100% - 10px))'
});
that.label1.setPosition(new BMap.Point(item.longitude, item.latitude));
that.label1.setOffset(new BMap.Size(130, -10))
that.label1.setStyle({ width: '372px', height: '242px', background: 'url(pbImg/bz49.png) no-repeat', backgroundSize: '100% 100%', border: '0', color: '#fff', padding: '13px 20px' })
that.label1.setContent(`
<div style='width:100%;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #657E83;'> <h4 style='margin:12px;font-size: 14px;color: #EBFFF4;letter-spacing: 1px;line-height: 24px;text-shadow: 0 0 9px rgba(21,255,195,0.77);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'>${res.data.companyName}</h4><div class='closeBtn' style='font-size: 14px;color: #30C4FF;letter-spacing: 1px;font-weight: 400;'>企业看板<i style='display:inline-block; background: url(pbImg/跳转.png) no-repeat;width:16px;height:14px;background-size: 100% 100%;"'></i></div><div class='closeBtn1' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;position:relative;z-index:200000000; <div style='width:100%;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #657E83;'> <h4 style='margin:12px;font-size: 14px;color: #EBFFF4;letter-spacing: 1px;line-height: 24px;text-shadow: 0 0 9px rgba(21,255,195,0.77);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'>${res.data.companyName}</h4><div class='closeBtn' style='font-size: 14px;color: #30C4FF;letter-spacing: 1px;font-weight: 400;'>企业看板<i style='display:inline-block; background: url(pbImg/跳转.png) no-repeat;width:16px;height:14px;background-size: 100% 100%;"'></i></div><div class='closeBtn1' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;position:relative;z-index:200000000;
margin-top:-15px;"'></div></div> margin-top:-15px;"'></div></div>
<div style='height:70px;width:100%;margin-top:15px;background: url(pbImg/编组.png);display:flex;justify-content: space-around;align-items: center;'> <div style='height:70px;width:100%;margin-top:15px;background: url(pbImg/编组.png);display:flex;justify-content: space-around;align-items: center;'>
@ -276,77 +244,78 @@ export default {
</div> </div>
</div> </div>
`); `);
map.addOverlay(that.label1); map.addOverlay(that.label1);
let closebtn = document.querySelector(".closeBtn"); let closebtn = document.querySelector('.closeBtn')
let closeBtn1 = document.querySelector(".closeBtn1"); let closeBtn1 = document.querySelector('.closeBtn1')
closeBtn1.addEventListener("click", () => { closeBtn1.addEventListener('click', () => {
map.removeOverlay(that.label1);
}); map.removeOverlay(that.label1);
//console.log(btn, 'btn'); })
closebtn.addEventListener("click", () => { //console.log(btn, 'btn');
that.$emit("toArchives", item); closebtn.addEventListener('click', () => {
map.removeOverlay(that.label1); that.$emit('toArchives', item)
map.removeOverlay(that.label1);
})
})
});
})
polygon.removeEventListener('mousemove')
}); });
});
});
});
polygon.removeEventListener("mousemove");
});
}
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( function showPoint() {
MapPoint.features[i].properties.name, console.log(MapPoint, 'MapPoint');
opts
); for (let i = 0; i < MapPoint.features.length; i++) {
// 自定义文本标注样式 var opts = {
label1.setStyle({ position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
color: "orange", offset: new BMap.Size(-30, -30) // 设置文本偏移量
borderRadius: "5px", };
borderColor: "#ccc",
padding: "10px", // 创建文本标注对象
fontSize: "16px", var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
height: "20px", // 自定义文本标注样式
lineHeight: "20px", label1.setStyle({
backgroundColor: "rgba(0,0,0,0)", color: 'orange',
border: "0", borderRadius: '5px',
fontFamily: "微软雅黑", borderColor: '#ccc',
}); padding: '10px',
map.addOverlay(label1); fontSize: '16px',
} height: '20px',
} lineHeight: '20px',
}, backgroundColor: 'rgba(0,0,0,0)',
}, border: '0',
}; fontFamily: '微软雅黑'
});
map.addOverlay(label1);
}
}
},
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.bmap { .bmap {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #000000; border: 1px solid #000000;
} }
.fanhui { .fanhui {
display: inline-block; display: inline-block;
width: 50px; width: 50px;
height: 20px; height: 20px;
position: absolute; position: absolute;
left: 49%; left: 49%;
bottom: 30px; bottom: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 50; z-index: 50;
} }
</style> </style>

2
src/views/applySupermarket/personBack/components/abnormalTable.vue
Unescape View File

@ -235,7 +235,7 @@ export default {
// } // }
.pagination_body { .pagination_body {
width: 44vw; width: 44vw;
height: 4vh; height: 4.5vh;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
// border: 0.1px solid #2f6363; // border: 0.1px solid #2f6363;

2
src/views/applySupermarket/personBack/components/normalTable.vue
Unescape View File

@ -139,7 +139,7 @@ export default {
} }
.pagination_body { .pagination_body {
width: 44vw; width: 44vw;
height: 4vh; height: 4.5vh;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
// border: 0.1px solid #2f6363; // border: 0.1px solid #2f6363;

458
src/views/factorResources/map.vue
Unescape View File

@ -1,215 +1,270 @@
<template> <template>
<div> <div>
<div class="bmap" id="container" ref="container"></div> <div class="bmap" id="container" ref="container"></div>
</div> </div>
</template> </template>
<script> <script>
import MapLine from "../../../public/zhenhaiLine.json" import MapLine from "../../../public/zhenhaiLine.json";
import MapPoint from "../../../public/zhenhaiPoint.json" import MapPoint from "../../../public/zhenhaiPoint.json";
import styleJson from "../../../public/custom_map_config.json" import styleJson from "../../../public/custom_map_config.json";
import { topMap } from "@/api/offLineMap";
export default { export default {
name: 'zhenhaimap', name: "zhenhaimap",
props: ['companyInfoList', 'deviceVideoInfoList'], props: ["companyInfoList", "deviceVideoInfoList"],
data() { data() {
return { return {
dongtaiPoint: [121.604192, 29.977299], dongtaiPoint: [121.604192, 29.977299],
WaringList: this.companyInfoList, WaringList: this.companyInfoList,
VideoInfoList: this.deviceVideoInfoList, VideoInfoList: this.deviceVideoInfoList,
villageList: [], villageList: [],
villageSumList: [], villageSumList: [],
flag: true, flag: true,
companyList: [], companyList: [],
} };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initMap() this.initMap();
}) });
topMap({ scoreType: "season" }).then((res) => {
this.companyList = res.data;
});
},
watch: {
companyInfoList: {
handler(newVal) {
this.WaringList = newVal;
this.initMap();
},
immediate: true,
}, },
watch: { deviceVideoInfoList: {
companyInfoList: { handler(newVal) {
handler(newVal) { this.VideoInfoList = newVal;
this.WaringList = newVal this.initMap();
this.initMap() },
}, immediate: true,
immediate: true
},
deviceVideoInfoList: {
handler(newVal) {
this.VideoInfoList = newVal
this.initMap()
},
immediate: true
}
}, },
methods: { },
goBack() { methods: {
this.initMap() goBack() {
this.initMap();
this.$emit('goBack') this.$emit("goBack");
},
initMap() {
var BMap = window.BMap;
// console.log(BMap, 'BMap');
var map = new BMap.Map("container", {
style: {
styleJson,
}, },
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');
});
// 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));
} }
function showPoint() { polygon = new BMap.Polygon(paths, {
// console.log(MapPoint, 'MapPoint'); fillColor: "#3b4c44",
for (let i = 0; i < MapPoint.features.length; i++) { strokeColor: "#0f1423",
var opts = { fillOpacity: 0.6,
position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置 strokeWeight: 1,
offset: new BMap.Size(-30, -30) // 设置文本偏移量 }); //创建多边形
}; 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");
});
// 点击多边形展示公司点位_1
polygon.addEventListener("click", function () {
if (city.properties.name == "骆驼街道") {
map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
} else if (city.properties.name == "招宝山街道") {
map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
} else if (city.properties.name == "蛟川街道") {
map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
} else if (city.properties.name == "庄市街道") {
map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
} else if (city.properties.name == "贵驷街道") {
map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
} else if (city.properties.name == "澥浦镇") {
map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
} else if (city.properties.name == "九龙湖镇") {
map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
}
// 点击多边形展示公司点位_2
that.companyList.forEach((item) => {
var point = new BMap.Point(item.longitude, item.latitude);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
var content = item.companyName;
var label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMap.Size(-10, -50), // 设置标注的偏移量
});
label.setStyle({
backgroundColor: " rgba(0, 0, 0, 0)",
border: "0",
color: "#0060ce",
fontSize: "16px",
});
map.addOverlay(label);
})
});
}
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); var label1 = new BMap.Label(
// 自定义文本标注样式 MapPoint.features[i].properties.name,
label1.setStyle({ opts
color: 'orange', );
borderRadius: '5px', // 自定义文本标注样式
borderColor: '#ccc', label1.setStyle({
padding: '10px', color: "orange",
fontSize: '16px', borderRadius: "5px",
height: '20px', borderColor: "#ccc",
lineHeight: '20px', padding: "10px",
backgroundColor: 'rgba(0,0,0,0)', fontSize: "16px",
border: '0', height: "20px",
fontFamily: '微软雅黑' lineHeight: "20px",
}); backgroundColor: "rgba(0,0,0,0)",
map.addOverlay(label1); 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,
} }
function showPic() { );
// console.log(that.WaringList, 'that.WaringList'); // console.log(marker, 'marker');
that.WaringList.forEach(item => { map.addOverlay(marker);
// 创建小车图标 marker.addEventListener("click", function () {
var myIcon = new BMap.Icon("pbImg/企业icon（悬浮）.png", new BMap.Size(80, 80)); that.$emit("showCompanyData", item);
myIcon.setImageUrl("pbImg/企业icon（悬浮）.png") });
// 创建Marker标注，使用小车图标 });
var marker = new BMap.Marker(new BMap.Point(item.longitude, item.latitude), { //that.flexPoint()
icon: myIcon console.log(that.VideoInfoList, "that.VideoInfoList");
}); that.VideoInfoList.forEach((item) => {
// console.log(marker, 'marker'); // 创建小车图标
map.addOverlay(marker); var myIcon = new BMap.Icon(
marker.addEventListener("click", function () { "pbImg/监控icon（悬浮）.png",
that.$emit('showCompanyData', item) new BMap.Size(80, 80)
}); );
}) myIcon.setImageUrl("pbImg/监控icon（悬浮）.png");
//that.flexPoint() // 创建Marker标注，使用小车图标
console.log(that.VideoInfoList, 'that.VideoInfoList'); var marker = new BMap.Marker(
that.VideoInfoList.forEach(item => { new BMap.Point(item.longitude, item.latitude),
// 创建小车图标 {
var myIcon = new BMap.Icon("pbImg/监控icon（悬浮）.png", new BMap.Size(80, 80)); icon: myIcon,
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() { // console.log(marker, 'marker');
var pointAll = document.querySelectorAll('.BMap_Marker.BMap_noprint') map.addOverlay(marker);
console.log(pointAll, 'pointAll'); marker.addEventListener("click", function () {
that.$emit("showCameraData", item);
});
} });
} }
} },
flexPoint() {
var pointAll = document.querySelectorAll(".BMap_Marker.BMap_noprint");
console.log(pointAll, "pointAll");
},
},
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.bmap { .bmap {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #000000; border: 1px solid #000000;
} }
// /deep/ .BMap_Marker { // /deep/ .BMap_Marker {
// z-index: 1000; // z-index: 1000;
// background: url('../../../public/dongtai/awrni.png') no-repeat !important; // background: url('../../../public/dongtai/awrni.png') no-repeat !important;
@ -217,16 +272,15 @@ export default {
// } // }
.fanhui { .fanhui {
display: inline-block; display: inline-block;
width: 50px; width: 50px;
height: 20px; height: 20px;
position: absolute; position: absolute;
left: 49%; left: 49%;
bottom: 30px; bottom: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 50; z-index: 50;
} }
</style> </style>

1258
src/views/realtimeWarning/index.vue
View File

File diff suppressed because it is too large Load Diff

524
src/views/realtimeWarning/map.vue
Unescape View File

@ -1,179 +1,184 @@
<template> <template>
<div> <div>
<div class="bmap" id="container" ref="container"></div> <div class="bmap" id="container" ref="container"></div>
</div>
</div>
</template> </template>
<script> <script>
import MapLine from "../../../public/zhenhaiLine.json" import MapLine from "../../../public/zhenhaiLine.json";
import MapPoint from "../../../public/zhenhaiPoint.json" import MapPoint from "../../../public/zhenhaiPoint.json";
import styleJson from "../../../public/custom_map_config.json" import styleJson from "../../../public/custom_map_config.json";
import { topMap } from "@/api/offLineMap";
export default { export default {
name: 'zhenhaimap', name: "zhenhaimap",
props: ['waringList'], props: ["waringList"],
data() { data() {
return { return {
dongtaiPoint: [121.604192, 29.977299], dongtaiPoint: [121.604192, 29.977299],
WaringList: this.waringList, WaringList: this.waringList,
villageList: [], villageList: [],
villageSumList: [], villageSumList: [],
flag: true, flag: true,
companyList: [], companyList: [],
} };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initMap() this.initMap();
}) });
topMap({ scoreType: "season" }).then((res) => {
this.companyList = res.data;
});
},
methods: {
goBack() {
this.initMap();
this.$emit("goBack");
}, },
methods: { initMap() {
goBack() { var BMap = window.BMap;
this.initMap() // console.log(BMap, 'BMap');
var map = new BMap.Map("container", {
this.$emit('goBack') style: {
styleJson,
}, },
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(this.WaringList, 'waringList');
//console.log(list[1], 'list[1].length') let that = this;
var polygon = {} map.centerAndZoom(
if (list.length > 1) { new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
for (let a = 0; a < list.length; a++) { 13
paths = [] );
for (let i = 0; i < list[a][0].length; i++) { map.setMinZoom(12);
let lat = list[a][0][i][1], map.setMaxZoom(19);
lng = list[a][0][i][0]; map.enableScrollWheelZoom(true);
paths.push(new BMap.Point(lng, lat)); // hjrequest({
} // url: '/yc/dt/statistical/village',
polygon = new BMap.Polygon(paths, { // method: 'get',
fillColor: '#3b4c44', // params: { areaCode: that.areaCode }
strokeColor: "#0f1423", // }).then((res) => {
fillOpacity: 0.6, // that.villageSumList = res.data
strokeWeight: 1 // })
}); //创建多边形 // console.log(MapLine, 'MapLine');
map.addOverlay(polygon); //增加多边形 for (var i = 0, n = MapLine.features.length; i < n; i++) {
} showBoundaryEx(MapLine.features[i]);
// // console.log(list, 'length'); }
} else { var label = new BMap.Label();
// console.log(list[0], ' list[0]'); showPoint();
for (let i = 0; i < list[0].length; i++) { showPic();
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++) { function showBoundaryEx(city) {
var opts = { var paths = [];
position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置 var list = city.geometry.coordinates;
offset: new BMap.Size(-30, -30) // 设置文本偏移量
};
// 创建文本标注对象 // console.log(list.length, 'list[0].length')
var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts); //console.log(list[1], 'list[1].length')
// 自定义文本标注样式 var polygon = {};
label1.setStyle({ if (list.length > 1) {
color: 'orange', for (let a = 0; a < list.length; a++) {
borderRadius: '5px', paths = [];
borderColor: '#ccc', for (let i = 0; i < list[a][0].length; i++) {
padding: '10px', let lat = list[a][0][i][1],
fontSize: '16px', lng = list[a][0][i][0];
height: '20px', paths.push(new BMap.Point(lng, lat));
lineHeight: '20px',
backgroundColor: 'rgba(0,0,0,0)',
border: '0',
fontFamily: '微软雅黑'
});
map.addOverlay(label1);
}
} }
function showPic() { polygon = new BMap.Polygon(paths, {
// console.log(that.WaringList, 'that.WaringList'); fillColor: "#3b4c44",
strokeColor: "#0f1423",
that.WaringList.forEach(item => { fillOpacity: 0.6,
// 创建小车图标 strokeWeight: 1,
var myIcon = new BMap.Icon("public/dongtai/awrni.png", new BMap.Size(80, 80)); }); //创建多边形
myIcon.setImageUrl("/dongtai/awrni.png") map.addOverlay(polygon); //增加多边形
// 创建Marker标注，使用小车图标 }
var marker = new BMap.Marker(new BMap.Point(item.longitude, item.latitude), { // // console.log(list, 'length');
icon: myIcon } else {
}); // console.log(list[0], ' list[0]');
// console.log(marker, 'marker'); for (let i = 0; i < list[0].length; i++) {
map.addOverlay(marker); let lat = list[0][i][1],
marker.addEventListener("click", function () { lng = list[0][i][0];
paths.push(new BMap.Point(lng, lat));
var label = new BMap.Label(); }
label.setStyle({ // console.log(list, 'length');
color: 'blue', polygon = new BMap.Polygon(paths, {
borderRadius: '5px', fillColor: "#3b4c44",
borderColor: '#ccc', strokeColor: "#0f1423",
padding: '10px', fillOpacity: 0.6,
fontSize: '16px', strokeWeight: 1,
fontFamily: '微软雅黑', }); //创建多边形
transform: 'translateX(-50%) translateY(calc(-100% - 10px))' map.addOverlay(polygon); //增加多边形
}); }
polygon.infowindow = new BMap.InfoWindow();
label.setPosition(new BMap.Point(item.longitude, item.latitude)); polygon.infowindow.name = city.properties.name;
label.setOffset(new BMap.Size(130, -10)) polygon.addEventListener("mouseover", function () {
label.setStyle({ width: '340px', height: '238px', background: 'url(pbImg/气泡弹窗1.png) no-repeat', backgroundSize: '100% 100%', border: '0', color: '#fff', zIndex: 2000000000, }) polygon.setFillColor("#ffa500");
label.setContent(` });
polygon.addEventListener("mouseout", function () {
map.removeOverlay(label);
polygon.setFillColor("#3b4c44");
});
// 点击多边形展示公司点位_1
polygon.addEventListener("click", function () {
if (city.properties.name == "骆驼街道") {
map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
} else if (city.properties.name == "招宝山街道") {
map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
} else if (city.properties.name == "蛟川街道") {
map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
} else if (city.properties.name == "庄市街道") {
map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
} else if (city.properties.name == "贵驷街道") {
map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
} else if (city.properties.name == "澥浦镇") {
map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
} else if (city.properties.name == "九龙湖镇") {
map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
}
// 点击多边形展示公司点位_2
that.companyList.forEach((item) => {
var point = new BMap.Point(item.longitude, item.latitude);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
var content = item.companyName;
var label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMap.Size(-10, -50), // 设置标注的偏移量
});
label.setStyle({
backgroundColor: " rgba(0, 0, 0, 0)",
border: "0",
color: "#0060ce",
fontSize: "16px",
});
map.addOverlay(label);
label.addEventListener("click", function () {
var label_ponit = new BMap.Label(); // 公司点位
label_ponit.setStyle({
color: "blue",
borderRadius: "5px",
borderColor: "#ccc",
padding: "10px",
fontSize: "16px",
fontFamily: "微软雅黑",
transform: "translateX(-50%) translateY(calc(-100% - 10px))",
});
// 点位点击转处置弹窗
label_ponit.setPosition(
new BMap.Point(item.longitude, item.latitude)
);
label_ponit.setOffset(new BMap.Size(130, -10));
label_ponit.setStyle({
width: "340px",
height: "238px",
background: "url(pbImg/气泡弹窗1.png) no-repeat",
backgroundSize: "100% 100%",
border: "0",
color: "#fff",
zIndex: 2000000000,
});
label_ponit.setContent(`
<div style='width:100%;display:flex;justify-content: space-between;align-items: center;'> <h4 style='margin:12px;font-size: 14px;color: #FFE6D9;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; '>${item.companyName}</h4><div class='closeBtn' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px;"'></div></div> <div style='width:100%;display:flex;justify-content: space-between;align-items: center;'> <h4 style='margin:12px;font-size: 14px;color: #FFE6D9;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; '>${item.companyName}</h4><div class='closeBtn' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px;"'></div></div>
<div style='margin:0 auto;font-size: 14px;width:316px;height:108px;padding:0 12px;background: rgba(108,128,151,0.20);border: 1px solid rgba(73,84,97,1);'> <div style='margin:0 auto;font-size: 14px;width:316px;height:108px;padding:0 12px;background: rgba(108,128,151,0.20);border: 1px solid rgba(73,84,97,1);'>
<h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">一级指标：</span>${item.levelIndexOne}</h4> <h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">一级指标：</span>${item.levelIndexOne}</h4>
@ -191,62 +196,165 @@ margin-left:80px;
font-weight: 400;'>转处置</div> font-weight: 400;'>转处置</div>
</div> </div>
`); `);
map.addOverlay(label); map.addOverlay(label_ponit);
let btn = document.querySelector('.zhuanchuzhiBtn') let btn = document.querySelector(".zhuanchuzhiBtn");
//console.log(btn, 'btn'); //console.log(btn, 'btn');
btn.addEventListener('click', () => { btn.addEventListener("click", () => {
//console.log(item, 'item'); //console.log(item, 'item');
that.$emit('zhuanchuzhi', item) that.$emit("zhuanchuzhi", item);
}) });
let closebtn = document.querySelector('.closeBtn') let closebtn = document.querySelector(".closeBtn");
//console.log(btn, 'btn'); //console.log(btn, 'btn');
closebtn.addEventListener('click', () => { closebtn.addEventListener("click", () => {
map.removeOverlay(label); map.removeOverlay(label_ponit);
}) });
// label.addEventListener('mouseout', function () { });
// map.removeOverlay(label); });
// }) });
}); }
}) function showPoint() {
//that.flexPoint() // console.log(MapPoint, 'MapPoint');
}
},
flexPoint() {
var pointAll = document.querySelectorAll('.BMap_Marker.BMap_noprint')
console.log(pointAll, 'pointAll');
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(
"public/dongtai/awrni.png",
new BMap.Size(80, 80)
);
myIcon.setImageUrl("/dongtai/awrni.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 () {
var label = new BMap.Label();
label.setStyle({
color: "blue",
borderRadius: "5px",
borderColor: "#ccc",
padding: "10px",
fontSize: "16px",
fontFamily: "微软雅黑",
transform: "translateX(-50%) translateY(calc(-100% - 10px))",
});
// 点位点击弹窗
label.setPosition(new BMap.Point(item.longitude, item.latitude));
label.setOffset(new BMap.Size(130, -10));
label.setStyle({
width: "340px",
height: "238px",
background: "url(pbImg/气泡弹窗1.png) no-repeat",
backgroundSize: "100% 100%",
border: "0",
color: "#fff",
zIndex: 2000000000,
});
label.setContent(`
<div style='width:100%;display:flex;justify-content: space-between;align-items: center;'> <h4 style='margin:12px;font-size: 14px;color: #FFE6D9;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; '>${item.companyName}</h4><div class='closeBtn' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px;"'></div></div>
<div style='margin:0 auto;font-size: 14px;width:316px;height:108px;padding:0 12px;background: rgba(108,128,151,0.20);border: 1px solid rgba(73,84,97,1);'>
<h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">一级指标：</span>${item.levelIndexOne}</h4>
<h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">预警指标：</span>"${item.levelIndexThree}"异常</h4>
<h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">预警时间：</span>${item.alarmTime}</h4>
<div class='zhuanchuzhiBtn' style='width:80px;height:34px;font-size: 14px;
color: #FFFFFF;
text-align:center;
line-height:34px;
background: url(pbImg/2121.png) no-repeat;
margin-top:20px;
background-size: 100% 100%;
letter-spacing: 0;
margin-left:80px;
font-weight: 400;'>转处置</div>
</div>
`);
map.addOverlay(label);
let btn = document.querySelector(".zhuanchuzhiBtn");
//console.log(btn, 'btn');
btn.addEventListener("click", () => {
//console.log(item, 'item');
that.$emit("zhuanchuzhi", item);
});
let closebtn = document.querySelector(".closeBtn");
//console.log(btn, 'btn');
closebtn.addEventListener("click", () => {
map.removeOverlay(label);
});
// label.addEventListener('mouseout', function () {
// map.removeOverlay(label);
// })
});
});
//that.flexPoint()
}
},
flexPoint() {
var pointAll = document.querySelectorAll(".BMap_Marker.BMap_noprint");
console.log(pointAll, "pointAll");
},
},
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.bmap { .bmap {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #000000; border: 1px solid #000000;
} }
/deep/ .BMap_Marker { /deep/ .BMap_Marker {
z-index: 1000; z-index: 1000;
background: url('../../../public/dongtai/awrni.png') no-repeat !important; background: url("../../../public/dongtai/awrni.png") no-repeat !important;
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
.fanhui { .fanhui {
display: inline-block; display: inline-block;
width: 50px; width: 50px;
height: 20px; height: 20px;
position: absolute; position: absolute;
left: 49%; left: 49%;
bottom: 30px; bottom: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 50; z-index: 50;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save