map_view_vue2 0.0.1 → 0.0.3

package/map_view_vue2.common.js

@@ -4535,7 +4535,7 @@ es_iterator_constructor_namespaceFn();
 ;// ./node_modules/core-js/modules/es.iterator.map.js
 es_iterator_map_namespaceFn();
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/map_view/mapView.vue?vue&type=template&id=007e62b0
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/map_view/mapView.vue?vue&type=template&id=4496a68c
 
 
 var render = function render() {
@@ -5004,6 +5004,18 @@ var render = function render() {
       "id": "map"
     }
   }), _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.mapLoading,
+      expression: "mapLoading"
+    }],
+    staticClass: "map-loading-mask"
+  }, [_c('span', {
+    staticClass: "map-loading-spinner"
+  }), _c('span', {
+    staticClass: "map-loading-text"
+  }, [_vm._v("地图加载中...")])]), _c('div', {
     staticClass: "dialog-overlay",
     class: {
       show: _vm.loadDialogVisible
@@ -5583,7 +5595,7 @@ var staticRenderFns = [function () {
   }, [_vm._v("📥")]), _c('div', [_c('h1', [_vm._v("加载地图")]), _c('p', [_vm._v("选择数据源并加载")])])]);
 }];
 
-;// ./src/package/map_view/mapView.vue?vue&type=template&id=007e62b0
+;// ./src/package/map_view/mapView.vue?vue&type=template&id=4496a68c
 
 ;// ./node_modules/core-js/modules/es.array.includes.js
 es_array_includes_namespaceFn();
@@ -64656,10 +64668,6 @@ register(lib);
       default: false
     },
     // 是否显示「加载地图」按钮与对话框。
-    showLoader: {
-      type: Boolean,
-      default: true
-    },
     // 固定地图查看器宽度：数字按 px，字符串原样使用（如 '600px' / '100%'）；不传保持铺满父容器。
     width: {
       type: [String, Number],
@@ -64688,6 +64696,10 @@ register(lib);
       // 地图查看器是否已完成初始化。
       sidebarWidth: 342,
       // 侧栏当前宽度（px），可通过右缘拖拽手柄调整。
+      loadingTasks: 0,
+      // 进行中的数据请求任务数（清单/文件拉取、解析等）。
+      olLoading: false,
+      // OpenLayers 图层渲染中（loadstart ~ loadend 之间）。
       dropVisible: false,
       // 是否显示全屏拖放遮罩层。
       sourceCategory: 'raster',
@@ -64819,6 +64831,10 @@ register(lib);
       // 地图画布背景色：传入时覆盖主题默认值（#map 的 background 引用该变量）。
       if (this.mapBackground) style['--map-bg'] = this.mapBackground;
       return style;
+    },
+    // 是否显示「地图加载中」遮罩：有数据请求任务或图层正在渲染时为 true。
+    mapLoading() {
+      return this.loadingTasks > 0 || this.olLoading;
     }
   },
   // 生命周期：挂载后初始化地图查看器、注册拖放加载与 URL 参数自动加载。
@@ -64951,6 +64967,13 @@ register(lib);
         this.updateStatus();
         this.$emit('view-changed', this.getViewState());
       });
