add symbol hash (#1319)

* add symbol hash

* set default symbol hash to 1

Author: fuzhenn

src/core/util/strings.js

@@ -302,3 +302,18 @@ export function splitTextToRow(text, style) {
         'rawSize': size
     };
 }
+
+export function hashCode(s) {
+    let hash = 0;
+    const strlen = s && s.length || 0;
+    if (!strlen) {
+        return hash;
+    }
+    let c;
+    for (let i = 0; i < strlen; i++) {
+        c = s.charCodeAt(i);
+        hash = ((hash << 5) - hash) + c;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return hash;
+}

src/core/util/style.js

@@ -1,4 +1,5 @@
-import { extend, isNil, isFunction, hasOwn, isString, isObject } from './common';
+import { extend, isNil, isString, isObject } from './common';
+import { hashCode } from './strings';
 import { isFunctionDefinition } from '@maptalks/function-type';
 
 /**
@@ -38,26 +39,24 @@ export function getGradientStamp(g) {
  * @return {String}        symbol's stamp
  * @memberOf Util
  */
-export function getSymbolStamp(symbol) {
+export function getSymbolHash(symbol) {
+    if (!symbol) {
+        return 1;
+    }
     const keys = [];
     if (Array.isArray(symbol)) {
         for (let i = 0; i < symbol.length; i++) {
-            keys.push(getSymbolStamp(symbol[i]));
-        }
-        return '[ ' + keys.join(' , ') + ' ]';
-    }
-    for (const p in symbol) {
-        if (hasOwn(symbol, p)) {
-            if (!isFunction(symbol[p])) {
-                if (isGradient(symbol[p])) {
-                    keys.push(p + '=' + getGradientStamp(symbol[p]));
-                } else {
-                    keys.push(p + '=' + symbol[p]);
-                }
-            }
+            keys.push(getSymbolHash(symbol[i]));
         }
+        return keys.sort().join(',');
     }
-    return keys.join(';');
+    const sortedKeys = Object.keys(symbol).sort();
+    const sortedSymbol = sortedKeys.reduce((accumulator, curValue) => {
+        accumulator[curValue] = symbol[curValue];
+        return accumulator;
+    }, {});
+    const hash = hashCode(JSON.stringify(sortedSymbol));
+    return hash;
 }
 
 /**

src/geometry/Geometry.js

@@ -12,7 +12,7 @@ import {
     forEachCoord,
     flash
 } from '../core/util';
-import { extendSymbol } from '../core/util/style';
+import { extendSymbol, getSymbolHash } from '../core/util/style';
 import { convertResourceUrl, getExternalResources } from '../core/util/resource';
 import Coordinate from '../geo/Coordinate';
 import Extent from '../geo/Extent';
@@ -271,10 +271,18 @@ class Geometry extends JSONAble(Eventable(Handlerable(Class))) {
     setSymbol(symbol) {
         this._symbol = this._prepareSymbol(symbol);
         this.onSymbolChanged();
-        this.__symbol = JSON.stringify(this._symbol);
+        this._symbolHash = getSymbolHash(symbol);
         return this;
     }
 
+    /**
+     * Get symbol's hash code
+     * @return {String}
+     */
+    getSymbolHash() {
+        return this._symbolHash;
+    }
+
     /**
      * Update geometry's current symbol.
      *

src/renderer/geometry/symbolizers/VectorMarkerSymbolizer.js

@@ -1,6 +1,6 @@
 import { isNil, isNumber, isArrayHasData, getValueOrDefault, sign } from '../../../core/util';
 import { isGradient, getGradientStamp } from '../../../core/util/style';
-import { getAlignPoint } from '../../../core/util/strings';
+import { getAlignPoint, hashCode } from '../../../core/util/strings';
 import { hasFunctionDefinition, isFunctionDefinition } from '../../../core/mapbox';
 import Size from '../../../geo/Size';
 import Point from '../../../geo/Point';
@@ -137,7 +137,7 @@ export default class VectorMarkerSymbolizer extends PointSymbolizer {
 
     _stampSymbol() {
         if (!this._stamp) {
-            this._stamp = [
+            this._stamp = hashCode([
                 this.style['markerType'],
                 isGradient(this.style['markerFill']) ? getGradientStamp(this.style['markerFill']) : this.style['markerFill'],
                 this.style['markerFillOpacity'],
@@ -151,7 +151,7 @@ export default class VectorMarkerSymbolizer extends PointSymbolizer {
                 this.style['markerHeight'],
                 this.style['markerHorizontalAlignment'],
                 this.style['markerVerticalAlignment']
-            ].join('_');
+            ].join('_'));
         }
         return this._stamp;
     }

src/renderer/layer/vectorlayer/VectorLayerCanvasRenderer.js

@@ -289,7 +289,7 @@ class VectorLayerRenderer extends OverlayLayerCanvasRenderer {
             geo._inCurrentView = (x >= xmin && y >= ymin && x <= xmax && y <= ymax);
             //不在视野内的，再用fixedExtent 精确判断下
             if (!geo._inCurrentView) {
-                const symbolkey = geo.__symbol;
+                const symbolkey = geo._symbolHash;
                 let fixedExtent;
                 if (symbolkey) {
                     //相同的symbol 不要重复计算

test/core/UtilSpec.js

@@ -33,7 +33,7 @@ describe('Util', function () {
         expect(now2 >= now).to.be.ok();
     });
 
-    it('getSymbolStamp', function () {
+    it('getSymbolHash', function () {
         var symbol = {
             'markerType' : 'ellipse',
             'markerFill' : {
@@ -46,8 +46,9 @@ describe('Util', function () {
             'markerWidth' : 10,
             'markerHeight' : 10
         };
-        var expected = 'markerType=ellipse;markerFill=radial_0,rgba(17, 172, 263, 0),0.4,rgba(17, 172, 263, 1);markerWidth=10;markerHeight=10';
-        expect(maptalks.Util.getSymbolStamp(symbol)).to.be.eql(expected);
+        // var expected = 'markerType=ellipse;markerFill=radial_0,rgba(17, 172, 263, 0),0.4,rgba(17, 172, 263, 1);markerWidth=10;markerHeight=10';
+        var expected = 1936604526;
+        expect(maptalks.Util.getSymbolHash(symbol)).to.be.eql(expected);
 
         symbol = [
             {
@@ -68,8 +69,9 @@ describe('Util', function () {
                 'markerHeight' : 10
             }
         ];
-        expected = '[ markerFile=foo.png;markerWidth=5;markerHeight=5 , markerType=ellipse;markerFill=radial_0,rgba(17, 172, 263, 0),0.4,rgba(17, 172, 263, 1);markerWidth=10;markerHeight=10 ]';
-        expect(maptalks.Util.getSymbolStamp(symbol)).to.be.eql(expected);
+        // expected = '[ markerFile=foo.png;markerWidth=5;markerHeight=5 , markerType=ellipse;markerFill=radial_0,rgba(17, 172, 263, 0),0.4,rgba(17, 172, 263, 1);markerWidth=10;markerHeight=10 ]';
+        expected = '1501174206,1936604526';
+        expect(maptalks.Util.getSymbolHash(symbol)).to.be.eql(expected);
     });
 
     describe('split content', function () {