步行导航更新到手绘操作

hookehuyr
Commit a398fe2ac95ff865cc0f32949b45dc2edc55ec96 a398fe2a 1 parent b09468d5
Showing 4 changed files with 112 additions and 25 deletions
src/common/tiantan_v2.js
src/components/InfoWindow.vue
src/components/InfoWindowLite.vue
src/views/index.vue
--- a/src/common/tiantan_v2.js
View file @a398fe2
+++ b/src/common/tiantan_v2.js
View file @a398fe2
@@ -118,6 +118,13 @@ var spotInfo = [
     ],
     // zoom: { 17: 0, 18: 0, 19: 0, 20: 0 },
     window_type: 'normal',
+    path: [
+      [120.58769, 31.313319],
+      [120.587631, 31.313058],
+      [120.587575, 31.312943],
+      [120.587538, 31.312777],
+      [120.587894, 31.312779],
+    ],
   },
   {
     name: '福德智慧二桥',
@@ -132,6 +139,11 @@ var spotInfo = [
     ],
     // zoom: { 17: 1, 18: 1, 19: 0, 20: 0 },
     window_type: 'normal',
+    path: [
+      [120.588046, 31.313359],
+      [120.588138, 31.313203],
+      [120.588168, 31.313004],
+    ],
   },
   {
     name: '御赐牌楼',
--- a/src/components/InfoWindow.vue
View file @a398fe2
+++ b/src/components/InfoWindow.vue
View file @a398fe2
@@ -249,7 +249,8 @@ export default {
       }
     },
     goToLocation () {
-      this.$emit('onLocation', this.info.position)
+      // this.$emit('onLocation', this.info.position)
+      this.$emit('onLocation', this.info.path)
     }
   }
 }
--- a/src/components/InfoWindowLite.vue
View file @a398fe2
+++ b/src/components/InfoWindowLite.vue
View file @a398fe2
@@ -97,7 +97,8 @@ export default {
       location.href = this.info.details[this.isActive].url;
     },
     goToLocation() {
-      this.$emit('onLocation', this.info.position)
+      // this.$emit('onLocation', this.info.position)
+      this.$emit('onLocation', this.info.path)
     }
   }
 }
--- a/src/views/index.vue
View file @a398fe2
+++ b/src/views/index.vue
View file @a398fe2
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-28 11:02:03
+ * @LastEditTime: 2023-06-28 14:13:45
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 地图主体页面
 -->
@@ -36,10 +36,10 @@
     </div>
     <div class="operate-bar-wrapper">
       <div class="box-wrapper">
-        <div class="item" @click="setLocation">
+        <!-- <div class="item" @click="setLocation">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8Dloc@2x.png" size="1.5rem"
             style="vertical-align: middle;" />
-        </div>
+        </div> -->
         <div v-if="open_safe_route" class="item" @click="handleSafeRoute(true)">
           <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png" size="1.25rem"
             style="vertical-align: middle;" />
@@ -51,7 +51,10 @@
       </div>
     </div>
-    <div v-if="!show_walk_route" @click="removeWalkRoute" class="walk-nav-text">
+    <!-- <div v-if="!show_walk_route" @click="removeWalkRoute" class="walk-nav-text">
+      关闭步行导航
+    </div> -->
+    <div v-if="!show_walk_route" @click="removeNavRoute" class="walk-nav-text">
       关闭步行导航
     </div>
@@ -195,7 +198,7 @@ export default {
       walk_route: '',
       toolBar: '',
       isActive: 0,
-      safe_route: [],
+      route_marker: [],
       open_safe_route: true,
       show_walk_route: true,
       popup_title: '',
@@ -555,7 +558,7 @@ export default {
         this.map.setZoom(zoom - 1)
       }
     },
