|
|
|
|
@ -5,6 +5,7 @@
|
|
|
|
|
import styleJson from "../../../../public/custom_map_config.json";
|
|
|
|
|
import MapLine from "../../../../public/zhenhaiLine.json";
|
|
|
|
|
import MapPoint from "../../../../public/zhenhaiPoint.json";
|
|
|
|
|
import bus from "@/assets/js/eventBus.js";
|
|
|
|
|
export default {
|
|
|
|
|
name: "WarnMap",
|
|
|
|
|
props: {
|
|
|
|
|
@ -16,10 +17,20 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
center_point: [121.604192, 29.977299],
|
|
|
|
|
trans_list: [], // 接收右边展示页点击传过来的公司进行重新打点
|
|
|
|
|
is_flag: false, // 判断右边是否点击传输公司信息，没传则正常全区域打点，传了则重新打点
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 创建地图
|
|
|
|
|
bus.$on("send_map", (list, is_flag) => {
|
|
|
|
|
console.log("list22", list);
|
|
|
|
|
this.center_point[0] = list[0].longitude;
|
|
|
|
|
this.center_point[1] = list[0].latitude;
|
|
|
|
|
this.trans_list = list;
|
|
|
|
|
this.is_flag = is_flag;
|
|
|
|
|
this.init_map();
|
|
|
|
|
});
|
|
|
|
|
this.init_map();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
@ -32,6 +43,143 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
let label = new BMap.Label();
|
|
|
|
|
// 直接点位上图，无需点击多边形触发///////////////
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
let list_item = [];
|
|
|
|
|
if (!this.is_flag) {
|
|
|
|
|
list_item = this.company_list;
|
|
|
|
|
} else {
|
|
|
|
|
list_item = this.trans_list;
|
|
|
|
|
}
|
|
|
|
|
console.log("list_item", list_item);
|
|
|
|
|
list_item.forEach((item) => {
|
|
|
|
|
var point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
|
// 打点的同时，判断预警等级，四种等级打四种点
|
|
|
|
|
// 自定义图标
|
|
|
|
|
var myIcon = {};
|
|
|
|
|
// 红色预警等级公司
|
|
|
|
|
if (item.color == "red") {
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/realtimeWarning/red_c.png"),
|
|
|
|
|
new BMap.Size(40, 65),
|
|
|
|
|
{
|
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
// 黄色预警等级公司
|
|
|
|
|
} else if (item.color == "yellow") {
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/realtimeWarning/yellow_c.png"),
|
|
|
|
|
new BMap.Size(40, 60),
|
|
|
|
|
{
|
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
// 绿色预警等级公司
|
|
|
|
|
} else if (item.color == "green") {
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/realtimeWarning/green_c.png"),
|
|
|
|
|
new BMap.Size(40, 60),
|
|
|
|
|
{
|
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
// 蓝色预警等级公司
|
|
|
|
|
} else if (item.color == "blue") {
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/realtimeWarning/blue_c.png"),
|
|
|
|
|
new BMap.Size(40, 60),
|
|
|
|
|
{
|
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
|
|
|
|
|
marker.disableMassClear();
|
|
|
|
|
map.addOverlay(marker);
|
|
|
|
|
|
|
|
|
|
var content = item.companyName;
|
|
|
|
|
var label = new BMap.Label(content, {
|
|
|
|
|
// 创建文本标注
|
|
|
|
|
position: point, // 设置标注的地理位置
|
|
|
|
|
offset: new BMap.Size(-20, -50), // 设置标注的偏移量
|
|
|
|
|
});
|
|
|
|
|
label.setStyle({
|
|
|
|
|
backgroundColor: "#f9d2e4",
|
|
|
|
|
border: "0",
|
|
|
|
|
color: "#01847f",
|
|
|
|
|
fontSize: "16px",
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
});
|
|
|
|
|
label.disableMassClear();
|
|
|
|
|
map.addOverlay(label);
|
|
|
|
|
|
|
|
|
|
label.addEventListener("click", function () {
|
|
|
|
|
map.clearOverlays(); // 为保证始终只有一个文本覆盖物弹出，每次创造文本覆盖物时，先清楚所有的文本覆盖物
|
|
|
|
|
// 注意 ！ clearOverlays会清除地图所有的覆盖物，所以要给不想清除的覆盖物加上disableMassClear以做到禁止删除
|
|
|
|
|
var point_text = new BMap.Label(); // 创建公司详情文本覆盖物
|
|
|
|
|
point_text.setStyle({
|
|
|
|
|
color: "blue",
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
borderColor: "#ccc",
|
|
|
|
|
padding: "10px",
|
|
|
|
|
fontSize: "16px",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
backgroundColor: "#b5ebff",
|
|
|
|
|
transform: "translateX(-50%) translateY(calc(-100% - 10px))",
|
|
|
|
|
});
|
|
|
|
|
// 点位点击转处置弹窗
|
|
|
|
|
point_text.setPosition(
|
|
|
|
|
new BMap.Point(item.longitude, item.latitude)
|
|
|
|
|
);
|
|
|
|
|
point_text.setOffset(new BMap.Size(130, -10));
|
|
|
|
|
point_text.setStyle({
|
|
|
|
|
width: "340px",
|
|
|
|
|
height: "238px",
|
|
|
|
|
background: "url(pbImg/气泡弹窗1.png) no-repeat",
|
|
|
|
|
backgroundSize: "100% 100%",
|
|
|
|
|
border: "0",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
zIndex: 2000000000,
|
|
|
|
|
});
|
|
|
|
|
point_text.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; cursor: pointer;'>${item.companyName}</h4>
|
|
|
|
|
<div class='closeBtn' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px; cursor: pointer;"'></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>
|
|
|
|
|
<div title="${item.levelIndexThree}" style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;overflow:hidden; text-overflow: ellipsis;white-space: nowrap'><span style="color:#D0DEEE;">预警指标：</span>"${item.levelIndexThree}"异常</div>
|
|
|
|
|
<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='changeBtn' style='width:80px;height:34px;font-size: 14px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
text-align:center;
|
|
|
|
|
line-height:34px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: rgba(0,0,0,0);
|
|
|
|
|
border: 0.1px solid #54a972;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
margin-top:20px;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
margin-left:100px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
'>转处置</div>
|
|
|
|
|
</div>
|
|
|
|
|
`);
|
|
|
|
|
map.addOverlay(point_text);
|
|
|
|
|
let btn = document.querySelector(".changeBtn");
|
|
|
|
|
btn.addEventListener("click", () => {
|
|
|
|
|
that.$emit("open_change", item);
|
|
|
|
|
});
|
|
|
|
|
let closebtn = document.querySelector(".closeBtn");
|
|
|
|
|
closebtn.addEventListener("click", () => {
|
|
|
|
|
map.removeOverlay(point_text);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}, 500);
|
|
|
|
|
//////////////////////////////////////////
|
|
|
|
|
let that = this;
|
|
|
|
|
map.centerAndZoom(
|
|
|
|
|
new BMap.Point(this.center_point[0], this.center_point[1]),
|
|
|
|
|
@ -64,6 +212,7 @@ export default {
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
strokeWeight: 1,
|
|
|
|
|
}); //创建多边形
|
|
|
|
|
polygon.disableMassClear()
|
|
|
|
|
map.addOverlay(polygon); //增加多边形
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
@ -78,6 +227,7 @@ export default {
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
strokeWeight: 1,
|
|
|
|
|
}); //创建多边形
|
|
|
|
|
polygon.disableMassClear()
|
|
|
|
|
map.addOverlay(polygon); //增加多边形
|
|
|
|
|
}
|
|
|
|
|
polygon.infowindow = new BMap.InfoWindow();
|
|
|
|
|
@ -90,144 +240,23 @@ export default {
|
|
|
|
|
polygon.setFillColor("#3b4c44");
|
|
|
|
|
});
|
|
|
|
|
// 点击多边形区域
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
// 点位上图
|
|
|
|
|
console.log("that.company_list", that.company_list);
|
|
|
|
|
that.company_list.forEach((item) => {
|
|
|
|
|
var point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
|
// 打点的同时，判断预警等级，四种等级打四种点
|
|
|
|
|
// 自定义图标
|
|
|
|
|
var myIcon = {};
|
|
|
|
|
// 红色预警等级公司
|
|
|
|
|
if (item.color == "red") {
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/realtimeWarning/redcity.png"),
|
|
|
|
|
new BMap.Size(40, 60),
|
|
|
|
|
{
|
|
|
|
|
// anchor: new BMap.Size(-100, 25),
|
|
|
|
|
imageOffset: new BMap.Size(0, 0 - 10), // 设置图片偏移
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
// 黄色预警等级公司
|
|
|
|
|
} else if (item.color == "yellow") {
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/realtimeWarning/yellowcity.png"),
|
|
|
|
|
new BMap.Size(40, 60),
|
|
|
|
|
{
|
|
|
|
|
// anchor: new BMap.Size(-100, 25),
|
|
|
|
|
imageOffset: new BMap.Size(0, 0 - 10), // 设置图片偏移
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
// 绿色预警等级公司
|
|
|
|
|
} else if (item.color == "green") {
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/realtimeWarning/greencity.png"),
|
|
|
|
|
new BMap.Size(40, 60),
|
|
|
|
|
{
|
|
|
|
|
// anchor: new BMap.Size(-100, 25),
|
|
|
|
|
imageOffset: new BMap.Size(0, 0 - 10), // 设置图片偏移
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
// 蓝色预警等级公司
|
|
|
|
|
} else if (item.color == "blue") {
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/realtimeWarning/bluecity.png"),
|
|
|
|
|
new BMap.Size(40, 60),
|
|
|
|
|
{
|
|
|
|
|
// anchor: new BMap.Size(-100, 25),
|
|
|
|
|
imageOffset: new BMap.Size(0, 0 - 10), // 设置图片偏移
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
|
|
|
|
|
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: "#409EFF",
|
|
|
|
|
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='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_ponit);
|
|
|
|
|
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_ponit);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
// 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);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//////////////// 分区区名 /////////////////
|
|
|
|
|
@ -242,12 +271,12 @@ font-weight: 400;'>转处置</div>
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 创建文本标注对象
|
|
|
|
|
var label1 = new BMap.Label(
|
|
|
|
|
var unit_name = new BMap.Label(
|
|
|
|
|
MapPoint.features[i].properties.name,
|
|
|
|
|
opts
|
|
|
|
|
);
|
|
|
|
|
// 自定义文本标注样式
|
|
|
|
|
label1.setStyle({
|
|
|
|
|
unit_name.setStyle({
|
|
|
|
|
color: "orange",
|
|
|
|
|
borderRadius: "5px",
|
|
|
|
|
borderColor: "#ccc",
|
|
|
|
|
@ -259,14 +288,26 @@ font-weight: 400;'>转处置</div>
|
|
|
|
|
border: "0",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
});
|
|
|
|
|
map.addOverlay(label1);
|
|
|
|
|
unit_name.disableMassClear()
|
|
|
|
|
map.addOverlay(unit_name);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 重置刷新地图
|
|
|
|
|
reset_map(list, flag, point) {
|
|
|
|
|
this.company_list = list; // 完整城市点位赋值
|
|
|
|
|
this.is_flag = flag; // 打点时重新判断
|
|
|
|
|
this.center_point = point; // 地图初始加载中心点坐标
|
|
|
|
|
this.init_map();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
/* 去除百度地图logo */
|
|
|
|
|
.anchorBL {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.map {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
lukeyan
1 year ago
