feat(home): 添加地图标记分类筛选功能并优化地图初始化

hejianhao

2026-01-15 0133f00ddeae2b166bdd3897255522e4e06250a7

feat(home): 添加地图标记分类筛选功能并优化地图初始化

- 新增市政和房屋分类标记点，支持按类别和等级筛选
- 添加标记点点击交互功能
- 优化地图初始化逻辑，移除冗余代码
- 添加相关图片资源用于不同分类标记

 screen/public/index.html

@@ -5,23 +5,18 @@
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta
  name="viewport"
  content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
  <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "c75eccf0742998b2ea43823e08cacccd",
      securityJsCode: "c75eccf0742998b2ea43823e08cacccd」",
    };
  </script>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
  <script src="https://webapi.amap.com/loader.js"></script>
  <script src="https://webapi.amap.com/maps?v=2.0&key=232929db1cb31f26d42b3645a7456154&plugin=AMap.PolylineEditor"></script>
  <!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <link rel="icon" href="./logo.png">
  <title>智慧工程安全监管平台</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but manage-desk doesn't work properly without JavaScript enabled. Please enable it to

 screen/src/assets/img/home/f1.png

 screen/src/assets/img/home/f2.png

 screen/src/assets/img/home/f3.png

 screen/src/assets/img/home/s1.png

 screen/src/assets/img/home/s2.png

 screen/src/assets/img/home/s3.png

 screen/src/view/home/index.vue

@@ -1,7 +1,8 @@
<template>
  <div class="relative">
    <HeaderBox />
    <div id="mapcontainer" style="width: 1920px; height: 995px"></div>
    <div id="container" style="width: 1920px; height: 995px"></div>
    <!-- 类型切换tab -->
    <div
      class="flex a-center absolute postion-center top--109 br--16 c-fff fs--14 bgcolor4 SSHR"
    >
@@ -15,6 +16,7 @@
        占位盒子
      </div>
    </div>
    <!-- 左下角隐患 -->
    <div class="flex a-center absolute left--14 bottom--14">
      <img
        src="../../assets/img/home/Group@2x (4).png"
@@ -42,19 +44,26 @@
        </div>
      </div>
    </div>
    <!-- 地图legend -->
    <div
      class="absolute bottom0 h--120 w--250 py--29 px--37 bgimg5"
      class="absolute bottom--30 h--120 w--250 py--29 px--37 bgimg5"
      style="right: 505px"
    >
      <div class="flex a-center j-between fs--12 SHSR c-fff">
        <div class="flex a-center gap--14 cursor-pointer">
        <div
          class="flex a-center gap--14 cursor-pointer"
          @click="toggleCategory('municipal')"
        >
          <img
            src="../../assets/img/home/Combined Shape@2x.png"
            class="w--16 h--16 shrink0"
          />
          <div>市政</div>
        </div>
        <div class="flex a-center gap--14 cursor-pointer">
        <div
          class="flex a-center gap--14 cursor-pointer"
          @click="toggleCategory('house')"
        >
          <img
            src="../../assets/img/home/Shape@2x (4).png"
            class="w--18 h--16 shrink0"
@@ -63,15 +72,24 @@
        </div>
      </div>
      <div class="flex a-center j-between gap--23 px--13 fs--12 SHSR mt--26">
        <div class="flex a-center flex-column cursor-pointer">
        <div
          class="flex a-center flex-column cursor-pointer"
          @click="toggleLevel('A')"
        >
          <div class="w--8 h--8 mb--5 br50 bgcolor8"></div>
          <div class="color8">A类</div>
        </div>
        <div class="flex a-center flex-column cursor-pointer">
        <div
          class="flex a-center flex-column cursor-pointer"
          @click="toggleLevel('B')"
        >
          <div class="w--8 h--8 mb--5 br50 bgcolor9"></div>
          <div class="color9">B类</div>
        </div>
        <div class="flex a-center flex-column cursor-pointer">
        <div
          class="flex a-center flex-column cursor-pointer"
          @click="toggleLevel('C')"
        >
          <div class="w--8 h--8 mb--5 br50 bgcolor10"></div>
          <div class="color10">C类</div>
        </div>
@@ -181,7 +199,7 @@
          </template>
        </TitleBox>
      </div>
      <div class="mt--25">
      <div class="mt--25" v-if="activeTab == 1">
        <TitleBox>
          <template #title> 设备数据总览 </template>
          <template #content>
@@ -295,7 +313,6 @@
          </template>
        </TitleBox>
      </div>

      <div class="mt--33">
        <TitleBox>
          <template #title> 工作展示 </template>
