新增导航预警模块

hookehuyr
Commit f3746a195d4e41c39c0dabd74041c41db7533ab3 f3746a19 1 parent 9bcec11b
Showing 3 changed files with 83 additions and 30 deletions
src/common/tiantan_v2.js
src/components/InfoWindowLite.vue
src/views/index.vue
--- a/src/common/tiantan_v2.js
View file @f3746a1
+++ b/src/common/tiantan_v2.js
View file @f3746a1
@@ -326,9 +326,12 @@ var toiletInfo = [
       },
     ],
   },
+];
+
+var warnInfo = [
   {
     name: '预警演示',
-    position: [120.587747, 31.314202],
+    position: [120.58704, 31.313773],
     icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
     details: [
       {
@@ -425,4 +428,5 @@ export default {
   toiletInfo,
   activityInfo,
   publicInfo,
+  warnInfo,
 };
--- a/src/components/InfoWindowLite.vue
View file @f3746a1
+++ b/src/components/InfoWindowLite.vue
View file @f3746a1
@@ -84,7 +84,6 @@ export default {
   methods: {
     // 关闭
     close() {
-      console.warn(this.infoWindow);
       // 高德地图信息窗关闭的api
       this.infoWindow.close()
     },
--- a/src/views/index.vue
View file @f3746a1
+++ b/src/views/index.vue
View file @f3746a1
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-07 15:58:14
+ * @LastEditTime: 2023-06-08 17:33:46
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 地图主体页面
 -->
@@ -12,7 +12,7 @@
       <div class="hideScrollBar nav-bar-content">
         <div v-for="(item, index) in navBarList" :key="index" :class="[isActive === index ? 'checked' : '', 'item']"
           @click="setNavLayer(item, index)">
-          <van-icon name="shop-o" size="1.5rem" /><br />
+          <van-icon :name="item.icon" size="2rem" /><br />
           <span style="font-size: 0.85rem; margin-top: 0.5rem; display: inline-block;">{{ item.name }}</span>
         </div>
         <div style="width: 4rem;flex-shrink: 0;"></div>
@@ -184,6 +184,7 @@ export default {
       toiletInfo: [], // 厕所信息实体
       activityInfo: [], // 活动场所信息实体
       publicInfo: [], // 公共设施信息实体
+      warnInfo: [], // 预警信息实体
       show_popup: false,
       dialog_show: false,
       xys_lng: 120.587334,
@@ -214,16 +215,24 @@ export default {
   mounted() {
     this.navBarList = [{
       key: 'spot',
-      name: '景点'
+      name: '景点',
+      icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%AE%BF%E5%A0%82@2x.png'
     }, {
       key: 'activity',
-      name: '餐饮'
+      name: '餐饮',
+      icon: 'https://cdn.ipadbiz.cn/xys/map/%E8%8A%B1%E5%9B%AD@2x.png'
     }, {
       key: 'public',
-      name: '出入口'
+      name: '出入口',
+      icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%87%BA%E5%85%A5%E5%8F%A3@2x.png'
     }, {
       key: 'toilet',
-      name: '卫生间'
+      name: '卫生间',
+      icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%8E%95%E6%89%80@2x.png'
+    }, {
+      key: 'warn',
+      name: '预警',
+      icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png'
     }]
     // 初始化地图
     this.initMap();
@@ -363,7 +372,7 @@ export default {
         }
         // 绑定景点的点击事件 - 文字出现才能触发
         var clickListener = marker.on('click', (e) => {
-          this.positionWarnMarker(coord.toiletInfo[i]);
+          this.positionLiteMarker(coord.toiletInfo[i]);
         })
         //
         this.toiletInfo.push(marker);
@@ -371,6 +380,43 @@ export default {
       })
       this.map.add(this.toiletInfo);
     },
+    loadWarnMaker() { // 加载预警标记
+      var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
+      _.each(coord.warnInfo, (x, i) => {
+        var marker = new AMap.ElasticMarker({
+          position: coord.warnInfo[i].position,
+          zooms: [17, 20],
+          styles: [{
+            icon: {
+              img: coord.warnInfo[i].icon,
+              size: [28, 28], // 可见区域的大小
+              anchor: 'bottom-center', // 锚点
+              fitZoom: 14, // 最合适的级别
+              scaleFactor: 2, // 地图放大一级的缩放比例系数
+              maxScale: 1.4, // 最大放大比例
+              minScale: 0.8 // 最小放大比例
+            },
+            label: {
+              content: coord.warnInfo[i].name,
+              position: 'TM',
+              minZoom: 18
+            }
+          }],
+          zoomStyleMapping
+        });
+        if (clickListener) {
+          marker.off('click', clickListener)
+        }
+        // 绑定景点的点击事件 - 文字出现才能触发
+        var clickListener = marker.on('click', (e) => {
+          this.positionWarnMarker(coord.warnInfo[i]);
+        })
+        //
+        this.warnInfo.push(marker);
+
+      })
+      this.map.add(this.warnInfo);
+    },
     loadActivityMaker() { // 加载活动标记
       var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
       _.each(coord.activityInfo, (x, i) => {
@@ -666,33 +712,30 @@ export default {
       // this.lockMapBounds()
     },
-    setSpotLayer() { // 设置景点图层
+    handleLayer (key) { // 构建图层显示结构
-      this.removeToiletLayer()
+      const arr = ['Toilet', 'Activity', 'Public', 'Spot', 'Warn'];
-      this.removeActivityLayer()
+      const filteredArr = arr.filter(item => item !== key);
-      this.removePublicLayer()
+      // 删除其他图层
+      filteredArr.forEach(element => {
+        this[`remove${element}Layer`]()
+      });
       // 加载地图标记
-      this.loadSpotMaker()
+      this[`load${key}Maker`]();
     },
-    setToiletLayer() { // 设置景点图层
+    setSpotLayer() { // 设置景点图层
-      this.removeSpotLayer()
+      this.handleLayer('Spot')
-      this.removeActivityLayer()
+    },
-      this.removePublicLayer()
+    setToiletLayer() { // 设置卫生间图层
-      // 加载厕所标记
+      this.handleLayer('Toilet')
-      this.loadToiletMaker()
     },
     setActivityLayer() { // 设置活动图层
-      this.removeSpotLayer();
+      this.handleLayer('Activity')
-      this.removeToiletLayer()
-      this.removePublicLayer()
-      // 加载活动标记
-      this.loadActivityMaker()
     },
     setPublicLayer() { // 设置公共图层
-      this.removeSpotLayer();
+      this.handleLayer('Public')
-      this.removeToiletLayer()
+    },
-      this.removeActivityLayer()
+    setWarnLayer() { // 设置预警图层
-      // 加载公共标记
+      this.handleLayer('Warn')
-      this.loadPublicMaker()
     },
     removeSpotLayer() { // 删除景点标记
       this.map.remove(this.spotInfo);
@@ -706,6 +749,9 @@ export default {
     removePublicLayer() { // 删除公共标记
       this.map.remove(this.publicInfo);
     },
+    removeWarnLayer() { // 删除预警标记
+      this.map.remove(this.warnInfo);
+    },
     // 限制地图范围
     lockMapBounds() {
       // var bounds = this.map.getBounds();
@@ -785,6 +831,10 @@ export default {
         this.navName = 'publicInfo'
         this.setPublicLayer()
       }
+      if (key === 'warn') {
+        this.navName = 'warnInfo'
+        this.setWarnLayer()
+      }
       this.closeInfoWindow();
       setTimeout(() => {
         // 地图zooms调整