[fix]canvg 3.0.10 review by xiongjj

Author: luoxiao-supermap

dist/mapboxgl/include-mapboxgl.js

@@ -129,7 +129,7 @@
       inputScript('https://iclient.supermap.io/web/libs/geostats/geostats.js');
     }
     if (inArray(includes, 'canvg')) {
-      inputScript('https://iclient.supermap.io/web/libs/canvg/canvg.min.js');
+      inputScript('https://iclient.supermap.io/web/libs/canvg/3.0.10/umd.min.js');
     }
     if (inArray(includes, 'convert')) {
       inputScript('https://iclient.supermap.io/web/libs/xml-js/1.6.8/xml-js.min.js');

dist/ol/include-ol.js

@@ -106,7 +106,7 @@
             inputScript('https://iclient.supermap.io/web/libs/geostats/geostats.js');
         }
         if (inArray(includes, 'canvg')) {
-            inputScript('https://iclient.supermap.io/web/libs/canvg/canvg.min.js');
+          inputScript('https://iclient.supermap.io/web/libs/canvg/3.0.10/umd.min.js');
         }
         if (inArray(includes, 'tensorflow')) {
           inputScript('https://iclient.supermap.io/web/libs/tensorflow/3.9.0/tf.min.js');

package.json

@@ -126,7 +126,7 @@
     "@supermap/iclient-common": "file:src/common",
     "@tensorflow/tfjs": "^3.9.0",
     "@turf/turf": "6.5.0",
-    "canvg": "3.0.7",
+    "canvg": "3.0.10",
     "echarts": "4.9.0",
     "fetch-ie8": "1.5.0",
     "fetch-jsonp": "1.1.3",

src/mapboxgl/mapping/WebMap.js

@@ -16,7 +16,7 @@ import { Lang } from '@supermap/iclient-common/lang/Lang';
 import { Util } from '../core/Util';
 import { QueryService } from '../services/QueryService';
 import convert from 'xml-js';
-import canvg from 'canvg';
+import Canvg from 'canvg';
 
 
 const MB_SCALEDENOMINATOR_3857 = [
@@ -99,7 +99,13 @@ export class WebMap extends mapboxgl.Evented {
 		this.credentialValue = options.credentialValue;
 		this.withCredentials = options.withCredentials || false;
 		this.target = options.target || 'map';
+    this._canvgsV = [];
 		this._createWebMap();
+    this.on('mapinitialized', () => {
+      this.map.on('remove', () => {
+        this._stopCanvg();
+      });
+    });
 	}
 	/**
 	 * @function WebMap.prototype.resize
@@ -1902,21 +1908,26 @@ export class WebMap extends mapboxgl.Evented {
 		canvas.id = 'dataviz-canvas-' + Util.newGuid(8);
 		canvas.style.display = 'none';
 		divDom.appendChild(canvas);
-		let canvgs = window.canvg ? window.canvg : canvg;
-		canvgs(canvas.id, svgUrl, {
-			ignoreMouse: true,
-			ignoreAnimation: true,
-			renderCallback: () => {
-				if (canvas.width > 300 || canvas.height > 300) {
-					return;
-				}
-				callBack(canvas);
-			},
-			forceRedraw: () => {
-				return false;
-			}
-		});
+    const canvgs = window.canvg && window.canvg.default ? window.canvg.default : Canvg;
+    const ctx = canvas.getContext('2d');
+    canvgs.from(ctx, svgUrl, {
+      ignoreMouse: true,
+      ignoreAnimation: true,
+      forceRedraw: () => false
+    }).then(v => {
+      v.start();
+      this._canvgsV.push(v);
+      if (canvas.width > 300 || canvas.height > 300) {
+        return;
+      }
+      callBack(canvas);
+    });
 	}
+
+  _stopCanvg() {
+    this._canvgsV.forEach(v => v.stop());
+    this._canvgsV = [];
+  }
 	/**
 	 * @private
 	 * @function WebMap.prototype._addOverlayToMap

src/mapboxgl/package.json

@@ -20,7 +20,7 @@
     "mapbox-gl": "1.13.2",
     "three": "0.129.0",
     "@supermap/iclient-common": "11.1.0-dev",
-    "canvg": "3.0.7",
+    "canvg": "3.0.10",
     "xml-js": "1.6.11"
   }
 }

src/openlayers/core/StyleUtils.js

@@ -6,7 +6,7 @@ import { StringExt } from '@supermap/iclient-common/commontypes/BaseTypes';
 import { StyleMap } from '../overlay/vectortile/StyleMap';
 import { DeafultCanvasStyle } from '../overlay/vectortile/DeafultCanvasStyle';
 import { Util } from '../core/Util';
-import canvg from 'canvg';
+import Canvg from 'canvg';
 import Style from 'ol/style/Style';
 import Icon from 'ol/style/Icon';
 import CircleStyle from 'ol/style/Circle';
@@ -23,7 +23,6 @@ const ZERO = 0.0000001;
  * @private
  */
 export class StyleUtils {
-
   /**
    * @function StyleUtils.getValidStyleFromLayerInfo
    * @description 通过图层信息获取有效的样式。
@@ -595,9 +594,9 @@ export class StyleUtils {
    * @description 将样式对象转换成openlayer要求的ol.style
    * @param {string} style - 样式对象
    * @param {string} type - feature的类型
-   * @returns {ol.style.Style}
+   * @returns {Promise<ol.style.Style>}
    */
-  static toOpenLayersStyle(style, type) {
+  static async toOpenLayersStyle(style, type) {
     style = style || this.getDefaultStyle();
     let olStyle = new Style();
     let newImage, newFill, newStroke;
@@ -633,7 +632,7 @@ export class StyleUtils {
             this.svgDiv = document.createElement('div');
             document.body.appendChild(this.svgDiv);
           }
-          this.getCanvasFromSVG(src, this.svgDiv, (canvas) => {
+          await this.getCanvasFromSVG(src, this.svgDiv, (canvas) => {
             newImage = new Icon({
               img: canvas,
               scale: radius / canvas.width,
@@ -965,33 +964,39 @@ export class StyleUtils {
    * @param {Object} divDom - div的dom对象
    * @param {function} callBack - 转换成功执行的回调函数
    */
-  static getCanvasFromSVG(svgUrl, divDom, callBack) {
+  static async getCanvasFromSVG(svgUrl, divDom, callBack) {
     //一个图层对应一个canvas
-    let canvgs = window.canvg ? window.canvg : canvg;
+    const canvgs = window.canvg && window.canvg.default ? window.canvg.default : Canvg;
     let canvas = document.createElement('canvas');
     canvas.id = 'dataviz-canvas-' + Util.newGuid(8);
     canvas.style.display = "none";
     divDom.appendChild(canvas);
     try {
-      canvgs(canvas.id, svgUrl, {
+      const ctx = canvas.getContext('2d');
+      const v = await canvgs.from(ctx, svgUrl, {
         ignoreMouse: true,
         ignoreAnimation: true,
-        renderCallback: function () {
-          if (canvas.width > 300 || canvas.height > 300) {
-            // Util.showMessage(DataViz.Language.sizeIsWrong,'WARNING');
-            return;
-          }
-          callBack(canvas);
-        },
-        forceRedraw: function () {
-          return false
-        }
-      });
+        forceRedraw: () => false
+      })
+      v.start();
+      if (canvas.width > 300 || canvas.height > 300) {
+        return;
+      }
+      callBack(canvas);
     } catch (e) {
       return;
     }
   }
 
+  /**
+   * @function StyleUtils.stopCanvg
+   * @description 调用Canvg实例的stop();
+   */
+  static stopCanvg() {
+    this.canvgsV.forEach(v => v.stop());
+    this.canvgsV = [];
+  }
+
   /**
    * @function StyleUtils.getMarkerDefaultStyle 获取默认标注图层feature的样式
    * @param {string} featureType feature的类型
@@ -1041,16 +1046,16 @@ export class StyleUtils {
    * @param {string} styleParams 样式参数
    * @param {string} featureType feature类型
    * @param {boolean} isRank 是否为等级符号
-   * @returns {Object} style对象
+   * @returns {Promise<ol.style.Style>}
    */
-  static getOpenlayersStyle(styleParams, featureType, isRank) {
+  static async getOpenlayersStyle(styleParams, featureType, isRank) {
     let style;
     if (styleParams.type === "BASIC_POINT") {
-      style = this.toOpenLayersStyle(styleParams, featureType);
+      style = await this.toOpenLayersStyle(styleParams, featureType);
     } else if (styleParams.type === "SYMBOL_POINT") {
       style = this.getSymbolStyle(styleParams, isRank);
     } else if (styleParams.type === "SVG_POINT") {
-      style = this.getSVGStyle(styleParams);
+      style = await this.getSVGStyle(styleParams);
     } else if (styleParams.type === 'IMAGE_POINT') {
       style = this.getImageStyle(styleParams);
     }
@@ -1103,17 +1108,17 @@ export class StyleUtils {
   /**
    * @function StyleUtils.getSVGStyle 获取svg的样式
    * @param {Object} styleParams - 样式参数
-   * @returns {Object} style对象
+   * @returns {Promise<ol.style.Style>}
    */
-  static getSVGStyle(styleParams) {
+  static async getSVGStyle(styleParams) {
     let style, that = this;
     if (!that.svgDiv) {
       that.svgDiv = document.createElement('div');
       document.body.appendChild(that.svgDiv);
     }
     const { url, radius, offsetX, offsetY, fillOpacity, rotation } = styleParams;
     let anchor = this.getIconAnchor(offsetX, offsetY);
-    StyleUtils.getCanvasFromSVG(url, that.svgDiv, function (canvas) {
+    await StyleUtils.getCanvasFromSVG(url, that.svgDiv, function (canvas) {
       style = new Style({
         image: new Icon({
           img: that.setColorToCanvas(canvas, styleParams),