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

fix(scene): 高清方案DPR

This commit is contained in:
thinkinggis 2021-01-12 11:36:52 +08:00
parent 13e66a17fb
commit f39f4c62bb
9 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/api/l7.zh.md
View File

@ -80,4 +80,5 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
L7 相关技术问题，需求反馈，我们会及时响应
![地理空间可视化L7支持群](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ePmsRbK4lZgAAAAAAAAAAABkARQnAQ)
群号：30460926
![地理空间可视化L7支持群](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*W7IFQr6QSZYAAAAAAAAAAAAAARQnAQ)

26
packages/core/src/services/interaction/PickingService.ts
View File

@ -1,4 +1,4 @@
import { decodePickingColor, encodePickingColor } from '@antv/l7-utils';
import { decodePickingColor, DOM, encodePickingColor } from '@antv/l7-utils';
import { inject, injectable } from 'inversify';
import {
IMapService,
@ -52,8 +52,8 @@ export default class PickingService implements IPickingService {
width,
height,
} = (getContainer() as HTMLElement).getBoundingClientRect();
width *= window.devicePixelRatio;
height *= window.devicePixelRatio;
width *= DOM.DPR;
height *= DOM.DPR;
this.pickBufferScale =
this.configService.getSceneConfig(id).pickBufferScale || 1;
// 创建 picking framebuffer，后续实时 resize
@ -92,8 +92,8 @@ export default class PickingService implements IPickingService {
width,
height,
} = (getContainer() as HTMLElement).getBoundingClientRect();
width *= window.devicePixelRatio;
height *= window.devicePixelRatio;
width *= DOM.DPR;
height *= DOM.DPR;
if (this.width !== width || this.height !== height) {
this.pickingFBO.resize({
width: Math.round(width / this.pickBufferScale),
@ -133,16 +133,16 @@ export default class PickingService implements IPickingService {
width,
height,
} = (getContainer() as HTMLElement).getBoundingClientRect();
width *= window.devicePixelRatio;
height *= window.devicePixelRatio;
width *= DOM.DPR;
height *= DOM.DPR;
const { enableHighlight, enableSelect } = layer.getLayerConfig();
const xInDevicePixel = x * window.devicePixelRatio;
const yInDevicePixel = y * window.devicePixelRatio;
const xInDevicePixel = x * DOM.DPR;
const yInDevicePixel = y * DOM.DPR;
if (
xInDevicePixel > width - 1 * window.devicePixelRatio ||
xInDevicePixel > width - 1 * DOM.DPR ||
xInDevicePixel < 0 ||
yInDevicePixel > height - 1 * window.devicePixelRatio ||
yInDevicePixel > height - 1 * DOM.DPR ||
yInDevicePixel < 0
) {
return false;
@ -151,9 +151,7 @@ export default class PickingService implements IPickingService {
pickedColors = readPixels({
x: Math.floor(xInDevicePixel / this.pickBufferScale),
// 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
y: Math.floor(
(height - (y + 1) * window.devicePixelRatio) / this.pickBufferScale,
),
y: Math.floor((height - (y + 1) * DOM.DPR) / this.pickBufferScale),
width: 1,
height: 1,
data: new Uint8Array(1 * 1 * 4),

8
packages/core/src/services/renderer/passes/PixelPickingPass.ts
View File

@ -1,4 +1,4 @@
import { decodePickingColor, encodePickingColor } from '@antv/l7-utils';
import { decodePickingColor, DOM, encodePickingColor } from '@antv/l7-utils';
import { inject, injectable } from 'inversify';
import { TYPES } from '../../../types';
import {
@ -141,8 +141,8 @@ export default class PixelPickingPass<
const { width, height } = getViewportSize();
const { enableHighlight, enableSelect } = this.layer.getLayerConfig();
const xInDevicePixel = x * window.devicePixelRatio;
const yInDevicePixel = y * window.devicePixelRatio;
const xInDevicePixel = x * DOM.DPR;
const yInDevicePixel = y * DOM.DPR;
if (
xInDevicePixel > width ||
xInDevicePixel < 0 ||
@ -157,7 +157,7 @@ export default class PixelPickingPass<
pickedColors = readPixels({
x: Math.round(xInDevicePixel),
// 视口坐标系原点在左上，而 WebGL 在左下，需要翻转 Y 轴
y: Math.round(height - (y + 1) * window.devicePixelRatio),
y: Math.round(height - (y + 1) * DOM.DPR),
width: 1,
height: 1,
data: new Uint8Array(1 * 1 * 4),

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

@ -318,7 +318,7 @@ export default class Scene extends EventEmitter implements ISceneService {
}
};
private initContainer() {
const pixelRatio = window.devicePixelRatio;
const pixelRatio = DOM.DPR;
const w = this.$container?.clientWidth || 400;
const h = this.$container?.clientHeight || 300;
const canvas = this.canvas;
@ -337,7 +337,7 @@ export default class Scene extends EventEmitter implements ISceneService {
}
private setCanvas() {
const pixelRatio = window.devicePixelRatio;
const pixelRatio = DOM.DPR;
const w = this.$container?.clientWidth || 400;
const h = this.$container?.clientHeight || 300;
const canvas = this.canvas;

1
packages/layers/src/core/triangulation.ts
View File

@ -95,6 +95,7 @@ export function polygonTriangulation(feature: IEncodeFeature) {
const { coordinates } = feature;
const flattengeo = earcut.flatten(coordinates as number[][][]);
const { vertices, dimensions, holes } = flattengeo;
return {
indices: earcut(vertices, holes, dimensions),
vertices,

2
packages/layers/src/plugins/ShaderUniformPlugin.ts
View File

@ -53,7 +53,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
[CoordinateUniform.PixelsPerMeter]: this.coordinateSystemService.getPixelsPerMeter(),
// 其他参数，例如视口大小、DPR 等
u_ViewportSize: [width, height],
u_DevicePixelRatio: window.devicePixelRatio,
u_DevicePixelRatio: DOM.DPR,
u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0,
}),

2
packages/map/src/map.ts
View File

@ -359,7 +359,7 @@ export class Map extends Camera {
}
private resizeCanvas(width: number, height: number) {
const pixelRatio = window.devicePixelRatio || 1;
const pixelRatio = DOM.DPR || 1;
this.canvas.width = pixelRatio * width;
this.canvas.height = pixelRatio * height;

12
packages/utils/src/dom.ts
View File

@ -152,3 +152,15 @@ export function printCanvas(canvas: HTMLCanvasElement) {
// tslint:disable-next-line:no-console
console.log('%c\n', css.join(''));
}
export function getViewPortScale() {
const meta = document.querySelector('meta[name="viewport"]');
const contentItems = meta.content.split(',');
const scale = contentItems.find((item) => {
const [key, value] = item.split('=');
return key === 'initial-scale';
});
return scale ? scale.split('=')[1] * 1 : 1;
}
export const DPR = getViewPortScale() < 1 ? 1 : window.devicePixelRatio;

2
tslint.prod.json
View File

@ -5,6 +5,6 @@
"no-implicit-dependencies": false
},
"linterOptions": {
"exclude": ["**/*.d.ts", "**/data/*.ts", "**/*.{test,story}.ts{,x}", "node_modules/**/*.d.ts"]
"exclude": ["packages/l7/node_modules/**","**/*.d.ts", "**/data/*.ts", "**/*.{test,story}.ts{,x}", "node_modules/**/*.d.ts"]
}
}