地图样式新增

hookehuyr
Commit c23534978370769833a0c39ccc07ea9c63d79a3f c2353497 1 parent 8181be2b
Showing 3 changed files with 215 additions and 41 deletions
index.html
src/common/tiantan_v2.js
src/views/index.vue
--- a/index.html
View file @c235349
+++ b/index.html
View file @c235349
 <!--
  * @Date: 2023-01-09 15:22:38
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-05-26 16:14:24
+ * @LastEditTime: 2023-05-29 14:18:36
- * @FilePath: /tswj/index.html
+ * @FilePath: /map-demo/index.html
  * @Description: 文件描述
 -->
 <!DOCTYPE html>
@@ -22,6 +22,6 @@
         securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
     }
   </script>
-  <script src="https://webapi.amap.com/maps?v=2.0&key=381c6763e1fefd810fbab697f470149c&plugin=AMap.ElasticMarker,AMap.ImageLayer"></script>
+  <script src="https://webapi.amap.com/maps?v=2.0&key=381c6763e1fefd810fbab697f470149c&plugin=AMap.ElasticMarker,AMap.ImageLayer,AMap.ToolBar"></script>
 </body>
 </html>
--- a/src/common/tiantan_v2.js
View file @c235349
+++ b/src/common/tiantan_v2.js
View file @c235349
@@ -119,9 +119,18 @@ var toiletInfo = [
   },
 ];
+var activityInfo = [
+  {
+    name: '素食',
+    position: [120.587152, 31.314396],
+    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+  },
+];
+
 export default {
   sheshi,
   touristSpots,
   spotInfo,
   toiletInfo,
+  activityInfo,
 };
--- a/src/views/index.vue
View file @c235349
+++ b/src/views/index.vue
View file @c235349
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-05-29 06:15:20
+ * @LastEditTime: 2023-05-29 17:21:49
- * @FilePath: /tswj/src/views/Map.vue
+ * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div class="">
+  <div style="height: 100vh; position: relative;">
     <div id="container"></div>
     <div class="input-card">
-      <div class="input-item">
+      <!-- <div class="input-item">
         <span @click="showPublic" class="btn">显示公共设施</span>
         <span @click="hidePublic" class="btn">隐藏公共设施</span>
-      </div>
+      </div> -->
-      <div class="input-item">
+      <!-- <div class="input-item">
         <button class="btn" @click="addLayer" style="margin-right:1rem;">添加图层</button>
         <button class="btn" @click="removeLayer">删除图层</button>
-      </div>
+      </div> -->
       <div class="input-item">
-        <button class="btn" @click="setLocation" style="margin-right:1rem;">定位服务</button>
+        <!-- <button class="btn" @click="setLocation" style="margin-right:1rem;">定位服务</button>
         <button class="btn" @click="addLocation" style="margin-right:1rem;">添加定位路线</button>
-        <button class="btn" @click="removeLocation" style="margin-right:1rem;">删除定位路线</button>
+        <button class="btn" @click="removeLocation" style="margin-right:1rem;">删除定位路线</button> -->
         <button class="btn" @click="setTitleLayer" style="margin-right:1rem;">添加贴片</button>
       </div>
       <div class="input-item">
-        <button class="btn" @click="setSpotLayer" style="margin-right:1rem;">景点信息</button>
-        <button class="btn" @click="setToiletLayer" style="margin-right:1rem;">卫生间</button>
-      </div>
-      <div class="input-item">
         <button class="btn" @click="setWalkRoute" style="margin-right:1rem;">步行导航</button>
         <button class="btn" @click="removeWalkRoute" style="margin-right:1rem;">移除步行导航</button>
       </div>
     </div>
+    <div class="nav-bar-wrapper">
+      <van-row>
+        <van-col span="8" :class="[isActive === 0 ? 'checked' : '', 'item']" @click="setNavLayer(0)">
+          <van-icon name="shop-o" size="1.25rem" /><br/>
+          <span style="font-size: 0.85rem;">景区信息</span>
+        </van-col>
+        <van-col span="8" :class="[isActive === 1 ? 'checked' : '', 'item']" @click="setNavLayer(1)">
+          <van-icon name="shop-o" size="1.25rem" /><br/>
+          <span style="font-size: 0.85rem;">卫生间</span>
+        </van-col>
+        <van-col span="8" :class="[isActive === 2 ? 'checked' : '', 'item']" @click="setNavLayer(2)">
+          <van-icon name="shop-o" size="1.25rem" /><br/>
+          <span style="font-size: 0.85rem;">活动中心</span>
+        </van-col>
+      </van-row>
+    </div>
+    <div class="safe-route-wrapper">
+      <span v-if="open_safe_route" @click="handleSafeRoute(true)">打开安全路线</span>
+      <span v-else @click="handleSafeRoute(false)">关闭安全路线</span>
+    </div>
+    <div class="tool-bar-wrapper">
+      <van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
+      <van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
+      <van-icon name="aim" @click="setLocation" />
+    </div>
     <van-popup v-model:show="show_popup" position="bottom" :overlay="false" closeable
       :style="{ padding: '64px' }">内容</van-popup>
