fix：修改地图放大层级

src/components/map/fssm-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:46:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-01-07 17:07:28
+ * @LastEditTime: 2025-03-28 13:51:38
  * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -76,6 +76,11 @@ export default {
       type: String,
       default: "10",
     },
+    // 接受传过来的地图最大层级
+    maxZoom: {
+      type: Number,
+      default: 18,
+    },
     // 是否显示绘制多边形功能
     showDraw: {
       type: Boolean,
@@ -293,7 +298,7 @@ export default {
           zoom: this.zoom, //图层缩放大小
           projection: "EPSG:4326",
           minZoom: 7,
-          maxZoom: 18,
+          maxZoom: this.maxZoom,
         }),
         // 内网
         // layers: [tianditu_cva_c, tianditu_vec_c, tianditu_img_c],
@@ -307,6 +312,19 @@ export default {
         source: new XYZ({
           url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
           // projection: "EPSG:4326",
+          tileLoadFunction: (tile, src) => {
+            const tileCoord = tile.getTileCoord();
+            let zoom = tileCoord[0];
+            if (zoom > 18) {
+              // 当缩放层级大于 18 时，使用 18 层的瓦片
+              zoom = 18;
+              const scale = Math.pow(2, tileCoord[0] - 18);
+              const newX = Math.floor(tileCoord[1] / scale);
+              const newY = Math.floor(tileCoord[2] / scale);
+              src = `https://webst01.is.autonavi.com/appmaptile?style=6&x=${newX}&y=${newY}&z=${zoom}`;
+            }
+            tile.getImage().src = src;
+          },
         }),
         visible: false,
       });
@@ -323,6 +341,19 @@ export default {
           source: new XYZ({
             url: "http://10.60.5.242:25003/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
             // projection: "EPSG:4326",
+            tileLoadFunction: (tile, src) => {
+              const tileCoord = tile.getTileCoord();
+              let zoom = tileCoord[0];
+              if (zoom > 18) {
+                // 当缩放层级大于 18 时，使用 18 层的瓦片
+                zoom = 18;
+                const scale = Math.pow(2, tileCoord[0] - 18);
+                const newX = Math.floor(tileCoord[1] / scale);
+                const newY = Math.floor(tileCoord[2] / scale);
+                src = `http://10.60.5.242:25003/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x=${newX}&y=${newY}&z=${zoom}`;
+              }
+              tile.getImage().src = src;
+            },
           }),
           visible: true,
         });
@@ -332,6 +363,19 @@ export default {
           source: new XYZ({
             url: "http://10.60.5.242:25033/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
             // projection: "EPSG:4326",
+            tileLoadFunction: (tile, src) => {
+              const tileCoord = tile.getTileCoord();
+              let zoom = tileCoord[0];
+              if (zoom > 18) {
+                // 当缩放层级大于 18 时，使用 18 层的瓦片
+                zoom = 18;
+                const scale = Math.pow(2, tileCoord[0] - 18);
+                const newX = Math.floor(tileCoord[1] / scale);
+                const newY = Math.floor(tileCoord[2] / scale);
+                src = `http://10.60.5.242:25033/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x=${newX}&y=${newY}&z=${zoom}`;
+              }
+              tile.getImage().src = src;
+            },
           }),
           visible: true,
         });
@@ -347,6 +391,20 @@ export default {
           source: new XYZ({
             url: "https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
             // projection: "EPSG:4326",
+            subdomains: ["1", "2", "3", "4"],
+            tileLoadFunction: (tile, src) => {
+              const tileCoord = tile.getTileCoord();
+              let zoom = tileCoord[0];
+              if (zoom > 18) {
+                // 当缩放层级大于 18 时，使用 18 层的瓦片
+                zoom = 18;
+                const scale = Math.pow(2, tileCoord[0] - 18);
+                const newX = Math.floor(tileCoord[1] / scale);
+                const newY = Math.floor(tileCoord[2] / scale);
+                src = `https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=${newX}&y=${newY}&z=${zoom}`;
+              }
+              tile.getImage().src = src;
+            },
           }),
           visible: true,
         });

src/views/xj/inspection/map-diease/index.vue

@@ -2,39 +2,57 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-03-25 11:10:16
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-03-25 16:25:50
+ * @LastEditTime: 2025-03-28 14:14:07
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\map-diease\index.vue
  * @Description: 地图展示病害-首页
 -->
 <template>
   <div class="map-diease-content">
     <div class="diease-form">
-      <el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" label-width="100px">
+      <el-form
+        :model="queryParams"
+        :rules="rules"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        label-width="100px"
+      >
         <el-form-item label="道路名称" prop="segmentId">
-          <el-select v-model="queryParams.segmentId" placeholder="请选择路段" filterable clearable>
+          <el-select
-            <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
+            v-model="queryParams.segmentId"
+            placeholder="请选择路段"
+            filterable
+            clearable
+          >
+            <el-option
+              v-for="item in segmentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="距离" prop="maxLength">
-          <el-input placeholder="请输入内容" v-model="queryParams.maxLength">
-            <template slot="prepend">大于:</template>
-          </el-input>
-        </el-form-item>
         <el-form-item label="">
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">筛选</el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >筛选</el-button
+          >
         </el-form-item>
       </el-form>
     </div>
-    <fssm-map class="map-diease-map"></fssm-map>
+    <fssm-map class="map-diease-map" :maxZoom="22"></fssm-map>
   </div>
 </template>
 
 <script>
-import { getSegment } from '@/api/xj/mapDisease'
+import { getSegment } from "@/api/xj/mapDisease";
-import fssmMap from '@/components/map/fssm-map.vue'
+import fssmMap from "@/components/map/fssm-map.vue";
 export default {
   components: { fssmMap },
-  name: 'MapDiease',
+  name: "MapDiease",
   data() {
     return {
       // 搜索表单
@@ -47,19 +65,19 @@ export default {
       // 表单规则
       rules: {
         maxLength: [
-          { required: false, message: '请选择路段', trigger: 'blur' },
+          { required: false, message: "请选择路段", trigger: "blur" },
           {
             pattern: /^\d+$/,
             message: "请输入非负整数",
-          }
+          },
-        ]
+        ],
       },
       // 道路名称下拉数据
-      segmentList: []
+      segmentList: [],
-    }
+    };
   },
   created() {
-    this.getSegmentList()
+    this.getSegmentList();
   },
   methods: {
     /**
@@ -81,7 +99,7 @@ export default {
      * @return {*}
      */
     handleQuery() {
-      this.$refs.queryForm.validate(valid => {
+      this.$refs.queryForm.validate((valid) => {
         if (valid) {
           this.drawMapPoint();
         }
@@ -93,11 +111,9 @@ export default {
      * @param {*}
      * @return {*}
      */
-    drawMapPoint() {
+    drawMapPoint() {},
-
+  },
-    }
+};
-  }
-}
 </script>
 
 <style lang="scss" scoped>