【fix】修复VectorTileSuperMapRest tileLoadFunction 传入不起作用的问题，修复ol webmap打开wmts服务比例尺不对的问题 review by qiwei

songyumeng · songyumeng · commit 55f9e4c706d6 · 2021-09-12T01:58:44.000+08:00
diff --git a/src/openlayers/mapping/WebMap.js b/src/openlayers/mapping/WebMap.js
@@ -90,7 +90,7 @@ const dpiConfig = {
  * @param {string} [options.proxy] - 代理地址，当域名不一致，请求会加上代理。避免跨域
  * @param {string} [options.tileFormat] - 地图瓦片出图格式，png/webp
  * @param {function} [options.mapSetting.mapClickCallback] - 地图被点击的回调函数
- * @param {function} [options.mapSetting.overlays] - 地图的overlayer
+ * @param {function} [options.mapSetting.overlays] - 地图的overlayerp
  * @param {function} [options.mapSetting.controls] - 地图的控件
  * @param {function} [options.mapSetting.interactions] - 地图控制的参数
  * @extends {ol/Observable}
@@ -697,8 +697,8 @@ export class WebMap extends Observable {
           let visibleScales, minScale, maxScale;
           if (baseLayer.layerType === 'WMTS') {
               visibleScales = baseLayer.scales;
-              minScale = mapInfo.minScale.split(':')[1];
-              maxScale = mapInfo.maxScale.split(':')[1];
+              minScale = +mapInfo.minScale.split(':')[1];
+              maxScale = +mapInfo.maxScale.split(':')[1];
           } else {
               const scales = this.scales.map((scale) => {
                   return 1 / scale.split(':')[1];
@@ -708,19 +708,16 @@ export class WebMap extends Observable {
               } else {
                 visibleScales = scales;
               }
-              minScale = 1 / mapInfo.minScale.split(':')[1];
-              maxScale = 1 / mapInfo.maxScale.split(':')[1];
-          }
-          if (minScale > maxScale) {
-            let temp = null;
-            temp = minScale;
-            minScale = maxScale;
-            maxScale = temp;
+              minScale = 1 / +mapInfo.minScale.split(':')[1];
+              maxScale = 1 / +mapInfo.maxScale.split(':')[1];
           }
           const minVisibleScale = this.findNearest(visibleScales, minScale);
           const maxVisibleScale = this.findNearest(visibleScales, maxScale);
-          const minZoom = visibleScales.indexOf(minVisibleScale);
-          const maxZoom = visibleScales.indexOf(maxVisibleScale);
+          let minZoom = visibleScales.indexOf(minVisibleScale);
+          let maxZoom = visibleScales.indexOf(maxVisibleScale);
+          if (minZoom > maxZoom) {
+              [minZoom, maxZoom] = [maxZoom, minZoom];
+          }
           if (minZoom !== 0 && maxZoom !== visibleScales.length - 1) {
               this.map.setView(
                   new View(
@@ -1641,6 +1638,10 @@ export class WebMap extends Observable {
             requestEncoding: layerInfo.requestEncoding || 'KVP',
             tileGrid: this.getWMTSTileGrid(extent, layerInfo.scales, unit, layerInfo.dpi, layerInfo.origin, layerInfo.matrixIds),
             tileLoadFunction: function (imageTile, src) {
+                if (src.indexOf('tianditu.gov.cn') >= 0) {
+                    imageTile.getImage().src = `${src}&tk=${CommonUtil.getParameters(layerInfo.url)['tk']}`;
+                    return;
+                }
                 imageTile.getImage().src = src
             }
         })
diff --git a/src/openlayers/overlay/VectorTileSuperMapRest.js b/src/openlayers/overlay/VectorTileSuperMapRest.js
@@ -56,8 +56,8 @@ export class VectorTileSuperMapRest extends VectorTile {
             tileClass: options.tileClass,
             tileGrid: options.tileGrid,
             tilePixelRatio: options.tilePixelRatio,
-            tileUrlFunction: options.format instanceof MVT && options.style ? zxyTileUrlFunction : tileUrlFunction,
-            tileLoadFunction: options.format instanceof MVT ? mvtTileLoadFunction : tileLoadFunction,
+            tileUrlFunction: options.tileUrlFunction || (options.format instanceof MVT && options.style ? zxyTileUrlFunction : tileUrlFunction),
+            tileLoadFunction: options.tileLoadFunction || (options.format instanceof MVT ? mvtTileLoadFunction : tileLoadFunction),
             wrapX: options.wrapX !== undefined ? options.wrapX : false,
             tileSize: options.tileSize || null,
             zDirection: ['4', '5'].indexOf(Util.getOlVersion()) > -1 ? null : 0
diff --git a/test/openlayers/overlay/VectorTileSuperMapRestSpec.js b/test/openlayers/overlay/VectorTileSuperMapRestSpec.js
@@ -6,7 +6,7 @@ import VectorTileLayer from 'ol/layer/VectorTile';
 
 var url = GlobeParameter.ChinaURL;
 describe('openlayers_VectorTileSuperMapRest', () => {
-    var testDiv, map, vectorTileOptions, vectorTileSource,originalTimeout;
+    var testDiv, map, vectorTileOptions, vectorTileSource,originalTimeout,vectorLayer;
     beforeAll(() => {
         testDiv = window.document.createElement("div");
         testDiv.setAttribute("id", "map");
@@ -16,6 +16,23 @@ describe('openlayers_VectorTileSuperMapRest', () => {
         testDiv.style.width = "500px";
         testDiv.style.height = "500px";
         window.document.body.appendChild(testDiv);
+        
+    });
+    beforeEach(() => {
+        originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+        jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
+    });
+    afterEach(() => {
+        if (vectorLayer) {
+            map.removeLayer(vectorLayer);
+        }
+        jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+    });
+    afterAll(() => {
+        window.document.body.removeChild(testDiv);
+    });
+
+    it('initialize', (done) => {
         new MapService(url).getMapInfo((serviceResult) => {
             map = new Map({
                 target: 'map',
@@ -26,24 +43,11 @@ describe('openlayers_VectorTileSuperMapRest', () => {
             });
             vectorTileOptions = VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);
             vectorTileSource = new VectorTileSuperMapRest(vectorTileOptions);
-            var vectorLayer = new VectorTileLayer({
+            vectorLayer = new VectorTileLayer({
                 source: vectorTileSource
             });
             map.addLayer(vectorLayer);
         });
-    });
-    beforeEach(() => {
-        originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
-        jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;
-    });
-    afterEach(() => {
-        jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
-    });
-    afterAll(() => {
-        window.document.body.removeChild(testDiv);
-    });
-
-    it('initialize', (done) => {
         setTimeout(() => {
             try {
                 expect(vectorTileOptions).not.toBeNull();
@@ -56,4 +60,35 @@ describe('openlayers_VectorTileSuperMapRest', () => {
             }
         }, 6000);
     });
+    it('custom_tileLoadFunction', (done) => {
+        var tileLoadFunction = jasmine.createSpy('tileLoadFunction');
+        new MapService(url).getMapInfo((serviceResult) => {
+            map = new Map({
+                target: 'map',
+                view: new View({
+                    center: [12957388, 4853991],
+                    zoom: 11
+                })
+            });
+            vectorTileOptions = VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);
+            vectorTileOptions.tileLoadFunction = tileLoadFunction;
+            vectorTileSource = new VectorTileSuperMapRest(vectorTileOptions);
+            vectorLayer = new VectorTileLayer({
+                source: vectorTileSource
+            });
+            map.addLayer(vectorLayer);
+        });
+        setTimeout(() => {
+            try {
+                expect(vectorTileOptions).not.toBeNull();
+                expect(vectorTileSource).not.toBeNull();
+                expect(tileLoadFunction).toHaveBeenCalled();
+                done();
+            } catch (exception) {
+                console.log("'initialize'案例失败：" + exception.name + ":" + exception.message);
+                expect(false).toBeTruthy();
+                done();
+            }
+        }, 6000);
+    });
 });