+      // 图层渲染开始 / 结束：瓦片、图片等加载期间显示遮罩。
+      this.map.on('loadstart', () => {
+        this.olLoading = true;
+      });
+      this.map.on('loadend', () => {
+        this.olLoading = false;
+      });
 
       /* ============================================================
        * 状态栏 / 提示
@@ -65112,6 +65135,13 @@ register(lib);
       this.updateUrlTemplateHint();
       this.viewerReady = true;
     },
+    // 数据请求任务计数 +1 / -1：遮罩在任务数归零后隐藏。
+    pushLoading() {
+      this.loadingTasks += 1;
+    },
+    popLoading() {
+      this.loadingTasks = Math.max(0, this.loadingTasks - 1);
+    },
     // 按住侧栏右缘拖动：mousemove 实时更新宽度，限制在 280 ~ 620px 之间。
     startSidebarResize(e) {
       e.preventDefault();
@@ -65957,15 +65987,11 @@ register(lib);
       if (r1 || r2) throw new Error('不支持带旋转的世界文件');
       return [cx - dx / 2, cy + (h - 0.5) * dy, cx + (w - 0.5) * dx, cy - dy / 2];
     },
-    // 根据范围推断并提示 UTM/GK 分区对应的 EPSG。
-    updateZoneHint(extent) {
-      this.form.zoneHint = {
-        message: '',
-        options: []
-      };
-      if (!extent) return;
+    // 根据范围数值模式猜测中国高斯投影带号 EPSG（3度带/6度带）：命中返回候选码，未命中返回 null。
+    guessCrsFromExtent(extent) {
+      if (!extent) return null;
       const x = extent[2];
-      if (x <= 1e6 || x >= 7e7) return;
+      if (x <= 1e6 || x >= 7e7) return null;
       const zone = Math.round(x / 1e6);
       const options = [];
       if (zone >= 25 && zone <= 45) {
@@ -65980,13 +66006,22 @@ register(lib);
           label: `6度带 ${zone}，中央经线 ${zone * 6 - 3}°E（EPSG:${4491 + zone - 13}，含带号）`
         });
       }
-      if (options.length) {
-        this.form.dataCrs = options[0].code;
-        this.form.zoneHint = {
-          message: '检测到高斯带号坐标，可能是：',
-          options
-        };
-      }
+      if (!options.length) return null;
+      this.form.zoneHint = {
+        message: '检测到高斯带号坐标，可能是：',
+        options
+      };
+      return options[0].code;
+    },
+    // 根据范围推断并提示 UTM/GK 分区对应的 EPSG。
+    updateZoneHint(extent) {
+      this.form.zoneHint = {
+        message: '',
+        options: []
+      };
+      if (!extent) return;
+      const code = this.guessCrsFromExtent(extent);
+      if (code) this.form.dataCrs = code;
     },
     // 将已选世界文件应用到范围输入框。
     applyWorldFileToExtent() {
@@ -66060,95 +66095,109 @@ register(lib);
     },
     // 加载 PNG/JPG 图片地图（配世界文件或手动填写范围）。
     async loadImageLayer() {
-      if (!this.pickedImage) {
-        this.toast('请先选择图片文件', 'warn');
-        return;
-      }
-      const proj = this.ensureProjection(this.form.dataCrs);
-      if (!proj) {
-        this.toast('请先选择或注册有效的坐标系', 'warn');
-        return;
-      }
-      let {
-        width,
-        height
-      } = this.pickedImage;
-      if (!width || !height) {
-        try {
-          const d = await this.getImageSize(this.pickedImage.objectUrl);
-          width = this.pickedImage.width = d.width;
-          height = this.pickedImage.height = d.height;
-        } catch {
-          this.toast('无法读取图片尺寸', 'err');
+      this.pushLoading();
+      try {
+        if (!this.pickedImage) {
+          this.toast('请先选择图片文件', 'warn');
           return;
         }
-      }
-      const er = this.readExtentInputs();
-      if (!er.ok) return;
-      const extent = er.extent;
-      const layerUrl = URL.createObjectURL(this.pickedImage.file);
-      const layer = new layer_Image({
-        source: new ImageStatic({
-          url: layerUrl,
-          imageExtent: extent,
-          projection: proj
-        })
-      });
-      this.addMapEntry({
-        name: this.pickedImage.name,
-        kind: 'image',
-        layer,
-        extent,
-        projection: proj,
-        cleanup() {
-          URL.revokeObjectURL(layerUrl);
+        const proj = this.ensureProjection(this.form.dataCrs);
+        if (!proj) {
+          this.toast('请先选择或注册有效的坐标系', 'warn');
+          return;
         }
-      });
+        let {
+          width,
+          height
+        } = this.pickedImage;
+        if (!width || !height) {
+          try {
+            const d = await this.getImageSize(this.pickedImage.objectUrl);
+            width = this.pickedImage.width = d.width;
+            height = this.pickedImage.height = d.height;
+          } catch {
+            this.toast('无法读取图片尺寸', 'err');
+            return;
+          }
+        }
+        const er = this.readExtentInputs();
+        if (!er.ok) return;
+        const extent = er.extent;
+        const layerUrl = URL.createObjectURL(this.pickedImage.file);
+        const layer = new layer_Image({
+          source: new ImageStatic({
+            url: layerUrl,
+            imageExtent: extent,
+            projection: proj
+          })
+        });
+        this.addMapEntry({
+          name: this.pickedImage.name,
+          kind: 'image',
+          layer,
+          extent,
+          projection: proj,
+          cleanup() {
+            URL.revokeObjectURL(layerUrl);
+          }
+        });
+      } finally {
+        this.popLoading();
+      }
     },
     // 从 URL（含可选世界文件或范围参数）创建并加载图片地图。
     async addImageFromUrl({
       url,
       name,
       worldText,
-      extent
+      extent,
+      crs = null
     }) {
-      let meta;
+      this.pushLoading();
       try {
-        meta = await this.getImageSize(url);
-      } catch {
-        this.toast(`无法加载图片：${url}`, 'err');
-        return;
-      }
-      if (worldText) {
+        let meta;
         try {
-          const wf = this.parseWorldFile(worldText);
-          extent = this.extentFromWorldFile(meta.width, meta.height, wf);
-        } catch (err) {
-          this.toast(`世界文件解析失败：${err.message}`, 'err');
+          meta = await this.getImageSize(url);
+        } catch {
+          this.toast(`无法加载图片：${url}`, 'err');
+          return;
         }
+        if (worldText) {
+          try {
+            const wf = this.parseWorldFile(worldText);
+            extent = this.extentFromWorldFile(meta.width, meta.height, wf);
+          } catch (err) {
+            this.toast(`世界文件解析失败：${err.message}`, 'err');
+          }
+        }
+        extent = extent || [0, -meta.height, meta.width, 0];
+        // 坐标系决策：显式传入的 crs 优先；未传入时按范围数值模式猜测高斯带号，未命中默认 EPSG:3857。
+        this.updateZoneHint(extent);
+        const crsCode = crs || this.guessCrsFromExtent(extent) || 'EPSG:3857';
+        this.form.dataCrs = crsCode;
+        const proj = this.ensureProjection(crsCode) || this.PIXEL;
+        const layer = new layer_Image({
+          source: new ImageStatic({
+            url,
+            imageExtent: extent,
+            projection: proj
+          })
+        });
+        this.$refs.extMinx.value = extent[0];
+        this.$refs.extMiny.value = extent[1];
+        this.$refs.extMaxx.value = extent[2];
+        this.$refs.extMaxy.value = extent[3];
+        this.addMapEntry({
+          name,
+          kind: 'image',
+          layer,
+          extent,
+          projection: proj,
+          cleanup() {}
+        });
+      } finally {
+        this.popLoading();
       }
-      extent = extent || [0, -meta.height, meta.width, 0];
-      const proj = this.ensureProjection(this.form.dataCrs) || this.PIXEL;
-      const layer = new layer_Image({
-        source: new ImageStatic({
-          url,
-          imageExtent: extent,
-          projection: proj
-        })
-      });
-      this.$refs.extMinx.value = extent[0];
-      this.$refs.extMiny.value = extent[1];
-      this.$refs.extMaxx.value = extent[2];
-      this.$refs.extMaxy.value = extent[3];
-      this.updateZoneHint(extent);
-      this.addMapEntry({
-        name,
-        kind: 'image',
-        layer,
-        extent,
-        projection: proj,
-        cleanup() {}
-      });
     },
     // 处理用户选择的本地切片目录。
     onTilesDirChosen(fileList) {
@@ -66176,57 +66225,62 @@ register(lib);
     },
     // 加载本地 XYZ 切片目录为瓦片图层。
     loadTilesLayer() {
-      if (!this.pickedTiles || !this.pickedTiles.files.length) {
-        this.toast('请先选择本地切片XYZ目录', 'warn');
-        return;
-      }
-      const proj = this.ensureProjection(this.form.dataCrs);
-      if (!proj) {
-        this.toast('请先选择或注册有效的坐标系', 'warn');
-        return;
-      }
-      const tmap = this.scanTileFiles(this.pickedTiles.files, this.form.tilesTms);
-      if (!tmap.size) {
-        this.toast('所选目录中未找到 z/x/y 结构的切片文件', 'err');
-        return;
-      }
-      const stats = this.tileStats(tmap);
-      // 先按全球网格计算覆盖范围，再据此构建受限网格：
-      // 1) 层级钳制在 [minZ, maxZ]，过度缩放时使用最近可用层级（拉伸显示而非空白）
-      // 2) 网格范围限制在实际覆盖区（配合 wrapX:false），缩小时只枚举数据范围内的瓦片，避免卡顿
-      const worldGrid = this.buildTileGrid(proj, stats.maxZ, stats.minZ);
-      const covered = this.tilesExtent(worldGrid, stats);
-      const grid = this.buildTileGrid(proj, stats.maxZ, stats.minZ, covered);
-      const urlCache = new Map();
-      const source = new source_XYZ({
-        projection: proj,
-        tileGrid: grid,
-        wrapX: false,
-        minZoom: stats.minZ,
-        maxZoom: stats.maxZ,
-        tileUrlFunction: ([z, x, y]) => {
-          const f = tmap.get(`${z}/${x}/${y}`);
-          if (!f) return undefined;
-          let u = urlCache.get(f);
-          if (!u) {
-            u = URL.createObjectURL(f);
-            urlCache.set(f, u);
-          }
-          return u;
+      this.pushLoading();
+      try {
+        if (!this.pickedTiles || !this.pickedTiles.files.length) {
+          this.toast('请先选择本地切片XYZ目录', 'warn');
+          return;
         }
-      });
-      this.addMapEntry({
-        name: this.pickedTiles.name,
-        kind: 'tiles',
-        layer: new layer_Tile({
-          source
-        }),
-        extent: covered,
-        projection: proj,
-        cleanup() {
-          urlCache.forEach(u => URL.revokeObjectURL(u));
+        const proj = this.ensureProjection(this.form.dataCrs);
+        if (!proj) {
+          this.toast('请先选择或注册有效的坐标系', 'warn');
+          return;
         }
-      });
+        const tmap = this.scanTileFiles(this.pickedTiles.files, this.form.tilesTms);
+        if (!tmap.size) {
+          this.toast('所选目录中未找到 z/x/y 结构的切片文件', 'err');
+          return;
+        }
+        const stats = this.tileStats(tmap);
+        // 先按全球网格计算覆盖范围，再据此构建受限网格：
+        // 1) 层级钳制在 [minZ, maxZ]，过度缩放时使用最近可用层级（拉伸显示而非空白）
+        // 2) 网格范围限制在实际覆盖区（配合 wrapX:false），缩小时只枚举数据范围内的瓦片，避免卡顿
+        const worldGrid = this.buildTileGrid(proj, stats.maxZ, stats.minZ);
+        const covered = this.tilesExtent(worldGrid, stats);
+        const grid = this.buildTileGrid(proj, stats.maxZ, stats.minZ, covered);
+        const urlCache = new Map();
+        const source = new source_XYZ({
+          projection: proj,
+          tileGrid: grid,
+          wrapX: false,
+          minZoom: stats.minZ,
+          maxZoom: stats.maxZ,
+          tileUrlFunction: ([z, x, y]) => {
+            const f = tmap.get(`${z}/${x}/${y}`);
+            if (!f) return undefined;
+            let u = urlCache.get(f);
+            if (!u) {
+              u = URL.createObjectURL(f);
+              urlCache.set(f, u);
+            }
+            return u;
+          }
+        });
+        this.addMapEntry({
+          name: this.pickedTiles.name,
+          kind: 'tiles',
+          layer: new layer_Tile({
+            source
+          }),
+          extent: covered,
+          projection: proj,
+          cleanup() {
+            urlCache.forEach(u => URL.revokeObjectURL(u));
+          }
+        });
+      } finally {
+        this.popLoading();
+      }
     },
     // 更新在线 XYZ URL 模板提示。
     updateUrlTemplateHint() {
@@ -66311,41 +66365,46 @@ register(lib);
     },
     // 根据表单中的在线 XYZ 参数加载图层。
     async loadUrlLayer() {
-      const template = String(this.form.urlTemplate || '').trim();
-      if (!template) {
-        this.toast('请填写在线切片XYZ URL 模板', 'warn');
-        return;
-      }
-      if (String(this.form.urlMinzoom || '').trim() === '') {
-        this.toast('请填写最小层级', 'warn');
-        return;
-      }
-      if (String(this.form.urlMaxzoom || '').trim() === '') {
-        this.toast('请填写最大层级', 'warn');
-        return;
-      }
-      // 显示范围必填：坐标系可与切片坐标系不同，加载时自动换算
-      const extVals = [this.$refs.urlExtMinx.value, this.$refs.urlExtMiny.value, this.$refs.urlExtMaxx.value, this.$refs.urlExtMaxy.value];
-      if (extVals.some(v => v.trim() === '')) {
-        this.toast('请填写完整的范围：X/Y 的最小值和最大值', 'warn');
-        return;
-      }
-      const nums = extVals.map(Number);
-      if (!nums.every(Number.isFinite)) {
-        this.toast('范围数值无效', 'warn');
-        return;
-      }
-      const extentOpt = {
-        extent: nums,
-        crs: this.form.urlExtentCrs
-      };
-      const r = await this.createXyzEntry(template, this.form.dataCrs, null, null, extentOpt);
-      if (!r.entry) {
-        this.toast(r.error || '加载失败', 'warn');
-        return;
+      this.pushLoading();
+      try {
+        const template = String(this.form.urlTemplate || '').trim();
+        if (!template) {
+          this.toast('请填写在线切片XYZ URL 模板', 'warn');
+          return;
+        }
+        if (String(this.form.urlMinzoom || '').trim() === '') {
+          this.toast('请填写最小层级', 'warn');
+          return;
+        }
+        if (String(this.form.urlMaxzoom || '').trim() === '') {
+          this.toast('请填写最大层级', 'warn');
+          return;
+        }
+        // 显示范围必填：坐标系可与切片坐标系不同，加载时自动换算
+        const extVals = [this.$refs.urlExtMinx.value, this.$refs.urlExtMiny.value, this.$refs.urlExtMaxx.value, this.$refs.urlExtMaxy.value];
+        if (extVals.some(v => v.trim() === '')) {
+          this.toast('请填写完整的范围：X/Y 的最小值和最大值', 'warn');
+          return;
+        }
+        const nums = extVals.map(Number);
+        if (!nums.every(Number.isFinite)) {
+          this.toast('范围数值无效', 'warn');
+          return;
+        }
+        const extentOpt = {
+          extent: nums,
+          crs: this.form.urlExtentCrs
+        };
+        const r = await this.createXyzEntry(template, this.form.dataCrs, null, null, extentOpt);
+        if (!r.entry) {
+          this.toast(r.error || '加载失败', 'warn');
+          return;
+        }
+        this.form.urlInfo = '使用指定范围加载，已自动定位。';
+        this.addMapEntry(r.entry);
+      } finally {
+        this.popLoading();
       }
-      this.form.urlInfo = '使用指定范围加载，已自动定位。';
-      this.addMapEntry(r.entry);
     },
     // 由图层名生成稳定的矢量默认颜色。
     vectorColor(name) {
@@ -66781,120 +66840,125 @@ register(lib);
     },
     // 解析配对文件、套用 SLD 样式并加载为矢量图层组。
     async loadGeoJsonLayers() {
-      if (!this.pickedGeoJson || !this.pickedGeoJson.pairs.length) {
-        this.toast('请先选择包含 GeoJSON 文件的目录', 'warn');
-        return;
-      }
-      const format = new format_GeoJSON();
-      const allFeatures = [];
-      let firstProjection = null;
-      let firstCode = null;
-      let sldCount = 0;
-      let orderedPairs = this.pickedGeoJson.pairs;
-      const preparedPairs = [];
+      this.pushLoading();
       try {
-        if (this.pickedGeoJson.metadataFile) {
-          const ordered = await this.orderGeoJsonPairsByMetadata(this.pickedGeoJson.pairs, this.pickedGeoJson.metadataFile);
-          orderedPairs = ordered.pairs;
-          this.pickedGeoJson.metadataName = ordered.metadata && ordered.metadata.name ? ordered.metadata.name : null;
+        if (!this.pickedGeoJson || !this.pickedGeoJson.pairs.length) {
+          this.toast('请先选择包含 GeoJSON 文件的目录', 'warn');
+          return;
         }
-        for (const pair of orderedPairs) {
-          const text = await pair.file.text();
-          const object = JSON.parse(text);
-          // 优先使用每个文件自身声明的 CRS，避免不同文件坐标系不一致时被统一误读
-          const code = this.geoJsonCrsCode(object) || this.form.dataCrs;
-          const proj = this.ensureProjection(code);
-          if (!proj) throw new Error('无效坐标系：' + code);
-          let features = format.readFeatures(object, {
-            dataProjection: code,
-            featureProjection: code
-          });
-          if (firstProjection) {
-            if (proj.getCode() !== firstCode) {
-              for (const feature of features) {
-                const geometry = feature.getGeometry();
-                if (geometry) geometry.transform(proj, firstProjection);
+        const format = new format_GeoJSON();
+        const allFeatures = [];
+        let firstProjection = null;
+        let firstCode = null;
+        let sldCount = 0;
+        let orderedPairs = this.pickedGeoJson.pairs;
+        const preparedPairs = [];
+        try {
+          if (this.pickedGeoJson.metadataFile) {
+            const ordered = await this.orderGeoJsonPairsByMetadata(this.pickedGeoJson.pairs, this.pickedGeoJson.metadataFile);
+            orderedPairs = ordered.pairs;
+            this.pickedGeoJson.metadataName = ordered.metadata && ordered.metadata.name ? ordered.metadata.name : null;
+          }
+          for (const pair of orderedPairs) {
+            const text = await pair.file.text();
+            const object = JSON.parse(text);
+            // 优先使用每个文件自身声明的 CRS，避免不同文件坐标系不一致时被统一误读
+            const code = this.geoJsonCrsCode(object) || this.form.dataCrs;
+            const proj = this.ensureProjection(code);
+            if (!proj) throw new Error('无效坐标系：' + code);
+            let features = format.readFeatures(object, {
+              dataProjection: code,
+              featureProjection: code
+            });
+            if (firstProjection) {
+              if (proj.getCode() !== firstCode) {
+                for (const feature of features) {
+                  const geometry = feature.getGeometry();
+                  if (geometry) geometry.transform(proj, firstProjection);
+                }
               }
+            } else {
+              firstProjection = proj;
+              firstCode = proj.getCode();
             }
-          } else {
-            firstProjection = proj;
-            firstCode = proj.getCode();
-          }
-          if (pair.sld) {
-            const sldText = await pair.sld.text();
-            const styles = this.parseSldStyles(sldText);
-            if (styles) {
-              const labelProperty = this.sldLabelProperty(sldText);
-              const styleFunction = this.makeSldStyleFunction(styles, labelProperty);
-              for (const feature of features) {
-                feature.set('_sldStyle', styleFunction, true);
-                if (pair.layerTitle) feature.set('_layerName', pair.layerTitle, true);
+            if (pair.sld) {
+              const sldText = await pair.sld.text();
+              const styles = this.parseSldStyles(sldText);
+              if (styles) {
+                const labelProperty = this.sldLabelProperty(sldText);
+                const styleFunction = this.makeSldStyleFunction(styles, labelProperty);
+                for (const feature of features) {
+                  feature.set('_sldStyle', styleFunction, true);
+                  if (pair.layerTitle) feature.set('_layerName', pair.layerTitle, true);
+                }
+                sldCount++;
               }
-              sldCount++;
             }
+            preparedPairs.push({
+              pair,
+              features
+            });
+            allFeatures.push(...features);
           }
-          preparedPairs.push({
-            pair,
-            features
+        } catch (err) {
+          this.toast('GeoJSON 加载失败：' + err.message, 'err');
+          return;
+        }
+        if (!allFeatures.length) {
+          this.toast('所选文件中没有有效要素', 'warn');
+          return;
+        }
+        // 每个 GeoJSON 独立建层，便于左侧图层列表单独显示/隐藏
+        const layerRecords = preparedPairs.map(({
+          pair,
+          features
+        }) => {
+          const source = this.createReprojectingVectorSource(features, firstProjection);
+          const layer = new Vector({
+            source,
+            style: (feature, resolution) => this.defaultVectorStyle(feature, resolution)
           });
-          allFeatures.push(...features);
+          return {
+            name: pair.layerTitle || pair.file.name,
+            kind: 'geojson',
+            layer,
+            featureCount: features.length,
+            visible: true,
+            group: this.inferGeoJsonGroup(features),
+            groupVisible: true,
+            source
+          };
+        });
+        // 缺少 layer 属性的图层归入“0”组；只有确实存在“0”组时才归组，否则保持顶层普通图层
+        if (layerRecords.some(record => record.group === '0')) {
+          for (const record of layerRecords) {
+            if (!record.group) record.group = '0';
+          }
         }
-      } catch (err) {
-        this.toast('GeoJSON 加载失败：' + err.message, 'err');
-        return;
-      }
-      if (!allFeatures.length) {
-        this.toast('所选文件中没有有效要素', 'warn');
-        return;
-      }
-      // 每个 GeoJSON 独立建层，便于左侧图层列表单独显示/隐藏
-      const layerRecords = preparedPairs.map(({
-        pair,
-        features
-      }) => {
-        const source = this.createReprojectingVectorSource(features, firstProjection);
-        const layer = new Vector({
-          source,
-          style: (feature, resolution) => this.defaultVectorStyle(feature, resolution)
+        const layer = new Group({
+          layers: layerRecords.map(record => record.layer)
         });
-        return {
-          name: pair.layerTitle || pair.file.name,
+        this.addMapEntry({
+          name: this.pickedGeoJson.metadataName || this.pickedGeoJson.name,
           kind: 'geojson',
           layer,
-          featureCount: features.length,
-          visible: true,
-          group: this.inferGeoJsonGroup(features),
-          groupVisible: true,
-          source
-        };
-      });
-      // 缺少 layer 属性的图层归入“0”组；只有确实存在“0”组时才归组，否则保持顶层普通图层
-      if (layerRecords.some(record => record.group === '0')) {
-        for (const record of layerRecords) {
-          if (!record.group) record.group = '0';
-        }
+          sublayers: layerRecords.map(record => {
+            const rest = {
+              ...record
+            };
+            delete rest.source;
+            return rest;
+          }),
+          extent: this.featuresExtent(allFeatures),
+          projection: firstProjection,
+          sourceCrs: firstCode,
+          sources: layerRecords.map(record => record.source),
+          cleanup() {}
+        });
+        this.form.geojsonInfo = '已按 metadata.json 顺序加载 ' + orderedPairs.length + ' 个图层、' + allFeatures.length + ' 个要素，应用 ' + sldCount + ' 个 SLD 样式，数据坐标系 ' + firstCode + '。';
+      } finally {
+        this.popLoading();
       }
-      const layer = new Group({
-        layers: layerRecords.map(record => record.layer)
-      });
-      this.addMapEntry({
-        name: this.pickedGeoJson.metadataName || this.pickedGeoJson.name,
-        kind: 'geojson',
-        layer,
-        sublayers: layerRecords.map(record => {
-          const rest = {
-            ...record
-          };
-          delete rest.source;
-          return rest;
-        }),
-        extent: this.featuresExtent(allFeatures),
-        projection: firstProjection,
-        sourceCrs: firstCode,
-        sources: layerRecords.map(record => record.source),
-        cleanup() {}
-      });
-      this.form.geojsonInfo = '已按 metadata.json 顺序加载 ' + orderedPairs.length + ' 个图层、' + allFeatures.length + ' 个要素，应用 ' + sldCount + ' 个 SLD 样式，数据坐标系 ' + firstCode + '。';
     },
     // 切换视图坐标系并保持视野位置与比例。
     switchViewProjection() {
@@ -67082,17 +67146,17 @@ register(lib);
       this.addMapEntry(r.entry);
       return r.entry;
     },
-    // 从 URL 加载图片地图；可配世界文件（URL 或文本）与范围。
+    // 从 URL 加载图片地图；可配世界文件（URL 或文本）与范围。crs 未传时按范围自动猜测高斯带号，未命中默认 EPSG:3857。
     async loadImageFromUrl({
       url,
       name = null,
-      crs = 'EPSG:3857',
+      crs = null,
       worldFileUrl = null,
       worldText = null,
       extent = null
     } = {}) {
       if (!this.viewerReady) await this.waitViewerReady();
-      this.form.dataCrs = crs;
+      if (crs) this.form.dataCrs = crs;
       if (!worldText && worldFileUrl) {
         try {
           const r = await fetch(worldFileUrl);
@@ -67103,7 +67167,8 @@ register(lib);
         url: url,
         name: name || decodeURIComponent(String(url).split('/').pop() || '图片'),
         worldText: worldText,
-        extent: extent
+        extent: extent,
+        crs: crs
       });
       return this.activeEntry;
     },
@@ -67250,22 +67315,27 @@ register(lib);
     },
     // 按 autoLoad prop 自动加载数据源：type 为 manifest 加载矢量清单，为 image 加载 PNG 栅格地图。
     async processAutoLoad() {
-      const item = this.autoLoad;
-      if (!item || !item.url) return;
-      if (item.type === 'manifest') {
-        const r = await fetch(item.url);
-        if (!r.ok) throw new Error('获取失败：' + item.url + '（' + r.status + '）');
-        const manifest = await r.json();
-        await this.loadGeoJsonFromManifest(manifest, item.baseUrl || '');
-      } else if (item.type === 'image') {
-        await this.loadImageFromUrl({
-          url: item.url,
-          name: item.name || null,
-          crs: item.crs || 'EPSG:3857',
-          worldFileUrl: item.worldFile || null,
-          worldText: item.worldText || null,
-          extent: item.extent || null
-        });
+      this.pushLoading();
+      try {
+        const item = this.autoLoad;
+        if (!item || !item.url) return;
+        if (item.type === 'manifest') {
+          const r = await fetch(item.url);
+          if (!r.ok) throw new Error('获取失败：' + item.url + '（' + r.status + '）');
+          const manifest = await r.json();
+          await this.loadGeoJsonFromManifest(manifest, item.baseUrl || '');
+        } else if (item.type === 'image') {
+          await this.loadImageFromUrl({
+            url: item.url,
+            name: item.name || null,
+            crs: item.crs || null,
+            worldFileUrl: item.worldFile || null,
+            worldText: item.worldText || null,
+            extent: item.extent || null
+          });
+        }
+      } finally {
+        this.popLoading();
       }
     },
     // 应用明暗主题（初始值来自 theme prop，切换时发出 theme-changed 事件）。