|
|
|
@ -0,0 +1,135 @@
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<div class="map" id="container"></div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import { topRanking } from "@/api/safetyIndex";
|
|
|
|
|
|
|
|
//import styleJson from "../../../../public/custom_map_config.json";
|
|
|
|
|
|
|
|
//import MapPoint from "../../../../public/zhenhaiPoint.json";
|
|
|
|
|
|
|
|
//import MapLine from "../../../../public/zhenhaiLine.json";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
|
|
name: "mapWrap",
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
center_point: window.$mapCfg.center,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
this.get_rank();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
async get_rank() {
|
|
|
|
|
|
|
|
let params = {
|
|
|
|
|
|
|
|
scoreType: "month",
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
let res = await topRanking(params);
|
|
|
|
|
|
|
|
this.initMap(res.data);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
initMap(data) {
|
|
|
|
|
|
|
|
// 创建地图实例
|
|
|
|
|
|
|
|
let BMapGL = window.BMap;
|
|
|
|
|
|
|
|
let map = new BMapGL.Map("container"); // 创建地图实例
|
|
|
|
|
|
|
|
let company_list = data;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log("data01", company_list);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
company_list.forEach((item) => {
|
|
|
|
|
|
|
|
let company_point = new BMapGL.Point(item.longitude, item.latitude);
|
|
|
|
|
|
|
|
// 根据公司排名打点
|
|
|
|
|
|
|
|
let myIcon = new BMapGL.Icon(
|
|
|
|
|
|
|
|
require("@/assets/images/map/top0" + item.areaRank + ".png"),
|
|
|
|
|
|
|
|
new BMapGL.Size(40, 60),
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
imageOffset: new BMapGL.Size(0, 0, 5),
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
myIcon.setImageSize(new BMapGL.Size(40, 60)); //设置图标大小
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let marker = new BMapGL.Marker(company_point, {
|
|
|
|
|
|
|
|
icon: myIcon,
|
|
|
|
|
|
|
|
}); // 创建点位
|
|
|
|
|
|
|
|
marker.disableMassClear();
|
|
|
|
|
|
|
|
map.addOverlay(marker);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 公司名
|
|
|
|
|
|
|
|
let content = item.companyName;
|
|
|
|
|
|
|
|
let label = new BMapGL.Label(content, {
|
|
|
|
|
|
|
|
position: company_point, // 设置标注的地理位置
|
|
|
|
|
|
|
|
offset: new BMapGL.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 BMapGL.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 BMapGL.Point(item.longitude, item.latitude)
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
point_text.setOffset(new BMapGL.Size(130, -10));
|
|
|
|
|
|
|
|
point_text.setStyle({
|
|
|
|
|
|
|
|
width: "340px",
|
|
|
|
|
|
|
|
height: "238px",
|
|
|
|
|
|
|
|
background: "url(../pbImg/dialogback.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/close.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.companyAddress}</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.emergencyContact}</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.score}</h4>
|
|
|
|
|
|
|
|
`);
|
|
|
|
|
|
|
|
map.addOverlay(point_text);
|
|
|
|
|
|
|
|
let closebtn = document.querySelector(".closeBtn");
|
|
|
|
|
|
|
|
closebtn.addEventListener("click", () => {
|
|
|
|
|
|
|
|
map.removeOverlay(point_text);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
map.centerAndZoom(
|
|
|
|
|
|
|
|
new BMapGL.Point(this.center_point[0], this.center_point[1]),
|
|
|
|
|
|
|
|
14
|
|
|
|
|
|
|
|
); // 创建点坐标
|
|
|
|
|
|
|
|
map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
|
|
|
|
|
|
|
|
map.setMaxZoom(19);
|
|
|
|
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
|
|
/* 去除百度地图logo */
|
|
|
|
|
|
|
|
.anchorBL {
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.map {
|
|
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
|
|
height: 91vh;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
loveflow
1 year ago