-    setRoute() { // 生成路径
+    addSafeRoute() { // 新增路径
       // 行动路线
       var path = [
         [120.587512, 31.313796],
@@ -563,9 +566,9 @@ export default {
         [120.586862, 31.314304],
         [120.586841, 31.314543]
       ];
-
+      // 生成折线地图路径
       this.current_route = new AMap.Polyline({
-        path: path,
+        path,
         isOutline: true,
         outlineColor: '#7F7F7F',
         borderWeight: 1,
@@ -580,11 +583,72 @@ export default {
         lineCap: 'round',
         zIndex: 50
       })
+      this.map.add([this.current_route]);
+      // 设置起始点标记
+      var marker1 = new AMap.Marker({
+        icon: new AMap.Icon({
+          image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
+          size: new AMap.Size(40, 40),
+          // 图标所用图片大小
+          imageSize: new AMap.Size(40, 40),
+          // 图标取图偏移量
+          imageOffset: new AMap.Pixel(0, 0)
+        }),
+        position: new AMap.LngLat(path[0][0], path[0][1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        anchor: 'bottom-center',
+        offset: new AMap.Pixel(0, 0)
+      });
+      marker1.setLabel({
+        direction: 'right',
+        offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
+        content: "<div class='info'>起点</div>", //设置文本标注内容
+      });
+      var marker2 = new AMap.Marker({
+        icon: new AMap.Icon({
+          image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
+          size: new AMap.Size(40, 40),
+          // 图标所用图片大小
+          imageSize: new AMap.Size(40, 40),
+          // 图标取图偏移量
+          imageOffset: new AMap.Pixel(0, 0)
+        }),
+        position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        anchor: 'bottom-center',
+        offset: new AMap.Pixel(0, 0)
+      });
+      marker2.setLabel({
+        direction: 'right',
+        offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
+        content: "<div class='info'>终点</div>", //设置文本标注内容
+      });
+      // 新增逃生路线标记
+      this.route_marker = [marker1, marker2]
+      this.map.add(this.route_marker);
     },
-    addSafeRoute() { // 新增路径
+    removeSafeRoute() { // 移除地图路线
-      this.setRoute();
+      this.map.remove([this.current_route]); // 删除地图折线
+      this.map.remove(this.route_marker); // 删除起始点标记
+    },
+    addNavRoute (path) { // 新增导航路径
+      // 生成折线地图路径
+      this.current_route = new AMap.Polyline({
+        path,
+        isOutline: true,
+        outlineColor: '#7F7F7F',
+        borderWeight: 1,
+        strokeColor: '#7F7F7F',
+        strokeOpacity: 1,
+        strokeWeight: 1,
+        // 折线样式还支持 'dashed'
+        strokeStyle: 'solid',
+        // strokeStyle是dashed时有效
+        strokeDasharray: [10, 5],
+        lineJoin: 'round',
+        lineCap: 'round',
+        zIndex: 50
+      })
       this.map.add([this.current_route]);
-      //
+      // 设置起始点标记
       var marker1 = new AMap.Marker({
         icon: new AMap.Icon({
           image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png',
@@ -594,7 +658,7 @@ export default {
           // 图标取图偏移量
           imageOffset: new AMap.Pixel(0, 0)
         }),
-        position: new AMap.LngLat(120.587506, 31.313787),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        position: new AMap.LngLat(path[0][0], path[0][1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
         anchor: 'bottom-center',
         offset: new AMap.Pixel(0, 0)
       });
@@ -612,7 +676,7 @@ export default {
           // 图标取图偏移量
           imageOffset: new AMap.Pixel(0, 0)
         }),
-        position: new AMap.LngLat(120.586825, 31.314543),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        position: new AMap.LngLat(path[path.length - 1][0], path[path.length - 1][1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
         anchor: 'bottom-center',
         offset: new AMap.Pixel(0, 0)
       });
@@ -622,12 +686,16 @@ export default {
         content: "<div class='info'>终点</div>", //设置文本标注内容
       });
       // 新增逃生路线标记
-      this.safe_route = [marker1, marker2]
+      this.route_marker = [marker1, marker2]
-      this.map.add(this.safe_route);
+      this.map.add(this.route_marker);
+      // 关闭导航提示
+      this.show_walk_route = false;
     },
-    removeSafeRoute() { // 删除路径
+    removeNavRoute() { // 移除地图路线
-      this.map.remove([this.current_route]);
+      this.map.remove([this.current_route]); // 删除地图折线
-      this.map.remove(this.safe_route);
+      this.map.remove(this.route_marker); // 删除起始点标记
+      // 关闭导航提示
+      this.show_walk_route = true;
     },
     setTitleLayer() { // 生成瓦片图
       var layer = new AMap.TileLayer.Flexible({
@@ -806,7 +874,7 @@ export default {
       this.walk_route.clear();
       this.show_walk_route = true;
     },
-    infoWindowLocation(position) { // 监听前往按钮回调
+    infoWindowLocation(path) { // 监听前往按钮回调
       // TODO: 实际获取精确定位后导航到位置
       // // 判断是否在范围内
       // if (!this.isPointInRing()) {
@@ -814,12 +882,17 @@ export default {
       // } else {
       //   this.setWalkRoute({ lng: this.current_lng, lat: this.current_lat }, { lng: position[0], lat: position[1] })
       // }
-      if (this.walk_route) { // 清除前一条步行导航
+      // if (this.walk_route) { // 清除前一条步行导航
-        this.walk_route.clear();
+      //   this.walk_route.clear();
-      }
+      // }
       // 测试
       this.closeInfoWindow(); // 关闭弹框
-      this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
+      // this.setWalkRoute({ lng: 120.59014, lat: 31.310306 }, { lng: position[0], lat: position[1] });
+      if (this.current_route) { // 清除前一条步行导航
+        this.map.remove([this.current_route]); // 删除地图折线
+        this.map.remove(this.route_marker); // 删除起始点标记
+      }
+      this.addNavRoute(path)
     },
     setNavLayer({ key }, index) { // 选择地图图层显示
       this.isActive = index;