@@ -139,22 +160,29 @@ export default {
       current_route: '',
       spotInfo: [], // 景点信息实体
       toiletInfo: [], // 厕所信息实体
+      activityInfo: [], // 活动场所信息实体
       show_popup: false,
       dialog_show: false,
       xys_lng: '',
       xys_lat: '',
       walk_route: '',
+      toolBar: '',
+      isActive: 0,
+      safe_route: [],
+      open_safe_route: true
     }
   },
   mounted() {
     // 初始化地图
     this.initMap();
-    this.loadPublicEquipment();
+    // this.loadPublicEquipment();
-    this.loadScenicSpot();
+    // this.loadScenicSpot();
-    this.loadPlant();
+    // this.loadPlant();
     // this.setMapBoundary();
     // 使用之前都要再获取一下地址
     this.getLocation()
+    // 打开贴片地图
+    // this.setTitleLayer()
   },
   methods: {
     // addMarker () {
@@ -190,7 +218,7 @@ export default {
         showIndoorMap: false,
         defaultCursor: 'pointer', // 地图默认鼠标样式
         showBuildingBlock: false, // 是否展示地图 3D 楼块
-        zooms: [17, 19], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
+        zooms: [17, 18], // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
         showLabel: true, // 是否展示地图文字和 POI 信息
         zoom: 18, // 设置地图显示的缩放级别
         pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
@@ -204,6 +232,8 @@ export default {
       });
       // 添加地图点击事件
       this.map.on("click", this.showInfoClick);
+      //
+      this.setSpotLayer()
     },
     layerMap() {
       // 图层地图
@@ -508,6 +538,56 @@ export default {
       })
       this.map.add(this.toiletInfo);
     },
+    loadActivityMaker() { // 加载活动标记
+      var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
+      _.each(coord.activityInfo, (x, i) => {
+        var marker = new AMap.ElasticMarker({
+          position: coord.activityInfo[i].position,
+          zooms: [17, 19],
+          styles: [{
+            icon: {
+              img: coord.activityInfo[i].icon,
+              size: [16, 16], // 可见区域的大小
+              anchor: 'bottom-center', // 锚点
+              fitZoom: 14, // 最合适的级别
+              scaleFactor: 2, // 地图放大一级的缩放比例系数
+              maxScale: 1.4, // 最大放大比例
+              minScale: 0.8 // 最小放大比例
+            },
+            label: {
+              content: coord.activityInfo[i].name,
+              position: 'TM',
+              minZoom: 18
+            }
+          }],
+          zoomStyleMapping
+        });
+        // let infoWindowContent =
+        //   '<div className="custom-infowindow input-card">' +
+        //   '<label style="color:grey">公共厕所</label>' +
+        //   // 为 infowindow 添加自定义事件
+        //   '<div id="lnglat2container" class="btn">我要走过去</div>' +
+        //   '</div>';
+        // // 创建一个自定义内容的 infowindow 实例
+        // let infoWindow = new AMap.InfoWindow({
+        //   position: coord.spotInfo[i].position,
+        //   offset: new AMap.Pixel(0, -30),
+        //   content: infoWindowContent
+        // });
+        if (clickListener) {
+          marker.off('click', clickListener)
+        }
+        // 绑定景点的点击事件 - 文字出现才能触发
+        var clickListener = marker.on('click', (e) => {
+          // infoWindow.open(this.map);
+          this.show_popup = true;
+        })
+        //
+        this.activityInfo.push(marker);
+
+      })
+      this.map.add(this.activityInfo);
+    },
     setMapBoundary() { // 地图描边
       new AMap.Polygon({
         cursor: 'pointer',
@@ -543,19 +623,23 @@ export default {
     },
     setLocation() { // 开启定位服务
       // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
-      // 使用纠正偏移后的地址，打一个定位标记
+      if (!this.current_lng || !this.current_lat) {
-      var marker = new AMap.Marker({
+        this.getLocation()
-        position: new AMap.LngLat(this.current_lng, this.current_lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      } else {
-      });
+        // 使用纠正偏移后的地址，打一个定位标记
-      this.map.add(marker);
+        var marker = new AMap.Marker({
-      // 定位到地图中心-西园寺
+          position: new AMap.LngLat(this.current_lng, this.current_lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-      this.map.setCenter([120.587334, 31.314823]);
+        });
-      // 判断是否在范围内
+        this.map.add(marker);
-      let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
+        // 定位到地图中心-西园寺
-        [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
+        this.map.setCenter([120.587334, 31.314823]);
-      ]);
+        // 判断是否在范围内
-      if (!isPointInRing) {
+        let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
-        this.dialog_show = true;
+          [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
+        ]);
+        if (!isPointInRing) {
+          this.dialog_show = true;
+        }
       }
     },
     getLocation() {
@@ -577,13 +661,22 @@ export default {
         })
       });
     },
+    setZoom (type) { // 设置放大缩小地图
+      const zoom = this.map.getZoom();
+      if (type === 'plus') {
+        this.map.setZoom(zoom + 1)
+      }
+      if (type === 'minus') {
+        this.map.setZoom(zoom - 1)
+      }
+    },
     setRoute() { // 生成路径
       // 行动路线
       var path = [
-        [116.413384, 39.874071],
+        [120.587512, 31.313796],
-        [116.413141, 39.877934],
+        [120.587495, 31.314204],
-        [116.411469, 39.878175],
+        [120.586862, 31.314304],
-        [this.current_lng, this.current_lat]
+        [120.586841, 31.314543]
       ];
       this.current_route = new AMap.Polyline({
@@ -603,12 +696,23 @@ export default {
         zIndex: 50
       })
     },
-    addLocation() { // 新增路径
+    addSafeRoute() { // 新增路径
       this.setRoute();
       this.map.add([this.current_route]);
+      //
+      var marker1 = new AMap.Marker({
+        position: new AMap.LngLat(120.587506, 31.313787),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      });
+      var marker2 = new AMap.Marker({
+        position: new AMap.LngLat(120.586825, 31.314543),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      });
+      // 新增逃生路线标记
+      this.safe_route = [marker1, marker2]
+      this.map.add(this.safe_route);
     },
-    removeLocation() { // 删除路径
+    removeSafeRoute() { // 删除路径
       this.map.remove([this.current_route]);
+      this.map.remove(this.safe_route);
     },
     setTitleLayer() {
       //该demo可模拟水印效果
@@ -662,25 +766,36 @@ export default {
       layer.setMap(this.map);
       // 只显示相应区域，移动会回到选定范围
-      this.lockMapBounds()
+      // this.lockMapBounds()
     },
     setSpotLayer() { // 设置景点图层
       this.removeToiletLayer()
+      this.removeActivityLayer()
       // 加载地图标记
       this.loadSpotMaker()
     },
     setToiletLayer() { // 设置景点图层
       this.removeSpotLayer()
+      this.removeActivityLayer()
       // 加载厕所标记
       this.loadToiletMaker()
     },
+    setActivityLayer() { // 设置活动图层
+      this.removeSpotLayer();
+      this.removeToiletLayer()
+      // 加载活动标记
+      this.loadActivityMaker()
+    },
     removeSpotLayer() { // 删除景点标记
       this.map.remove(this.spotInfo);
     },
     removeToiletLayer() { // 删除景点标记
       this.map.remove(this.toiletInfo);
     },
+    removeActivityLayer() { // 删除活动标记
+      this.map.remove(this.activityInfo);
+    },
     // 限制地图范围
     lockMapBounds() {
       // var bounds = this.map.getBounds();
@@ -724,6 +839,27 @@ export default {
     },
     removeWalkRoute () {
       this.walk_route.clear()
+    },
+    setNavLayer (index) { // 选择地图图层显示
+      this.isActive = index;
+      if (index === 0) {
+        this.setSpotLayer()
+      }
+      if (index === 1) {
+        this.setToiletLayer()
+      }
+      if (index === 2) {
+        this.setActivityLayer()
+      }
+    },
+    handleSafeRoute (status) { // 打开/关闭逃生路线线
+      if (status) {
+        this.addSafeRoute()
+        this.open_safe_route = false;
+      } else {
+        this.removeSafeRoute()
+        this.open_safe_route = true;
+      }
     }
   }
 }
@@ -768,10 +904,39 @@ export default {
   border-radius: 0.4rem;
   box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
   position: fixed;
-  top: 1rem;
+  top: 4rem;
   right: 1rem;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   padding: 0.75rem 1.25rem;
 }
+
+.tool-bar-wrapper {
+  position: absolute;
+  left: 20px;
+  bottom: 40px;
+  width: 20px;
+}
+.nav-bar-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3.5rem;
+  background-color: white;
+  text-align: center;
+  box-shadow: 0 2px 2px  rgba(0, 0, 0, .2);
+  .item {
+    padding-top: 0.5rem;
+  }
+  .checked {
+    color: red;
+  }
+}
+.safe-route-wrapper {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  background-color: white;
+}
 </style>