fix 访问数据结构调整

hookehuyr
Commit 6e901f12a44fd18dc33d512c6f17ab6908ad96de 6e901f12 1 parent 7ad6c2b1
Showing 1 changed file with 105 additions and 113 deletions
src/views/index.vue
--- a/src/views/index.vue
View file @6e901f1
+++ b/src/views/index.vue
View file @6e901f1
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-30 17:33:58
+ * @LastEditTime: 2023-07-04 14:50:06
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 地图主体页面
 -->
@@ -214,6 +214,18 @@ export default {
       navList: [],
       navKey: '',
       markerSum: [], // marker合集
+      titleLayerSet: {
+        17: {
+          x: [109439, 109441],
+          y: [53519, 53521]
+        },
+        18: {
+          x: [218879, 218882],
+          y: [107039, 107042]
+        }
+      },
+      defaultZoom: 18,
+      defaultCenter: [120.587382, 31.313900]
     }
   },
   mounted() {
@@ -297,9 +309,8 @@ export default {
       this.closeInfoWindow();
       setTimeout(() => {
         // 地图zooms调整
-        this.map.setZoom(18);
+        this.map.setZoom(this.defaultZoom);
-        // this.map.setZoomAndCenter(18, [this.xys_lng, this.xys_lat]);
+        this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
-        this.map.setZoomAndCenter(18, [120.587382, 31.313900]);
       }, 100);
       this.removeNavRoute()
     },
@@ -354,42 +365,42 @@ export default {
     removeLayer () {
       this.map.remove(this.markerSum);
     },
-    setMapBoundary() { // 地图描边
+    // setMapBoundary() { // 地图描边
-      new AMap.Polygon({
+    //   new AMap.Polygon({
-        cursor: 'pointer',
+    //     cursor: 'pointer',
-        bubble: true,
+    //     bubble: true,
-        path: [[120.587704, 31.312785], [120.587669, 31.313028], [120.587554, 31.313086], [120.586883, 31.313019], [120.586826, 31.314066], [120.586736, 31.314426], [120.585872, 31.314466], [120.585675, 31.315276], [120.585817, 31.315397], [120.586251, 31.31542], [120.586229, 31.31618], [120.588248, 31.316367], [120.588533, 31.314761], [120.588479, 31.31474], [120.588482, 31.314172], [120.588251, 31.314145], [120.588337, 31.313184], [120.588337, 31.313184], [120.588154, 31.313163], [120.588152, 31.312835]],
+    //     path: [[120.587704, 31.312785], [120.587669, 31.313028], [120.587554, 31.313086], [120.586883, 31.313019], [120.586826, 31.314066], [120.586736, 31.314426], [120.585872, 31.314466], [120.585675, 31.315276], [120.585817, 31.315397], [120.586251, 31.31542], [120.586229, 31.31618], [120.588248, 31.316367], [120.588533, 31.314761], [120.588479, 31.31474], [120.588482, 31.314172], [120.588251, 31.314145], [120.588337, 31.313184], [120.588337, 31.313184], [120.588154, 31.313163], [120.588152, 31.312835]],
-        map: this.map,
+    //     map: this.map,
-        fillOpacity: 0.5,
+    //     fillOpacity: 0.5,
-        strokeWeight: 1,
+    //     strokeWeight: 1,
-        fillColor: '#CFE7AA'
+    //     fillColor: '#CFE7AA'
-      });
+    //   });
-    },
+    // },
-    isPointInRing() { // 是否在景区范围
+    // isPointInRing() { // 是否在景区范围
-      let isPointInRing = AMap.GeometryUtil.isPointInRing([this.current_lng, this.current_lat], [
+    //   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]
+    //     [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
-      ]);
+    //   ]);
-      return isPointInRing
+    //   return isPointInRing
-    },
+    // },
-    setLocation() { // 开启定位服务
+    // setLocation() { // 开启定位服务
-      // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
+    //   // this.map.addControl(this.geolocation); // 添加定位图标 自动跳转当前位置
-      if (!this.current_lng || !this.current_lat) {
+    //   if (!this.current_lng || !this.current_lat) {
-        this.getLocation()
+    //     this.getLocation()
-      } else {
+    //   } else {
-        // 使用纠正偏移后的地址，打一个定位标记
+    //     // 使用纠正偏移后的地址，打一个定位标记
-        var marker = new AMap.Marker({
+    //     var marker = new AMap.Marker({
-          position: new AMap.LngLat(this.current_lng, this.current_lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+    //       position: new AMap.LngLat(this.current_lng, this.current_lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        });
+    //     });
-        this.map.add(marker);
+    //     this.map.add(marker);
-        // 定位到地图中心-西园寺
+    //     // 定位到地图中心-西园寺
-        this.map.setCenter([120.587334, 31.314823]);
+    //     this.map.setCenter([120.587334, 31.314823]);
-        // 判断是否在范围内
+    //     // 判断是否在范围内
-        if (!this.isPointInRing()) {
+    //     if (!this.isPointInRing()) {
-          this.dialog_show = true;
+    //       this.dialog_show = true;
-          this.dialog_text = '您不在景区范围内';
+    //       this.dialog_text = '您不在景区范围内';
-        }
+    //     }
-      }
+    //   }
-    },
+    // },
     getLocation() { // 获取经纬度
       AMap.plugin(['AMap.Geolocation'], () => {
         this.geolocation = new AMap.Geolocation(this.location_options);
@@ -418,10 +429,10 @@ export default {
     addSafeRoute() { // 新增路径
       // 行动路线
       var path = [
-        [120.587512, 31.313796],
+        [120.586841, 31.314543],
-        [120.587495, 31.314204],
         [120.586862, 31.314304],
-        [120.586841, 31.314543]
+        [120.587495, 31.314204],
+        [120.587512, 31.313796],
       ];
       // 生成折线地图路径
       this.current_route = new AMap.Polyline({
@@ -458,7 +469,7 @@ export default {
       marker1.setLabel({
         direction: 'right',
         offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
-        content: "<div class='info'>起点</div>", //设置文本标注内容
+        content: "<div class='info'>终点</div>", //设置文本标注内容
       });
       var marker2 = new AMap.Marker({
         icon: new AMap.Icon({
@@ -476,7 +487,7 @@ export default {
       marker2.setLabel({
         direction: 'right',
         offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
-        content: "<div class='info'>终点</div>", //设置文本标注内容
+        content: "<div class='info'>起点</div>", //设置文本标注内容
       });
       // 新增逃生路线标记
       this.route_marker = [marker1, marker2]
@@ -554,30 +565,28 @@ export default {
       // 关闭导航提示
       this.show_walk_route = true;
     },
+    computedMapSource(x, y, z) { // 根据图层信息生成图层实际地址
+      return `images/tiles/${z}/${x}_${y}.png`
+    },
     setTitleLayer() { // 生成瓦片图
+      const _this = this;
       var layer = new AMap.TileLayer.Flexible({
         cacheSize: 50,
         opacity: 1,
         zIndex: 100,
         createTile: function (x, y, z, success, fail) {
-          if (z === 17) {
+          // 控制地图等级显示图片范围-过滤不显示的图层渲染
-            if (x < 109439 || x > 109441) {
+          for (const key in _this.titleLayerSet) {
-              fail()
+            if (z == key) {
-              return;
+              const scope = _this.titleLayerSet[key];
-            }
+              if (x < scope.x[0] || x > scope.x[1]) {
-            if (y < 53519 || y > 53521) {
-              fail()
-              return;
-            }
-          }
-          if (z === 18) {
-            if (x < 218879 || x > 218882) {
               fail()
-              return;
+                return;
-            }
+              }
-            if (y < 107039 || y > 107042) {
+              if (y < scope.y[0] || y > scope.y[1]) {
-              fail()
+                fail()
-              return;
+                return;
+              }
             }
           }
@@ -590,26 +599,9 @@ export default {
             fail()
           };
-          img.src = `images/tiles/${z}/${x}_${y}.png`
+          // img.src = `images/tiles/${z}/${x}_${y}.png`;
+          img.src = _this.computedMapSource(x, y, z);
         },
-        // createTile: function (x, y, z, success, fail) {
-        //   console.warn(z);
-        //     if ((x + y) % 3) {
-        //         fail();
-        //         return;
-        //     }
-
-        //     var img = document.createElement('img');
-        //     img.onload = function () {
-        //         success(img)
-        //     };
-        //     img.crossOrigin = "anonymous";// 必须添加，同时图片要有跨域头
-        //     img.onerror = function () {
-        //         fail()
-        //     };
-
-        //     img.src = 'https://a.amap.com/jsapi_demos/static/images/amap.png';
-        // }
       });
       this.map.addLayer(layer);
@@ -642,15 +634,15 @@ export default {
     },
     // 限制地图范围
-    lockMapBounds() {
+    // lockMapBounds() {
-      // var bounds = this.map.getBounds();
+    //   // var bounds = this.map.getBounds();
-      var myBounds = new AMap.Bounds(
+    //   var myBounds = new AMap.Bounds(
-        [120.583246, 31.31645],
+    //     [120.583246, 31.31645],
-        [120.589973, 31.311949]
+    //     [120.589973, 31.311949]
-      );
+    //   );
-      this.map.setLimitBounds(myBounds);
+    //   this.map.setLimitBounds(myBounds);
-    },
+    // },
     showInfoClick(e) {
       // console.log(e);
       var zoom = this.map.getZoom(); //获取当前地图级别
@@ -667,30 +659,30 @@ export default {
       // 关闭弹出底部导航弹框
       this.show_nav_popup = false;
     },
-    setWalkRoute(start = { lng: 120.587799, lat: 31.313276 }, end = { lng: 120.587912, lat: 31.315169 }) {
+    // setWalkRoute(start = { lng: 120.587799, lat: 31.313276 }, end = { lng: 120.587912, lat: 31.315169 }) {
-      //步行导航
+    //   //步行导航
-      let walking_CallBack = (result) => {
+    //   let walking_CallBack = (result) => {
-        if (result.type === 'complete') {
+    //     if (result.type === 'complete') {
-          console.warn(result);
+    //       console.warn(result);
-          console.warn('绘制步行路线完成');
+    //       console.warn('绘制步行路线完成');
-        } else {
+    //     } else {
-          console.error('步行路线数据查询失败' + result);
+    //       console.error('步行路线数据查询失败' + result);
-        }
+    //     }
-      }
+    //   }
-      AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
+    //   AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
-        this.walk_route = new AMap.Walking({
+    //     this.walk_route = new AMap.Walking({
-          map: this.map,
+    //       map: this.map,
-        }); //构造步行导航类
+    //     }); //构造步行导航类
-        AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
+    //     AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
-        //根据起、终点坐标规划步行路线
+    //     //根据起、终点坐标规划步行路线
-        this.walk_route.search(new AMap.LngLat(start.lng, start.lat), new AMap.LngLat(end.lng, end.lat));
+    //     this.walk_route.search(new AMap.LngLat(start.lng, start.lat), new AMap.LngLat(end.lng, end.lat));
-      });
+    //   });
-      this.show_walk_route = false;
+    //   this.show_walk_route = false;
-    },
+    // },
-    removeWalkRoute() {
+    // removeWalkRoute() {
-      this.walk_route.clear();
+    //   this.walk_route.clear();
-      this.show_walk_route = true;
+    //   this.show_walk_route = true;
-    },
+    // },
     infoWindowLocation(path) { // 监听前往按钮回调
       // TODO: 实际获取精确定位后导航到位置
       // // 判断是否在范围内