@@ -360,6 +377,12 @@
<script>
import HeaderBox from "../header/index.vue";
import moment from "moment";
import s1 from "../../assets/img/home/s1.png";
import s2 from "../../assets/img/home/s2.png";
import s3 from "../../assets/img/home/s3.png";
import f1 from "../../assets/img/home/f1.png";
import f2 from "../../assets/img/home/f2.png";
import f3 from "../../assets/img/home/f3.png";
export default {
  components: {
    HeaderBox,
@@ -375,6 +398,16 @@
      scrollContainer: null, // 滚动容器引用
      activeIndex: 0, // 当前活动索引
      projectId: null,
      categoryFilter: {
        municipal: true,
        house: true,
      },
      levelFilter: {
        A: true,
        B: true,
        C: true,
      },
      markers: [],
    };
  },
  watch: {
@@ -548,24 +581,152 @@
      event.preventDefault();
      this.scrollContainer.scrollTop += event.deltaY;
    },

    setMapload() {
      AMapLoader.load({
        key: "232929db1cb31f26d42b3645a7456154", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        key: "232929db1cb31f26d42b3645a7456154",
        version: "2.0",
      })
        .then((AMap) => {
          this.mapView = new AMap.Map("mapcontainer", {
            // resizeEnable: true, //是否监控地图容器尺寸变化
          // 微信建筑图层
          let satellite = new AMap.TileLayer.Satellite();
          //创建路网图层
          let roadNet = new AMap.TileLayer.RoadNet();
          this.mapView = new AMap.Map("container", {
            zoom: 13,
            center: [108.357471, 22.828643], // 初始化地图中心点
            mapStyle: "amap://styles/darkblue",
            // layers: [satellite],
          });
          this.mapView.on("click", (e) => {});
          this.initCategoryMarkers(AMap);
        })
        .catch((e) => {
          console.error(e); //加载错误提示
        });
    },
    initCategoryMarkers(AMap) {
      if (!this.mapView) {
        return;
      }
      const points = [
        {
          position: [108.357471, 22.828643],
          category: "municipal",
          level: "A",
        },
        {
          position: [108.367471, 22.828643],
          category: "municipal",
          level: "B",
        },
        {
          position: [108.347471, 22.828643],
          category: "municipal",
          level: "C",
        },
        {
          position: [108.357471, 22.838643],
          category: "house",
          level: "A",
        },
        {
          position: [108.367471, 22.838643],
          category: "house",
          level: "B",
        },
        {
          position: [108.347471, 22.838643],
          category: "house",
          level: "C",
        },
      ];
      const markers = [];
      points.forEach((item) => {
        const marker = this.createCategoryMarker(AMap, item);
        if (marker) {
          this.mapView.add(marker);
          markers.push(marker);
        }
      });
      this.markers = markers;
      this.updateMarkerVisibility();
    },
    createCategoryMarker(AMap, item) {
      if (!item || !item.position) {
        return null;
      }
      let image = null;
      if (item.category === "municipal") {
        if (item.level === "A") {
          image = s1;
        } else if (item.level === "B") {
          image = s2;
        } else if (item.level === "C") {
          image = s3;
        }
      } else if (item.category === "house") {
        if (item.level === "A") {
          image = f1;
        } else if (item.level === "B") {
          image = f2;
        } else if (item.level === "C") {
          image = f3;
        }
      }
      if (!image) {
        return null;
      }
      const icon = new AMap.Icon({
        image,
        size: new AMap.Size(30, 30),
        imageSize: new AMap.Size(30, 30),
      });
      const marker = new AMap.Marker({
        position: item.position,
        icon,
        offset: new AMap.Pixel(-12, -12),
        extData: {
          category: item.category,
          level: item.level,
        },
      });
      return marker;
    },
    updateMarkerVisibility() {
      if (!this.markers || !this.markers.length) {
        return;
      }
      this.markers.forEach((marker) => {
        if (!marker) {
          return;
        }
        const data = marker.getExtData ? marker.getExtData() : null;
        if (!data) {
          return;
        }
        const categoryVisible = this.categoryFilter[data.category];
        const levelVisible = this.levelFilter[data.level];
        if (categoryVisible && levelVisible) {
          marker.show();
        } else {
          marker.hide();
        }
      });
    },
    toggleCategory(type) {
      if (!this.categoryFilter.hasOwnProperty(type)) {
        return;
      }
      this.categoryFilter[type] = !this.categoryFilter[type];
      this.updateMarkerVisibility();
    },
    toggleLevel(level) {
      if (!this.levelFilter.hasOwnProperty(level)) {
        return;
      }
      this.levelFilter[level] = !this.levelFilter[level];
      this.updateMarkerVisibility();
    },
  },
};
</script>