fix: 下载zoom限制，切换瓦片grid显示问题

Hxy1992 · Jun 8, 2022 · c355e42 · c355e42
1 parent 083108f
commit c355e42
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 25 deletions.
diff --git a/packages/renderer/src/components/Home.vue b/packages/renderer/src/components/Home.vue
@@ -52,6 +52,8 @@
       :visible="saveVisible"
       :download-extent="downloadExtent"
       :base-layer="saveLayers"
+      :limit-max-zoom="limitMaxZoom"
+      :limit-min-zoom="limitMinZoom"
       @ok="save"
       @cancel="cancelSave"
     />
@@ -112,6 +114,8 @@ export default defineComponent({
       helpVisible: false,
       setVisible: false,
       saveLayers: [],
+      limitMinZoom: 1,
+      limitMaxZoom: 18,
     };
   },
   computed: {
@@ -167,6 +171,8 @@ export default defineComponent({
       }
       const {titleLayer} = map.getBaseMapConfig();
       this.saveLayers = titleLayer;
+      this.limitMaxZoom = titleLayer.getMaxZoom();
+      this.limitMinZoom = titleLayer.getMinZoom();
       this.saveVisible = true;
       map.fitExtent();
       return true;

diff --git a/packages/renderer/src/components/Save.vue b/packages/renderer/src/components/Save.vue
@@ -115,6 +115,14 @@ export default defineComponent({
       required: true,
       type: [Object, Array],
     },
+    limitMinZoom: {
+      required: true,
+      type: Number,
+    },
+    limitMaxZoom: {
+      required: true,
+      type: Number,
+    },
   },
   setup() {
 
@@ -175,7 +183,7 @@ export default defineComponent({
       if (isNaN(minZoom) || isNaN(maxZoom)) {
         return window.$message.warning('层级格式错误，请输入非负整数');
       }
-      if (minZoom >= maxZoom || minZoom < 0 || maxZoom > 18) {
+      if (minZoom >= maxZoom || minZoom < this.limitMinZoom || maxZoom > this.limitMaxZoom) {
         return window.$message.warning('层级格式错误');
       }
       const param = {

diff --git a/packages/renderer/src/utils/baseMap.js b/packages/renderer/src/utils/baseMap.js
@@ -51,11 +51,17 @@ export default class baseMap{
       // attribution: param.layer.attribution,
       ...param.layer.exteral,
     });
-    this.map.removeBaseLayer(this.map.getBaseLayer());
+    const oldBaseLayer = this.map.getBaseLayer();
+    if (oldBaseLayer && oldBaseLayer.config()?.debug) {
+      baseLayer.config({debug: true});
+    }
+    this.map.removeBaseLayer(oldBaseLayer);
     this.map.setBaseLayer(baseLayer);
     this.map.setSpatialReference({
       projection : param.layer.prejection,
     });
+
+    // testDraw(this.map.getBaseLayer(), {x:24,y:12,z:5}); // 测试-绘制瓦片外框
   }
   // 绘制矩形、编辑矩形位置
   startDraw() {
@@ -178,7 +184,6 @@ export default class baseMap{
 }
 
 let _testDraw;
-let _testPrj;
 /**
  * 根据行列号绘制瓦片外框
  * @param {*} tileLayer
@@ -188,18 +193,16 @@ export function testDraw(tileLayer, tileConfig) {
   if (!_testDraw) {
     const map = tileLayer.getMap();
     _testDraw = new maptalks.VectorLayer('test-vector').addTo(map);
-    _testPrj = _testDraw.getProjection();
   }
+  _testDraw.clear();
   const extent = calcExtentByTile(tileLayer, tileConfig);
-  const left = _testPrj.unproject({x:extent.xmin, y:extent.ymin});
-  const right = _testPrj.unproject({x:extent.xmax, y:extent.ymax});
   const polygon = new maptalks.Polygon([
     [
-      [left.x, -right.y],
-      [right.x, -right.y],
-      [right.x, -left.y],
-      [left.x, -left.y],
-      [left.x, -right.y],
+      [extent.xmin, extent.ymax],
+      [extent.xmax, extent.ymax],
+      [extent.xmax, extent.ymin],
+      [extent.xmin, extent.ymin],
+      [extent.xmin, extent.ymax],
     ],
   ], {
     visible : true,
@@ -215,6 +218,10 @@ export function testDraw(tileLayer, tileConfig) {
       'lineWidth' : 1,
       'polygonFill' : 'rgb(135,196,240)',
       'polygonOpacity' : 0.3,
+      'textName'  : `X: ${tileConfig.x}, Y: ${tileConfig.y}, Z: ${tileConfig.z}`,
+      'textFill' : '#34495e',
+      'textPlacement' : 'polygon',
+      'textSize'  : 16,
     },
   });
   _testDraw.addGeometry(polygon);
@@ -231,16 +238,24 @@ export function calcExtentByTile(tileLayer, tileConfig) {
   const { x, y, z } = tileConfig;
   const { width, height } = tileLayer.getTileSize();
   const spatialReference = tileLayer.getSpatialReference();
+  const prj = spatialReference.getProjection();
   const resolution = spatialReference.getResolution(z);
   const fullExtent = spatialReference.getFullExtent();
-  const xmin = resolution * x * width + fullExtent.xmin;
-  const xmax = xmin + width * resolution;
-  const ymin = resolution * y * height + fullExtent.ymin;
-  const ymax = ymin + height * resolution;
-  return {
-    xmin,
-    xmax,
-    ymin,
-    ymax,
-  };
+
+  if (spatialReference.getProjection().code === 'BAIDU') {
+    throw new Error('暂不支持百度');
+  } else {
+    const xmin = resolution * x * width + fullExtent.xmin;
+    const xmax = xmin + width * resolution;
+    const ymin = resolution * y * height + fullExtent.ymin;
+    const ymax = ymin + height * resolution;
+    const leftBottom = prj.unproject({x:xmin, y:ymin});
+    const rightTop = prj.unproject({x:xmax, y:ymax});
+    return {
+      xmin: leftBottom.x,
+      xmax: rightTop.x,
+      ymin: -leftBottom.y,
+      ymax: -rightTop.y,
+    };
+  }
 }
diff --git a/packages/renderer/src/utils/fileSaveTms.js b/packages/renderer/src/utils/fileSaveTms.js
@@ -2,8 +2,6 @@
 import { setState } from './progress';
 import { downloadLoop } from './download';
 
-// import {testDraw} from './baseMap';
-
 /**
  * 下载TMS瓦片
  */
@@ -39,8 +37,6 @@ export class TileTMS {
         this.apiEnsureDirSync(temppath);
         const savePath = temppath + '\\' + tile.y + pictureType;
         list.push({zoom: tile.z, url:tile.url, savePath});
-
-        // testDraw(this.titleLayer, tile); // 测试-绘制瓦片外框
       }
     }
     return list;