141 lines
4.0 KiB
Vue
141 lines
4.0 KiB
Vue
<template>
|
|
<div class="map_container" id="map_container"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getImgUrl } from "@/utils/tools.js"
|
|
import MapUtil from "./BMapUtils.js";
|
|
import { onMounted, ref, onUnmounted } from "vue";
|
|
import cityJosn from "./cityJSON/gz.json";
|
|
import emitter from "@/utils/eventBus.js";
|
|
import { getApi } from "@/api/tobAcco_api.js";
|
|
const map = ref(null);
|
|
const MapUtils = ref(null);
|
|
const isArea = ref(false);
|
|
onMounted(() => {
|
|
map.value = new BMap.Map("map_container"); // 创建Map实例
|
|
MapUtils.value = new MapUtil(map.value); // 注入地图方法
|
|
initMap(); // 地图初始化
|
|
_setArea();
|
|
_setAreaPintAndModel();
|
|
//监听地图层级
|
|
map.value.addEventListener("zoomend", function (e) {
|
|
var ZoomNum = map.value.getZoom();
|
|
//小于8级 显示省级数据
|
|
if (ZoomNum < 8 && !isArea.value) {
|
|
isArea.value = true;
|
|
_setAreaPintAndModel();
|
|
} else {
|
|
isArea.value = false;
|
|
}
|
|
});
|
|
// 初始化地图,设置中心点坐标和地图级别
|
|
MapUtils.value.setCenterLevel(107.013478, 27.178343, 8);
|
|
//显示场所点位
|
|
emitter.on("showSitePoint", (val) => {
|
|
val.forEach((item) => {
|
|
MapUtils.value.countyAreaTotalModel({
|
|
point: [item.jd, item.wd],
|
|
orgObj: item,
|
|
icon: getImgUrl('map/blue.png'),
|
|
bgColor: "#2b836b"
|
|
});
|
|
});
|
|
});
|
|
});
|
|
onUnmounted(() => {
|
|
emitter.off("showSitePoint");
|
|
});
|
|
//设置行政区域统计模板
|
|
const _setAreaPintAndModel = () => {
|
|
//获取市州统计数据(隐患、风险)
|
|
getApi({}, "/mosty-jcgl/yhb/getPlaceCount").then((res) => {
|
|
if (res && res.length > 0) {
|
|
for (let j = 0; j < res.length; j++) {
|
|
for (let i = 0; i < cityJosn.features.length; i++) {
|
|
let item = cityJosn.features[i];
|
|
if (res[j].cityCode == item.properties.adcode) {
|
|
item.properties.fxsl = res[j].yzg; //风险数
|
|
item.properties.yhsl = res[j].yhsum; //隐患数
|
|
item.properties.dclsl = res[j].wzg //待处理
|
|
//中心坐标
|
|
let point = item.properties.centroid;
|
|
MapUtils.value.areaTotalModel({
|
|
point,
|
|
icon: getImgUrl('map/blue.png'),
|
|
orgObj: item.properties,
|
|
bgColor: "#2b836b"
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
//绘制行政区域
|
|
const _setArea = () => {
|
|
let count = cityJosn.features.length;
|
|
for (let i = 0; i < count; i++) {
|
|
let name = cityJosn.features[i].properties.name;
|
|
let color = "orange";
|
|
// if (name == "贵阳市") {
|
|
// color = "#ce4848";
|
|
// } else if (name == "遵义市") {
|
|
// color = "blue";
|
|
// } else {
|
|
// color = "orange";
|
|
// }
|
|
let coordinates = cityJosn.features[i].geometry.coordinates[0];
|
|
let str = "";
|
|
coordinates.forEach((item) => {
|
|
str += item.join(";");
|
|
});
|
|
MapUtils.value.drawPolygon(str, color);
|
|
//如果市毕节市 画出威宁自治县区域
|
|
if (name == "毕节市") {
|
|
let coords = "";
|
|
let coordinates = cityJosn.features[i].geometry.coordinates[1];
|
|
coordinates.forEach((item) => {
|
|
coords += item.join(";");
|
|
});
|
|
MapUtils.value.drawPolygon(coords, color);
|
|
}
|
|
}
|
|
};
|
|
// 初始化地图
|
|
const initMap = () => {
|
|
//开启鼠标滚轮缩放
|
|
map.value.enableScrollWheelZoom(true);
|
|
map.value.disableDoubleClickZoom();
|
|
//2D 时打开
|
|
map.value.addControl(
|
|
new BMap.NavigationControl({
|
|
offset: new BMap.Size(0, 200),
|
|
enableGeolocation: true,
|
|
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
|
|
})
|
|
);
|
|
map.value.addControl(
|
|
new BMap.MapTypeControl({
|
|
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
|
|
anchor: BMAP_ANCHOR_TOP_RIGHT,
|
|
offset: new BMap.Size(150, -200)
|
|
})
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#map_container {
|
|
height: 100%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
::v-deep .BMapLabel {
|
|
// background:none !important;
|
|
border: 1px solid #000 !important;
|
|
border-radius: 5px !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
</style>
|