From aafa14dc6925113312b4f8a79f1ba7cacdf18157 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Wed, 15 Sep 2021 11:45:36 +0800 Subject: [PATCH 1/3] style: code style --- stories/MapPerformance/components/Map.tsx | 239 +++++++++++----------- 1 file changed, 120 insertions(+), 119 deletions(-) diff --git a/stories/MapPerformance/components/Map.tsx b/stories/MapPerformance/components/Map.tsx index e9bf76eb61..7399e64bf3 100644 --- a/stories/MapPerformance/components/Map.tsx +++ b/stories/MapPerformance/components/Map.tsx @@ -21,125 +21,125 @@ export default class PointTest extends React.Component { }), }); - // @ts-ignore - var Stats = function() { - function h(a) { - c.appendChild(a.dom); - return a; - } - function k(a) { - for (var d = 0; d < c.children.length; d++) - // @ts-ignore - c.children[d].style.display = d === a ? 'block' : 'none'; - l = a; - } - var l = 0, - c = document.createElement('div'); - c.style.cssText = - 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; - c.addEventListener( - 'click', - function(a) { - a.preventDefault(); - k(++l % c.children.length); - }, - !1, - ); - var g = (performance || Date).now(), - e = g, - a = 0, - // @ts-ignore - r = h(new Stats.Panel('FPS', '#0ff', '#002')), - // @ts-ignore - f = h(new Stats.Panel('MS', '#0f0', '#020')); - // @ts-ignore - if (self.performance && self.performance.memory) - // @ts-ignore - var t = h(new Stats.Panel('MB', '#f08', '#201')); - k(0); - return { - REVISION: 16, - dom: c, - addPanel: h, - showPanel: k, - begin: function() { - g = (performance || Date).now(); - }, - end: function() { - a++; - var c = (performance || Date).now(); - f.update(c - g, 200); - // @ts-ignore - if ( - c > e + 1e3 && - (r.update((1e3 * a) / (c - e), 100), (e = c), (a = 0), t) - ) { - // @ts-ignore - var d = performance.memory; - t.update(d.usedJSHeapSize / 1048576, d.jsHeapSizeLimit / 1048576); - } - return c; - }, - update: function() { - g = this.end(); - }, - domElement: c, - setMode: k, - }; - }; - // @ts-ignore - Stats.Panel = function(h, k, l) { - var c = Infinity, - g = 0, - e = Math.round, - a = e(window.devicePixelRatio || 1), - r = 80 * a, - f = 48 * a, - t = 3 * a, - u = 2 * a, - d = 3 * a, - m = 15 * a, - n = 74 * a, - p = 30 * a, - q = document.createElement('canvas'); - q.width = r; - q.height = f; - q.style.cssText = 'width:80px;height:48px'; - var b = q.getContext('2d'); - b.font = 'bold ' + 9 * a + 'px Helvetica,Arial,sans-serif'; - b.textBaseline = 'top'; - b.fillStyle = l; - b.fillRect(0, 0, r, f); - b.fillStyle = k; - b.fillText(h, t, u); - b.fillRect(d, m, n, p); - b.fillStyle = l; - b.globalAlpha = 0.9; - b.fillRect(d, m, n, p); - // @ts-ignore - return { - dom: q, - update: function(f, v) { - c = Math.min(c, f); - g = Math.max(g, f); - b.fillStyle = l; - b.globalAlpha = 1; - b.fillRect(0, 0, r, m); - b.fillStyle = k; - b.fillText(e(f) + ' ' + h + ' (' + e(c) + '-' + e(g) + ')', t, u); - // @ts-ignore - b.drawImage(q, d + a, m, n - a, p, d, m, n - a, p); - b.fillRect(d + n - a, m, a, p); - b.fillStyle = l; - b.globalAlpha = 0.9; - b.fillRect(d + n - a, m, a, e((1 - f / v) * p)); - }, - }; - }; - 'object' === typeof module && (module.exports = Stats); - // @ts-ignore - var stats = new Stats(); - document.body.appendChild(stats.dom); + // // @ts-ignore + // var Stats = function() { + // function h(a) { + // c.appendChild(a.dom); + // return a; + // } + // function k(a) { + // for (var d = 0; d < c.children.length; d++) + // // @ts-ignore + // c.children[d].style.display = d === a ? 'block' : 'none'; + // l = a; + // } + // var l = 0, + // c = document.createElement('div'); + // c.style.cssText = + // 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; + // c.addEventListener( + // 'click', + // function(a) { + // a.preventDefault(); + // k(++l % c.children.length); + // }, + // !1, + // ); + // var g = (performance || Date).now(), + // e = g, + // a = 0, + // // @ts-ignore + // r = h(new Stats.Panel('FPS', '#0ff', '#002')), + // // @ts-ignore + // f = h(new Stats.Panel('MS', '#0f0', '#020')); + // // @ts-ignore + // if (self.performance && self.performance.memory) + // // @ts-ignore + // var t = h(new Stats.Panel('MB', '#f08', '#201')); + // k(0); + // return { + // REVISION: 16, + // dom: c, + // addPanel: h, + // showPanel: k, + // begin: function() { + // g = (performance || Date).now(); + // }, + // end: function() { + // a++; + // var c = (performance || Date).now(); + // f.update(c - g, 200); + // // @ts-ignore + // if ( + // c > e + 1e3 && + // (r.update((1e3 * a) / (c - e), 100), (e = c), (a = 0), t) + // ) { + // // @ts-ignore + // var d = performance.memory; + // t.update(d.usedJSHeapSize / 1048576, d.jsHeapSizeLimit / 1048576); + // } + // return c; + // }, + // update: function() { + // g = this.end(); + // }, + // domElement: c, + // setMode: k, + // }; + // }; + // // @ts-ignore + // Stats.Panel = function(h, k, l) { + // var c = Infinity, + // g = 0, + // e = Math.round, + // a = e(window.devicePixelRatio || 1), + // r = 80 * a, + // f = 48 * a, + // t = 3 * a, + // u = 2 * a, + // d = 3 * a, + // m = 15 * a, + // n = 74 * a, + // p = 30 * a, + // q = document.createElement('canvas'); + // q.width = r; + // q.height = f; + // q.style.cssText = 'width:80px;height:48px'; + // var b = q.getContext('2d'); + // b.font = 'bold ' + 9 * a + 'px Helvetica,Arial,sans-serif'; + // b.textBaseline = 'top'; + // b.fillStyle = l; + // b.fillRect(0, 0, r, f); + // b.fillStyle = k; + // b.fillText(h, t, u); + // b.fillRect(d, m, n, p); + // b.fillStyle = l; + // b.globalAlpha = 0.9; + // b.fillRect(d, m, n, p); + // // @ts-ignore + // return { + // dom: q, + // update: function(f, v) { + // c = Math.min(c, f); + // g = Math.max(g, f); + // b.fillStyle = l; + // b.globalAlpha = 1; + // b.fillRect(0, 0, r, m); + // b.fillStyle = k; + // b.fillText(e(f) + ' ' + h + ' (' + e(c) + '-' + e(g) + ')', t, u); + // // @ts-ignore + // b.drawImage(q, d + a, m, n - a, p, d, m, n - a, p); + // b.fillRect(d + n - a, m, a, p); + // b.fillStyle = l; + // b.globalAlpha = 0.9; + // b.fillRect(d + n - a, m, a, e((1 - f / v) * p)); + // }, + // }; + // }; + // 'object' === typeof module && (module.exports = Stats); + // // @ts-ignore + // var stats = new Stats(); + // document.body.appendChild(stats.dom); // let address = 'https://gw.alipayobjects.com/os/bmw-prod/e76d89f4-aa69-4974-90b7-b236904a43b1.json' // 100 // let address = 'https://gw.alipayobjects.com/os/bmw-prod/edc8219a-b095-4451-98e9-3e387e290087.json' // 10000 @@ -164,6 +164,7 @@ export default class PointTest extends React.Component { opacity: 1.0, }) .select(true) + // .animate(true) .active(true); scene.on('loaded', () => { From 916df20c615e2703e0e61368be4a97f2f7a7e401 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Wed, 15 Sep 2021 15:32:57 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E6=A3=80=E6=B5=8B=E6=96=B9=E6=B3=95=E7=9A=84=E5=88=A4?= =?UTF-8?q?=E6=96=AD=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/src/services/layer/LayerService.ts | 34 ++++++++++++------- .../core/src/services/scene/ISceneService.ts | 2 +- .../core/src/services/scene/SceneService.ts | 6 ++-- 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 0c471063cb..a8b6882c46 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -21,7 +21,7 @@ export default class LayerService implements ILayerService { private animateInstanceCount: number = 0; - private lastRenderTime: number = new Date().getTime(); + private lastRenderType: string; @inject(TYPES.IRendererService) private readonly renderService: IRendererService; @@ -71,10 +71,10 @@ export default class LayerService implements ILayerService { this.destroy(); } - public renderLayers(type?: string) { + public renderLayers(renderType?: string) { // TODO: 每次渲染的时候都需要进行渲染判断，判断是否进行渲染 // 没有传递 type 参数时默认触发的是地图事件，优先级最高，直接渲染 - if (!this.renderTest(type)) { + if (!this.renderTest(renderType)) { return; } @@ -128,19 +128,27 @@ export default class LayerService implements ILayerService { } // 渲染检测 - private renderTest(type: string | undefined): boolean { - // 继续渲染事件 - const renderTime = new Date().getTime(); - if (type) { - switch (type) { - case 'picking': - // picking 类型的渲染事件 若是触发的时间与上次触发的间隔在 64 ms 之内，则放弃此次渲染 - return !(renderTime - this.lastRenderTime < 64); + private renderTest(renderType: string | undefined): boolean { + // 继续渲染事件 + if (renderType) { + switch (renderType) { + case 'picking': + // TODO: picking 类型的渲染事件 + // 若是上次触发为地图触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染 + if(this.lastRenderType === 'mapRender') { + this.lastRenderType = 'picking' + return false + } else { + this.lastRenderType = 'picking' + return true + } + case 'mapRender': + this.lastRenderType = 'mapRender'; + return true; default: return true; - } + } } - this.lastRenderTime = renderTime; return true; } diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts index 0120620912..7305c07a6f 100644 --- a/packages/core/src/services/scene/ISceneService.ts +++ b/packages/core/src/services/scene/ISceneService.ts @@ -14,7 +14,7 @@ export interface ISceneService { init(config: IMapConfig & IRenderConfig): void; addLayer(layer: ILayer): void; getSceneConfig(): Partial; - render(): void; + render(type?: string): void; getSceneContainer(): HTMLDivElement; getMarkerContainer(): HTMLElement; exportPng(type?: 'png' | 'jpg'): string; diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 0af83c35f8..7e9a2cf27f 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -232,7 +232,7 @@ export default class Scene extends EventEmitter implements ISceneService { this.render(); } - public async render() { + public async render(renderType?: string) { if (this.rendering || this.destroyed) { return; } @@ -259,7 +259,7 @@ export default class Scene extends EventEmitter implements ISceneService { } // 尝试初始化未初始化的图层 - this.layerService.renderLayers(); + this.layerService.renderLayers(renderType); // 组件需要等待layer 初始化完成之后添加 this.rendering = false; @@ -385,7 +385,7 @@ export default class Scene extends EventEmitter implements ISceneService { private handleMapCameraChanged = (viewport: IViewport) => { this.cameraService.update(viewport); - this.render(); + this.render('mapRender'); }; private addSceneEvent(target: IInteractionTarget) { From 3859ff4bbd665303f7771fbea73c35ad24c8084b Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Wed, 15 Sep 2021 15:34:05 +0800 Subject: [PATCH 3/3] style: lint style --- .../core/src/services/layer/LayerService.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index a8b6882c46..61cb8b8b1e 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -129,25 +129,25 @@ export default class LayerService implements ILayerService { // 渲染检测 private renderTest(renderType: string | undefined): boolean { - // 继续渲染事件 + // 继续渲染事件 if (renderType) { switch (renderType) { - case 'picking': + case 'picking': // TODO: picking 类型的渲染事件 - // 若是上次触发为地图触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染 - if(this.lastRenderType === 'mapRender') { - this.lastRenderType = 'picking' - return false + // 若是上次触发为地图触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染 + if (this.lastRenderType === 'mapRender') { + this.lastRenderType = 'picking'; + return false; } else { - this.lastRenderType = 'picking' - return true + this.lastRenderType = 'picking'; + return true; } case 'mapRender': this.lastRenderType = 'mapRender'; return true; default: return true; - } + } } return true; }