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 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 {
private renderTest(renderType: string | undefined): boolean {
// 继续渲染事件
const renderTime = new Date().getTime();
if (type) {
switch (type) {
if (renderType) {
switch (renderType) {
case 'picking':
// picking 类型的渲染事件 若是触发的时间与上次触发的间隔在 64 ms 之内，则放弃此次渲染
return !(renderTime - this.lastRenderTime < 64);
// 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;
}

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

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

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

@ -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', () => {