redraw layer when layer.optitons attribute changes and add TileLayer.…

…forceReload method (#1894) * redraw layer when layer.optitons attribute changes * fix * fix map not render centercross when layers is empty * npm package files includes src * fix * update spec * update spec * update * fix spec * Layer support refresh * fix tilesize cache * comment for layer options change hook * update * tilelayer rename refresh to forceReload * update commonent
maptalks · Mar 9, 2023 · 3d13358 · 3d13358
1 parent 47caeee
commit 3d13358
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 21 deletions.
diff --git a/.npmignore b/.npmignore
@@ -7,3 +7,4 @@
 !dist/maptalks.css
 !dist/images/**/*
 !ACKNOWLEDGEMENT
+!src
diff --git a/src/layer/Layer.js b/src/layer/Layer.js
@@ -1,5 +1,5 @@
 import Class from '../core/Class';
-import { isNil, isNumber } from '../core/util';
+import { isFunction, isNil, isNumber } from '../core/util';
 import Eventable from '../core/Eventable';
 import JSONAble from '../core/JSONAble';
 import Renderable from '../renderer/Renderable';
@@ -481,9 +481,14 @@ class Layer extends JSONAble(Eventable(Renderable(Class))) {
     }
 
     onConfig(conf) {
-        if (isNumber(conf['opacity']) || conf['cssFilter']) {
+        const needUpdate = conf && Object.keys && Object.keys(conf).length > 0;
+        if (needUpdate && isNil(conf['animation'])) {
+            // options change Hook,subLayers Can realize its own logic,such as tileSize/tileSystem etc change
+            if (this._optionsHook && isFunction(this._optionsHook)) {
+                this._optionsHook(conf);
+            }
             const renderer = this.getRenderer();
-            if (renderer) {
+            if (renderer && renderer.setToRedraw) {
                 renderer.setToRedraw();
             }
         }

diff --git a/src/layer/tile/TileLayer.js b/src/layer/tile/TileLayer.js
@@ -189,6 +189,18 @@ class TileLayer extends Layer {
         return new TileLayer(layerJSON['id'], layerJSON['options']);
     }
 
+    /**
+     * force Reload tilelayer.
+     * Note that this method will clear all cached tiles and reload them. It shouldn't be called frequently for performance reason.
+
+     * @return {TileLayer} this
+     */
+    forceReload() {
+        this.clear();
+        this.load();
+        return this;
+    }
+
 
     /**
      * Get tile size of the tile layer

diff --git a/src/layer/tile/WMSTileLayer.js b/src/layer/tile/WMSTileLayer.js
@@ -1,3 +1,4 @@
+import Browser from '../../core/Browser';
 import { extend } from '../../core/util';
 import TileLayer from './TileLayer';
 
@@ -18,7 +19,7 @@ import TileLayer from './TileLayer';
 const options = {
     crs: null,
     uppercase: false,
-    detectRetina : false
+    detectRetina: false
 };
 
 const defaultWmsParams = {
@@ -30,6 +31,7 @@ const defaultWmsParams = {
     transparent: false,
     version: '1.1.1'
 };
+let wmsExcludeParams;
 
 /**
  * @classdesc
@@ -55,19 +57,33 @@ class WMSTileLayer extends TileLayer {
 
     constructor(id, options) {
         super(id);
-        const wmsParams = extend({}, defaultWmsParams);
-        for (const p in options) {
-            if (!(p in this.options)) {
-                wmsParams[p] = options[p];
-            }
+        if (!wmsExcludeParams) {
+            wmsExcludeParams = extend({}, this.options);
         }
+        this.wmsParams = extend({}, defaultWmsParams);
         this.setOptions(options);
         this.setZIndex(options.zIndex);
+        if (!Browser.proxy) {
+            this._optionsHook(options);
+        }
+    }
+
+    //in Hook,Reset wmsParams
+    _optionsHook(options = {}) {
+        for (const p in options) {
+            //clear tilesize cache
+            if (p === 'tileSize') {
+                this._tileSize = null;
+            }
+            if (!(p in wmsExcludeParams)) {
+                this.wmsParams[p] = options[p];
+            }
+        }
         const tileSize = this.getTileSize();
-        wmsParams.width = tileSize.width;
-        wmsParams.height = tileSize.height;
-        this.wmsParams = wmsParams;
-        this._wmsVersion = parseFloat(wmsParams.version);
+        this.wmsParams.width = tileSize.width;
+        this.wmsParams.height = tileSize.height;
+        this._wmsVersion = parseFloat(this.wmsParams.version);
+        return this;
     }
 
     onAdd() {
@@ -88,7 +104,7 @@ class WMSTileLayer extends TileLayer {
         const max = tileExtent.getMax(),
             min = tileExtent.getMin();
 
-        const bbox = (this._wmsVersion >= 1.3  && (this.wmsParams.crs === 'EPSG:4326' || this.wmsParams.crs === 'EPSG:4490') ?
+        const bbox = (this._wmsVersion >= 1.3 && (this.wmsParams.crs === 'EPSG:4326' || this.wmsParams.crs === 'EPSG:4490') ?
             [min.y, min.x, max.y, max.x] :
             [min.x, min.y, max.x, max.y]).join(',');
 

diff --git a/src/renderer/map/MapCanvasRenderer.js b/src/renderer/map/MapCanvasRenderer.js
@@ -59,6 +59,7 @@ class MapCanvasRenderer extends MapRenderer {
                 this._debugSky();
             }
         }
+        this._needClear = false;
         // this._drawContainerExtent();
         // CAUTION: the order to fire frameend and layerload events
         // fire frameend before layerload, reason:
@@ -313,7 +314,7 @@ class MapCanvasRenderer extends MapRenderer {
         if (!map) {
             return false;
         }
-        if (!this.isLayerCanvasUpdated() && !this.isViewChanged()) {
+        if (!this.isLayerCanvasUpdated() && !this.isViewChanged() && this._needClear === false) {
             return false;
         }
         if (!this.canvas) {
@@ -389,6 +390,8 @@ class MapCanvasRenderer extends MapRenderer {
 
     setToRedraw() {
         const layers = this._getAllLayerToRender();
+        //set maprender for clear canvas
+        this._needClear = true;
         for (let i = 0, l = layers.length; i < l; i++) {
             const renderer = layers[i].getRenderer();
             if (renderer && renderer.canvas && renderer.setToRedraw) {

diff --git a/test/layer/ImageLayerSpec.js b/test/layer/ImageLayerSpec.js
@@ -69,7 +69,7 @@ describe('Layer.ImageLayer', function () {
         });
         layer.on('layerload', function () {
             var parser = new UAParser();
-            var alpha = 102;
+            var alpha = 104;
             var result = parser.getOS();
             console.log(result);
             if (result.name) {
@@ -79,12 +79,13 @@ describe('Layer.ImageLayer', function () {
             }
             var size = map.getSize();
             var ctx = layer.getRenderer().canvas.getContext('2d');
-            var imageData = ctx.getImageData(size.width / 2, size.height / 2, 1, 1);
+            var imageData = ctx.getImageData(size.width / 2, size.height / 2, 1, 1).data;
             console.log(imageData);
             if (maptalks.Browser.ie) {
                 expect(layer).to.be.painted(1, 1, [0, 0, 0, 128]);
             } else {
-                expect(imageData.data).to.be.eql([0, 0, 0, alpha]);
+                var color = [imageData[0], imageData[1], imageData[2], imageData[3]];
+                expect(color).to.be.eql([0, 0, 0, alpha]);
             }
             done();
         });

diff --git a/test/layer/MaskSpec.js b/test/layer/MaskSpec.js
@@ -240,10 +240,10 @@ describe('Spec of Masks', function () {
         new maptalks.Marker(map.getCenter().toArray()).addTo(layer);
         var ring = createRing(0.2), hole = createRing(0.1);
         var polygon = new maptalks.Polygon([ring, hole]);
-        map.on('frameend', function () {
+        map.once('frameend', function () {
             expect(layer).to.be.painted(0, 0);
             layer.setMask(polygon);
-            map.on('frameend', function () {
+            map.once('frameend', function () {
                 expect(layer).to.be.painted(0, 0);
             })
         })

diff --git a/test/layer/TileLayerSpec.js b/test/layer/TileLayerSpec.js
@@ -150,7 +150,18 @@ describe('TileLayer', function () {
                 },
                 'attribution' :  '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>'
             }).addTo(map);
-            expect(layer.getTiles().tileGrids[0].tiles.length).to.be.eql(5);
+            var parser = new UAParser();
+            var result = parser.getOS();
+            var tilesLength=layer.getTiles().tileGrids[0].tiles.length;
+            if (result.name) {
+                if (result.name.toLowerCase().indexOf('windows') > -1) {
+                    expect(tilesLength).to.be.eql(4);
+                }else{
+                    expect(tilesLength).to.be.eql(5);
+                }
+            }else{
+                expect(tilesLength).to.be.eql(5);
+            }
         });
     });
 

diff --git a/test/map/MapSpec.js b/test/map/MapSpec.js
@@ -895,4 +895,17 @@ describe('Map.Spec', function () {
         expect(map.isOffscreen([0, 100, 10, 110])).to.be.ok();
         expect(map.isOffscreen([0, -110, 10, -100])).to.be.ok();
     });
+
+    it('#centercross when map.layers=0', function () {
+        //clear all layers
+        map.removeLayer(baseLayer);
+        map.options.centerCross=true;
+        map.once('frameend',function(){
+            expect(map).to.be.painted(0, 0); 
+            map.options.centerCross=false;
+            map.once('frameend',function(){
+                expect(map).not.to.be.painted(0, 0); 
+            })
+        })
+    });
 });