Skip to content

Commit 64085c5

Browse files
luoxiao-supermapluoxiao-supermap
committed
[fix]canvg 3.0.10 review by xiongjj
1 parent 91e52a2 commit 64085c5

File tree

9 files changed

+612
-577
lines changed

9 files changed

+612
-577
lines changed

‎dist/mapboxgl/include-mapboxgl.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
inputScript('https://iclient.supermap.io/web/libs/geostats/geostats.js');
130130
}
131131
if (inArray(includes, 'canvg')) {
132-
inputScript('https://iclient.supermap.io/web/libs/canvg/canvg.min.js');
132+
inputScript('https://iclient.supermap.io/web/libs/canvg/3.0.10/umd.min.js');
133133
}
134134
if (inArray(includes, 'convert')) {
135135
inputScript('https://iclient.supermap.io/web/libs/xml-js/1.6.8/xml-js.min.js');

‎dist/ol/include-ol.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
inputScript('https://iclient.supermap.io/web/libs/geostats/geostats.js');
107107
}
108108
if (inArray(includes, 'canvg')) {
109-
inputScript('https://iclient.supermap.io/web/libs/canvg/canvg.min.js');
109+
inputScript('https://iclient.supermap.io/web/libs/canvg/3.0.10/umd.min.js');
110110
}
111111
if (inArray(includes, 'tensorflow')) {
112112
inputScript('https://iclient.supermap.io/web/libs/tensorflow/3.9.0/tf.min.js');

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126
"@supermap/iclient-common": "file:src/common",
127127
"@tensorflow/tfjs": "^3.9.0",
128128
"@turf/turf": "6.5.0",
129-
"canvg": "3.0.7",
129+
"canvg": "3.0.10",
130130
"echarts": "4.9.0",
131131
"fetch-ie8": "1.5.0",
132132
"fetch-jsonp": "1.1.3",

‎src/mapboxgl/mapping/WebMap.js

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { Lang } from '@supermap/iclient-common/lang/Lang';
1616
import { Util } from '../core/Util';
1717
import { QueryService } from '../services/QueryService';
1818
import convert from 'xml-js';
19-
import canvg from 'canvg';
19+
import Canvg from 'canvg';
2020

2121

2222
const MB_SCALEDENOMINATOR_3857 = [
@@ -99,7 +99,13 @@ export class WebMap extends mapboxgl.Evented {
9999
this.credentialValue = options.credentialValue;
100100
this.withCredentials = options.withCredentials || false;
101101
this.target = options.target || 'map';
102+
this._canvgsV = [];
102103
this._createWebMap();
104+
this.on('mapinitialized', () => {
105+
this.map.on('remove', () => {
106+
this._stopCanvg();
107+
});
108+
});
103109
}
104110
/**
105111
* @function WebMap.prototype.resize
@@ -1902,21 +1908,26 @@ export class WebMap extends mapboxgl.Evented {
19021908
canvas.id = 'dataviz-canvas-' + Util.newGuid(8);
19031909
canvas.style.display = 'none';
19041910
divDom.appendChild(canvas);
1905-
let canvgs = window.canvg ? window.canvg : canvg;
1906-
canvgs(canvas.id, svgUrl, {
1907-
ignoreMouse: true,
1908-
ignoreAnimation: true,
1909-
renderCallback: () => {
1910-
if (canvas.width > 300 || canvas.height > 300) {
1911-
return;
1912-
}
1913-
callBack(canvas);
1914-
},
1915-
forceRedraw: () => {
1916-
return false;
1917-
}
1918-
});
1911+
const canvgs = window.canvg && window.canvg.default ? window.canvg.default : Canvg;
1912+
const ctx = canvas.getContext('2d');
1913+
canvgs.from(ctx, svgUrl, {
1914+
ignoreMouse: true,
1915+
ignoreAnimation: true,
1916+
forceRedraw: () => false
1917+
}).then(v => {
1918+
v.start();
1919+
this._canvgsV.push(v);
1920+
if (canvas.width > 300 || canvas.height > 300) {
1921+
return;
1922+
}
1923+
callBack(canvas);
1924+
});
19191925
}
1926+
1927+
_stopCanvg() {
1928+
this._canvgsV.forEach(v => v.stop());
1929+
this._canvgsV = [];
1930+
}
19201931
/**
19211932
* @private
19221933
* @function WebMap.prototype._addOverlayToMap

‎src/mapboxgl/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"mapbox-gl": "1.13.2",
2121
"three": "0.129.0",
2222
"@supermap/iclient-common": "11.1.0-dev",
23-
"canvg": "3.0.7",
23+
"canvg": "3.0.10",
2424
"xml-js": "1.6.11"
2525
}
2626
}

‎src/openlayers/core/StyleUtils.js

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { StringExt } from '@supermap/iclient-common/commontypes/BaseTypes';
66
import { StyleMap } from '../overlay/vectortile/StyleMap';
77
import { DeafultCanvasStyle } from '../overlay/vectortile/DeafultCanvasStyle';
88
import { Util } from '../core/Util';
9-
import canvg from 'canvg';
9+
import Canvg from 'canvg';
1010
import Style from 'ol/style/Style';
1111
import Icon from 'ol/style/Icon';
1212
import CircleStyle from 'ol/style/Circle';
@@ -23,7 +23,6 @@ const ZERO = 0.0000001;
2323
* @private
2424
*/
2525
export class StyleUtils {
26-
2726
/**
2827
* @function StyleUtils.getValidStyleFromLayerInfo
2928
* @description 通过图层信息获取有效的样式。
@@ -595,9 +594,9 @@ export class StyleUtils {
595594
* @description 将样式对象转换成openlayer要求的ol.style
596595
* @param {string} style - 样式对象
597596
* @param {string} type - feature的类型
598-
* @returns {ol.style.Style}
597+
* @returns {Promise<ol.style.Style>}
599598
*/
600-
static toOpenLayersStyle(style, type) {
599+
static async toOpenLayersStyle(style, type) {
601600
style = style || this.getDefaultStyle();
602601
let olStyle = new Style();
603602
let newImage, newFill, newStroke;
@@ -633,7 +632,7 @@ export class StyleUtils {
633632
this.svgDiv = document.createElement('div');
634633
document.body.appendChild(this.svgDiv);
635634
}
636-
this.getCanvasFromSVG(src, this.svgDiv, (canvas) => {
635+
await this.getCanvasFromSVG(src, this.svgDiv, (canvas) => {
637636
newImage = new Icon({
638637
img: canvas,
639638
scale: radius / canvas.width,
@@ -965,33 +964,39 @@ export class StyleUtils {
965964
* @param {Object} divDom - div的dom对象
966965
* @param {function} callBack - 转换成功执行的回调函数
967966
*/
968-
static getCanvasFromSVG(svgUrl, divDom, callBack) {
967+
static async getCanvasFromSVG(svgUrl, divDom, callBack) {
969968
//一个图层对应一个canvas
970-
let canvgs = window.canvg ? window.canvg : canvg;
969+
const canvgs = window.canvg && window.canvg.default ? window.canvg.default : Canvg;
971970
let canvas = document.createElement('canvas');
972971
canvas.id = 'dataviz-canvas-' + Util.newGuid(8);
973972
canvas.style.display = "none";
974973
divDom.appendChild(canvas);
975974
try {
976-
canvgs(canvas.id, svgUrl, {
975+
const ctx = canvas.getContext('2d');
976+
const v = await canvgs.from(ctx, svgUrl, {
977977
ignoreMouse: true,
978978
ignoreAnimation: true,
979-
renderCallback: function () {
980-
if (canvas.width > 300 || canvas.height > 300) {
981-
// Util.showMessage(DataViz.Language.sizeIsWrong,'WARNING');
982-
return;
983-
}
984-
callBack(canvas);
985-
},
986-
forceRedraw: function () {
987-
return false
988-
}
989-
});
979+
forceRedraw: () => false
980+
})
981+
v.start();
982+
if (canvas.width > 300 || canvas.height > 300) {
983+
return;
984+
}
985+
callBack(canvas);
990986
} catch (e) {
991987
return;
992988
}
993989
}
994990

991+
/**
992+
* @function StyleUtils.stopCanvg
993+
* @description 调用Canvg实例的stop();
994+
*/
995+
static stopCanvg() {
996+
this.canvgsV.forEach(v => v.stop());
997+
this.canvgsV = [];
998+
}
999+
9951000
/**
9961001
* @function StyleUtils.getMarkerDefaultStyle 获取默认标注图层feature的样式
9971002
* @param {string} featureType feature的类型
@@ -1041,16 +1046,16 @@ export class StyleUtils {
10411046
* @param {string} styleParams 样式参数
10421047
* @param {string} featureType feature类型
10431048
* @param {boolean} isRank 是否为等级符号
1044-
* @returns {Object} style对象
1049+
* @returns {Promise<ol.style.Style>}
10451050
*/
1046-
static getOpenlayersStyle(styleParams, featureType, isRank) {
1051+
static async getOpenlayersStyle(styleParams, featureType, isRank) {
10471052
let style;
10481053
if (styleParams.type === "BASIC_POINT") {
1049-
style = this.toOpenLayersStyle(styleParams, featureType);
1054+
style = await this.toOpenLayersStyle(styleParams, featureType);
10501055
} else if (styleParams.type === "SYMBOL_POINT") {
10511056
style = this.getSymbolStyle(styleParams, isRank);
10521057
} else if (styleParams.type === "SVG_POINT") {
1053-
style = this.getSVGStyle(styleParams);
1058+
style = await this.getSVGStyle(styleParams);
10541059
} else if (styleParams.type === 'IMAGE_POINT') {
10551060
style = this.getImageStyle(styleParams);
10561061
}
@@ -1103,17 +1108,17 @@ export class StyleUtils {
11031108
/**
11041109
* @function StyleUtils.getSVGStyle 获取svg的样式
11051110
* @param {Object} styleParams - 样式参数
1106-
* @returns {Object} style对象
1111+
* @returns {Promise<ol.style.Style>}
11071112
*/
1108-
static getSVGStyle(styleParams) {
1113+
static async getSVGStyle(styleParams) {
11091114
let style, that = this;
11101115
if (!that.svgDiv) {
11111116
that.svgDiv = document.createElement('div');
11121117
document.body.appendChild(that.svgDiv);
11131118
}
11141119
const { url, radius, offsetX, offsetY, fillOpacity, rotation } = styleParams;
11151120
let anchor = this.getIconAnchor(offsetX, offsetY);
1116-
StyleUtils.getCanvasFromSVG(url, that.svgDiv, function (canvas) {
1121+
await StyleUtils.getCanvasFromSVG(url, that.svgDiv, function (canvas) {
11171122
style = new Style({
11181123
image: new Icon({
11191124
img: that.setColorToCanvas(canvas, styleParams),

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy