fix

hookehuyr
Commit 419e525151170c77f4b414b70c6e6d6bbae0b145 419e5251 1 parent 4c25cc5b
Showing 1 changed file with 43 additions and 31 deletions
src/views/inner.vue
--- a/src/views/inner.vue
View file @419e525
+++ b/src/views/inner.vue
View file @419e525
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-24 15:06:47
+ * @LastEditTime: 2023-07-24 16:11:12
  * @FilePath: /map-demo/src/views/inner.vue
  * @Description: 地图主体页面
 -->
@@ -252,16 +252,16 @@ export default {
       navList: [],
       navKey: '',
       markerSum: [], // marker合集
-      titleLayerSet: {
+      // titleLayerSet: {
-        17: {
+      //   17: {
-          x: [109439, 109441],
+      //     x: [109439, 109441],
-          y: [53519, 53521]
+      //     y: [53519, 53521]
-        },
+      //   },
-        18: {
+      //   18: {
-          x: [218879, 218882],
+      //     x: [218879, 218882],
-          y: [107039, 107042]
+      //     y: [107039, 107042]
-        }
+      //   }
-      },
+      // },
       defaultZoom: 18,
       defaultCenter: [120.587382, 31.313900],
       mapTiles: [],
@@ -269,7 +269,6 @@ export default {
   },
   async mounted() {
     const code = this.$route.query.id;
-    // const code = '362800';
     const { data } = await mapAPI({i: code});
     data.list = data.list.concat(map_yard);
     data.list = data.list.concat(map_members);
@@ -284,14 +283,6 @@ export default {
     this.getLocation()
     // 设置贴片地图
     this.setTitleLayer();
-    // 每隔5分钟刷新地图
-    // setInterval(() => {
-    //   this.map.resize();
-    // }, 1000 * 60 * 1);
-    // setInterval(() => {
-    //   this.map.resize();
-    //   console.warn(0);
-    // }, 1000 * 10);
   },
   watch: {
     show_popup(val) {
@@ -523,18 +514,16 @@ export default {
           this.dialog_show = true;
           this.dialog_text = '您不在景区范围内';
         } else {
+          // this.current_lng = '120.587643'
+          // this.current_lat = '31.314853'
           // 使用纠正偏移后的地址，打一个定位标记
-          var marker = new AMap.Marker({
+          var marker = new AMap.LabelMarker({
-            icon: new AMap.Icon({
+            icon: {
               image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
-              size: new AMap.Size(40, 40),
+              anchor: 'bottom-center',
-              // 图标所用图片大小
+              size: [36, 36],
-              imageSize: new AMap.Size(40, 40),
+            },
-              // 图标取图偏移量
-              imageOffset: new AMap.Pixel(0, 0)
-            }),
             position: new AMap.LngLat(this.current_lng, this.current_lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-            offset: new AMap.Pixel(-20, -20)
           });
           this.map.add(marker);
           // 定位到地图中心-西园寺
@@ -802,6 +791,29 @@ export default {
       }
     },
     setTitleLayer() { // 生成瓦片图
+      // 获取瓦片图渲染范围
+      function getFirstProperty(obj) {
+        for (var prop in obj) {
+          return prop;
+        }
+      }
+      function getLastProperty(obj) {
+        var props = [];
+        for (var prop in obj) {
+          props.push(prop);
+        }
+        return props[props.length - 1];
+      }
+      let obj_scope = {};
+      for (const key in this.mapTiles) {
+        const element = this.mapTiles[key];
+        let first = getFirstProperty(element).split('-');
+        let last = getLastProperty(element).split('-');
+        obj_scope[key] = {
+          x: [first[0], last[0]],
+          y: [first[1], last[1]]
+        }
+      }
       const _this = this;
       var layer = new AMap.TileLayer.Flexible({
         cacheSize: 50,
@@ -809,9 +821,9 @@ export default {
         zIndex: 100,
         createTile: function (x, y, z, success, fail) {
           // 控制地图等级显示图片范围-过滤不显示的图层渲染
-          for (const id in _this.titleLayerSet) {
+          for (const id in obj_scope) {
             if (z == id) {
-              const scope = _this.titleLayerSet[id];
+              const scope = obj_scope[id];
               if (x < scope.x[0] || x > scope.x[1]) {
               fail()
                 return;