|
|
@ -24,7 +24,9 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
dongtaiPoint: [121.604192, 29.977299],
|
|
|
|
dongtaiPoint: window.$mapCfg.center,
|
|
|
|
|
|
|
|
minZoom: window.$mapCfg.minZoom,
|
|
|
|
|
|
|
|
maxZoom: window.$mapCfg.maxZoom,
|
|
|
|
WaringList: this.waringList,
|
|
|
|
WaringList: this.waringList,
|
|
|
|
villageList: [],
|
|
|
|
villageList: [],
|
|
|
|
villageSumList: [],
|
|
|
|
villageSumList: [],
|
|
|
@ -63,8 +65,8 @@ export default {
|
|
|
|
new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
|
|
|
|
new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
|
|
|
|
13
|
|
|
|
13
|
|
|
|
);
|
|
|
|
);
|
|
|
|
map.setMinZoom(12);
|
|
|
|
map.setMinZoom(this.minZoom); // 初始化地图,设置中心点坐标和地图级别
|
|
|
|
map.setMaxZoom(19);
|
|
|
|
map.setMaxZoom(this.maxZoom);
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
// hjrequest({
|
|
|
|
// hjrequest({
|
|
|
|
// url: '/yc/dt/statistical/village',
|
|
|
|
// url: '/yc/dt/statistical/village',
|
|
|
@ -154,11 +156,13 @@ export default {
|
|
|
|
var point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
var point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
// 自定义图标
|
|
|
|
// 自定义图标
|
|
|
|
var myIcon = new BMap.Icon(
|
|
|
|
var myIcon = new BMap.Icon(
|
|
|
|
require("@/assets/realtimeWarning/redcity.png"), new BMap.Size(60, 60),{
|
|
|
|
require("@/assets/realtimeWarning/redcity.png"),
|
|
|
|
anchor:new BMap.Size(100,25)
|
|
|
|
new BMap.Size(60, 60),
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
anchor: new BMap.Size(100, 25),
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
);
|
|
|
|
var marker = new BMap.Marker(point,{icon:myIcon}); // 创建点位
|
|
|
|
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
|
|
|
|
map.addOverlay(marker);
|
|
|
|
map.addOverlay(marker);
|
|
|
|
var content = item.companyName;
|
|
|
|
var content = item.companyName;
|
|
|
|
var label = new BMap.Label(content, {
|
|
|
|
var label = new BMap.Label(content, {
|
|
|
@ -265,80 +269,80 @@ font-weight: 400;'>转处置</div>
|
|
|
|
map.addOverlay(label1);
|
|
|
|
map.addOverlay(label1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// function showPic() {
|
|
|
|
// function showPic() {
|
|
|
|
// console.log(that.WaringList, "that.WaringList");
|
|
|
|
// console.log(that.WaringList, "that.WaringList");
|
|
|
|
// that.WaringList.forEach((item) => {
|
|
|
|
// that.WaringList.forEach((item) => {
|
|
|
|
// // 创建小车图标
|
|
|
|
// // 创建小车图标
|
|
|
|
// var myIcon = new BMap.Icon(
|
|
|
|
// var myIcon = new BMap.Icon(
|
|
|
|
// "public/dongtai/awrni.png",
|
|
|
|
// "public/dongtai/awrni.png",
|
|
|
|
// new BMap.Size(80, 80)
|
|
|
|
// new BMap.Size(80, 80)
|
|
|
|
// );
|
|
|
|
// );
|
|
|
|
// myIcon.setImageUrl("/dongtai/awrni.png");
|
|
|
|
// myIcon.setImageUrl("/dongtai/awrni.png");
|
|
|
|
// // 创建Marker标注,使用小车图标
|
|
|
|
// // 创建Marker标注,使用小车图标
|
|
|
|
// var marker = new BMap.Marker(
|
|
|
|
// var marker = new BMap.Marker(
|
|
|
|
// new BMap.Point(item.longitude, item.latitude),
|
|
|
|
// new BMap.Point(item.longitude, item.latitude),
|
|
|
|
// {
|
|
|
|
// {
|
|
|
|
// icon: myIcon,
|
|
|
|
// icon: myIcon,
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// );
|
|
|
|
// );
|
|
|
|
// console.log(marker, "marker");
|
|
|
|
// console.log(marker, "marker");
|
|
|
|
// map.addOverlay(marker);
|
|
|
|
// map.addOverlay(marker);
|
|
|
|
// marker.addEventListener("click", function () {
|
|
|
|
// marker.addEventListener("click", function () {
|
|
|
|
// var label = new BMap.Label();
|
|
|
|
// var label = new BMap.Label();
|
|
|
|
// label.setStyle({
|
|
|
|
// label.setStyle({
|
|
|
|
// color: "blue",
|
|
|
|
// color: "blue",
|
|
|
|
// borderRadius: "5px",
|
|
|
|
// borderRadius: "5px",
|
|
|
|
// borderColor: "#ccc",
|
|
|
|
// borderColor: "#ccc",
|
|
|
|
// padding: "10px",
|
|
|
|
// padding: "10px",
|
|
|
|
// fontSize: "16px",
|
|
|
|
// fontSize: "16px",
|
|
|
|
// fontFamily: "微软雅黑",
|
|
|
|
// fontFamily: "微软雅黑",
|
|
|
|
// transform: "translateX(-50%) translateY(calc(-100% - 10px))",
|
|
|
|
// transform: "translateX(-50%) translateY(calc(-100% - 10px))",
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// // 点位点击弹窗
|
|
|
|
// // 点位点击弹窗
|
|
|
|
// label.setPosition(new BMap.Point(item.longitude, item.latitude));
|
|
|
|
// label.setPosition(new BMap.Point(item.longitude, item.latitude));
|
|
|
|
// label.setOffset(new BMap.Size(130, -10));
|
|
|
|
// label.setOffset(new BMap.Size(130, -10));
|
|
|
|
// label.setStyle({
|
|
|
|
// label.setStyle({
|
|
|
|
// width: "340px",
|
|
|
|
// width: "340px",
|
|
|
|
// height: "238px",
|
|
|
|
// height: "238px",
|
|
|
|
// background: "url(pbImg/气泡弹窗1.png) no-repeat",
|
|
|
|
// background: "url(pbImg/气泡弹窗1.png) no-repeat",
|
|
|
|
// backgroundSize: "100% 100%",
|
|
|
|
// backgroundSize: "100% 100%",
|
|
|
|
// border: "0",
|
|
|
|
// border: "0",
|
|
|
|
// color: "#fff",
|
|
|
|
// color: "#fff",
|
|
|
|
// zIndex: 2000000000,
|
|
|
|
// zIndex: 2000000000,
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// label.setContent(`
|
|
|
|
// 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='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>
|
|
|
|
// <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.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>
|
|
|
|
// <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;
|
|
|
|
// <div class='zhuanchuzhiBtn' style='width:80px;height:34px;font-size: 14px;
|
|
|
|
// color: #FFFFFF;
|
|
|
|
// color: #FFFFFF;
|
|
|
|
// text-align:center;
|
|
|
|
// text-align:center;
|
|
|
|
// line-height:34px;
|
|
|
|
// line-height:34px;
|
|
|
|
// background: url(pbImg/2121.png) no-repeat;
|
|
|
|
// background: url(pbImg/2121.png) no-repeat;
|
|
|
|
// margin-top:20px;
|
|
|
|
// margin-top:20px;
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
// letter-spacing: 0;
|
|
|
|
// letter-spacing: 0;
|
|
|
|
// margin-left:80px;
|
|
|
|
// margin-left:80px;
|
|
|
|
// font-weight: 400;'>转处置</div>
|
|
|
|
// font-weight: 400;'>转处置</div>
|
|
|
|
// </div>
|
|
|
|
// </div>
|
|
|
|
// `);
|
|
|
|
// `);
|
|
|
|
// map.addOverlay(label);
|
|
|
|
// map.addOverlay(label);
|
|
|
|
// let btn = document.querySelector(".zhuanchuzhiBtn");
|
|
|
|
// let btn = document.querySelector(".zhuanchuzhiBtn");
|
|
|
|
// btn.addEventListener("click", () => {
|
|
|
|
// btn.addEventListener("click", () => {
|
|
|
|
// that.$emit("zhuanchuzhi", item);
|
|
|
|
// that.$emit("zhuanchuzhi", item);
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// let closebtn = document.querySelector(".closeBtn");
|
|
|
|
// let closebtn = document.querySelector(".closeBtn");
|
|
|
|
// closebtn.addEventListener("click", () => {
|
|
|
|
// closebtn.addEventListener("click", () => {
|
|
|
|
// map.removeOverlay(label);
|
|
|
|
// map.removeOverlay(label);
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// // label.addEventListener('mouseout', function () {
|
|
|
|
// // label.addEventListener('mouseout', function () {
|
|
|
|
// // map.removeOverlay(label);
|
|
|
|
// // map.removeOverlay(label);
|
|
|
|
// // })
|
|
|
|
// // })
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
},
|
|
|
|
flexPoint() {
|
|
|
|
flexPoint() {
|
|
|
|
var pointAll = document.querySelectorAll(".BMap_Marker.BMap_noprint");
|
|
|
|
var pointAll = document.querySelectorAll(".BMap_Marker.BMap_noprint");
|
|
|
@ -372,6 +376,5 @@ font-weight: 400;'>转处置</div>
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
z-index: 50;
|
|
|
|
z-index: 50;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|