test: 1

src/components/Map/yjMap.vue

@@ -0,0 +1,140 @@
+<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>