p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/antvis/L7

This commit is contained in:
2912401452 2021-09-15 15:35:23 +08:00
parent e6f6de3399 82b10e31b7
commit b2e4397c99
4 changed files with 142 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/core/src/services/layer/LayerService.ts
View File

@ -21,7 +21,7 @@ export default class LayerService implements ILayerService {
private animateInstanceCount: number = 0; private animateInstanceCount: number = 0;
private lastRenderTime: number = new Date().getTime(); private lastRenderType: string;
@inject(TYPES.IRendererService) @inject(TYPES.IRendererService)
private readonly renderService: IRendererService; private readonly renderService: IRendererService;
@ -71,10 +71,10 @@ export default class LayerService implements ILayerService {
this.destroy(); this.destroy();
} }
public renderLayers(type?: string) { public renderLayers(renderType?: string) {
// TODO: 每次渲染的时候都需要进行渲染判断，判断是否进行渲染 // TODO: 每次渲染的时候都需要进行渲染判断，判断是否进行渲染
// 没有传递 type 参数时默认触发的是地图事件，优先级最高，直接渲染 // 没有传递 type 参数时默认触发的是地图事件，优先级最高，直接渲染
if (!this.renderTest(type)) { if (!this.renderTest(renderType)) {
return; return;
} }
@ -128,19 +128,27 @@ export default class LayerService implements ILayerService {
} }
// 渲染检测 // 渲染检测
private renderTest(type: string | undefined): boolean { private renderTest(renderType: string | undefined): boolean {
// 继续渲染事件 // 继续渲染事件
const renderTime = new Date().getTime(); if (renderType) {
if (type) { switch (renderType) {
switch (type) {
case 'picking': case 'picking':
// picking 类型的渲染事件 若是触发的时间与上次触发的间隔在 64 ms 之内，则放弃此次渲染 // TODO: picking 类型的渲染事件
return !(renderTime - this.lastRenderTime < 64); // 若是上次触发为地图触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染
if (this.lastRenderType === 'mapRender') {
this.lastRenderType = 'picking';
return false;
} else {
this.lastRenderType = 'picking';
return true;
}
case 'mapRender':
this.lastRenderType = 'mapRender';
return true;
default: default:
return true; return true;
} }
} }
this.lastRenderTime = renderTime;
return true; return true;
} }

2
packages/core/src/services/scene/ISceneService.ts
View File

@ -14,7 +14,7 @@ export interface ISceneService {
init(config: IMapConfig & IRenderConfig): void; init(config: IMapConfig & IRenderConfig): void;
addLayer(layer: ILayer): void; addLayer(layer: ILayer): void;
getSceneConfig(): Partial<ISceneConfig>; getSceneConfig(): Partial<ISceneConfig>;
render(): void; render(type?: string): void;
getSceneContainer(): HTMLDivElement; getSceneContainer(): HTMLDivElement;
getMarkerContainer(): HTMLElement; getMarkerContainer(): HTMLElement;
exportPng(type?: 'png' | 'jpg'): string; exportPng(type?: 'png' | 'jpg'): string;

6
packages/core/src/services/scene/SceneService.ts
View File

@ -232,7 +232,7 @@ export default class Scene extends EventEmitter implements ISceneService {
this.render(); this.render();
} }
public async render() { public async render(renderType?: string) {
if (this.rendering || this.destroyed) { if (this.rendering || this.destroyed) {
return; return;
} }
@ -259,7 +259,7 @@ export default class Scene extends EventEmitter implements ISceneService {
} }
// 尝试初始化未初始化的图层 // 尝试初始化未初始化的图层
this.layerService.renderLayers(); this.layerService.renderLayers(renderType);
// 组件需要等待layer 初始化完成之后添加 // 组件需要等待layer 初始化完成之后添加
this.rendering = false; this.rendering = false;
@ -385,7 +385,7 @@ export default class Scene extends EventEmitter implements ISceneService {
private handleMapCameraChanged = (viewport: IViewport) => { private handleMapCameraChanged = (viewport: IViewport) => {
this.cameraService.update(viewport); this.cameraService.update(viewport);
this.render(); this.render('mapRender');
}; };
private addSceneEvent(target: IInteractionTarget) { private addSceneEvent(target: IInteractionTarget) {

239
stories/MapPerformance/components/Map.tsx
View File

@ -21,125 +21,125 @@ export default class PointTest extends React.Component {
}), }),
}); });
// @ts-ignore // // @ts-ignore
var Stats = function() { // var Stats = function() {
function h(a) { // function h(a) {
c.appendChild(a.dom); // c.appendChild(a.dom);
return a; // return a;
} // }
function k(a) { // function k(a) {
for (var d = 0; d < c.children.length; d++) // for (var d = 0; d < c.children.length; d++)
// @ts-ignore // // @ts-ignore
c.children[d].style.display = d === a ? 'block' : 'none'; // c.children[d].style.display = d === a ? 'block' : 'none';
l = a; // l = a;
} // }
var l = 0, // var l = 0,
c = document.createElement('div'); // c = document.createElement('div');
c.style.cssText = // c.style.cssText =
'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; // 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
c.addEventListener( // c.addEventListener(
'click', // 'click',
function(a) { // function(a) {
a.preventDefault(); // a.preventDefault();
k(++l % c.children.length); // k(++l % c.children.length);
}, // },
!1, // !1,
); // );
var g = (performance || Date).now(), // var g = (performance || Date).now(),
e = g, // e = g,
a = 0, // a = 0,
// @ts-ignore // // @ts-ignore
r = h(new Stats.Panel('FPS', '#0ff', '#002')), // r = h(new Stats.Panel('FPS', '#0ff', '#002')),
// @ts-ignore // // @ts-ignore
f = h(new Stats.Panel('MS', '#0f0', '#020')); // f = h(new Stats.Panel('MS', '#0f0', '#020'));
// @ts-ignore // // @ts-ignore
if (self.performance && self.performance.memory) // if (self.performance && self.performance.memory)
// @ts-ignore // // @ts-ignore
var t = h(new Stats.Panel('MB', '#f08', '#201')); // var t = h(new Stats.Panel('MB', '#f08', '#201'));
k(0); // k(0);
return { // return {
REVISION: 16, // REVISION: 16,
dom: c, // dom: c,
addPanel: h, // addPanel: h,
showPanel: k, // showPanel: k,
begin: function() { // begin: function() {
g = (performance || Date).now(); // g = (performance || Date).now();
}, // },
end: function() { // end: function() {
a++; // a++;
var c = (performance || Date).now(); // var c = (performance || Date).now();
f.update(c - g, 200); // f.update(c - g, 200);
// @ts-ignore // // @ts-ignore
if ( // if (
c > e + 1e3 && // c > e + 1e3 &&
(r.update((1e3 * a) / (c - e), 100), (e = c), (a = 0), t) // (r.update((1e3 * a) / (c - e), 100), (e = c), (a = 0), t)
) { // ) {
// @ts-ignore // // @ts-ignore
var d = performance.memory; // var d = performance.memory;
t.update(d.usedJSHeapSize / 1048576, d.jsHeapSizeLimit / 1048576); // t.update(d.usedJSHeapSize / 1048576, d.jsHeapSizeLimit / 1048576);
} // }
return c; // return c;
}, // },
update: function() { // update: function() {
g = this.end(); // g = this.end();
}, // },
domElement: c, // domElement: c,
setMode: k, // setMode: k,
}; // };
}; // };
// @ts-ignore // // @ts-ignore
Stats.Panel = function(h, k, l) { // Stats.Panel = function(h, k, l) {
var c = Infinity, // var c = Infinity,
g = 0, // g = 0,
e = Math.round, // e = Math.round,
a = e(window.devicePixelRatio || 1), // a = e(window.devicePixelRatio || 1),
r = 80 * a, // r = 80 * a,
f = 48 * a, // f = 48 * a,
t = 3 * a, // t = 3 * a,
u = 2 * a, // u = 2 * a,
d = 3 * a, // d = 3 * a,
m = 15 * a, // m = 15 * a,
n = 74 * a, // n = 74 * a,
p = 30 * a, // p = 30 * a,
q = document.createElement('canvas'); // q = document.createElement('canvas');
q.width = r; // q.width = r;
q.height = f; // q.height = f;
q.style.cssText = 'width:80px;height:48px'; // q.style.cssText = 'width:80px;height:48px';
var b = q.getContext('2d'); // var b = q.getContext('2d');
b.font = 'bold ' + 9 * a + 'px Helvetica,Arial,sans-serif'; // b.font = 'bold ' + 9 * a + 'px Helvetica,Arial,sans-serif';
b.textBaseline = 'top'; // b.textBaseline = 'top';
b.fillStyle = l; // b.fillStyle = l;
b.fillRect(0, 0, r, f); // b.fillRect(0, 0, r, f);
b.fillStyle = k; // b.fillStyle = k;
b.fillText(h, t, u); // b.fillText(h, t, u);
b.fillRect(d, m, n, p); // b.fillRect(d, m, n, p);
b.fillStyle = l; // b.fillStyle = l;
b.globalAlpha = 0.9; // b.globalAlpha = 0.9;
b.fillRect(d, m, n, p); // b.fillRect(d, m, n, p);
// @ts-ignore // // @ts-ignore
return { // return {
dom: q, // dom: q,
update: function(f, v) { // update: function(f, v) {
c = Math.min(c, f); // c = Math.min(c, f);
g = Math.max(g, f); // g = Math.max(g, f);
b.fillStyle = l; // b.fillStyle = l;
b.globalAlpha = 1; // b.globalAlpha = 1;
b.fillRect(0, 0, r, m); // b.fillRect(0, 0, r, m);
b.fillStyle = k; // b.fillStyle = k;
b.fillText(e(f) + ' ' + h + ' (' + e(c) + '-' + e(g) + ')', t, u); // b.fillText(e(f) + ' ' + h + ' (' + e(c) + '-' + e(g) + ')', t, u);
// @ts-ignore // // @ts-ignore
b.drawImage(q, d + a, m, n - a, p, d, m, n - a, p); // b.drawImage(q, d + a, m, n - a, p, d, m, n - a, p);
b.fillRect(d + n - a, m, a, p); // b.fillRect(d + n - a, m, a, p);
b.fillStyle = l; // b.fillStyle = l;
b.globalAlpha = 0.9; // b.globalAlpha = 0.9;
b.fillRect(d + n - a, m, a, e((1 - f / v) * p)); // b.fillRect(d + n - a, m, a, e((1 - f / v) * p));
}, // },
}; // };
}; // };
'object' === typeof module && (module.exports = Stats); // 'object' === typeof module && (module.exports = Stats);
// @ts-ignore // // @ts-ignore
var stats = new Stats(); // var stats = new Stats();
document.body.appendChild(stats.dom); // 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/e76d89f4-aa69-4974-90b7-b236904a43b1.json' // 100
// let address = 'https://gw.alipayobjects.com/os/bmw-prod/edc8219a-b095-4451-98e9-3e387e290087.json' // 10000 // 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, opacity: 1.0,
}) })
.select(true) .select(true)
// .animate(true)
.active(true); .active(true);
scene.on('loaded', () => { scene.on('loaded', () => {