fix(scene): 高清方案DPR

docs/api/l7.zh.md

@@ -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)

packages/core/src/services/interaction/PickingService.ts

@@ -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;
+    width *= DOM.DPR;
-    height *= window.devicePixelRatio;
+    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;
+    width *= DOM.DPR;
-    height *= window.devicePixelRatio;
+    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;
+    width *= DOM.DPR;
-    height *= window.devicePixelRatio;
+    height *= DOM.DPR;
     const { enableHighlight, enableSelect } = layer.getLayerConfig();
 
-    const xInDevicePixel = x * window.devicePixelRatio;
+    const xInDevicePixel = x * DOM.DPR;
-    const yInDevicePixel = y * window.devicePixelRatio;
+    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(
+      y: Math.floor((height - (y + 1) * DOM.DPR) / this.pickBufferScale),
-        (height - (y + 1) * window.devicePixelRatio) / this.pickBufferScale,
-      ),
       width: 1,
       height: 1,
       data: new Uint8Array(1 * 1 * 4),

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -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 xInDevicePixel = x * DOM.DPR;
-    const yInDevicePixel = y * window.devicePixelRatio;
+    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),

packages/core/src/services/scene/SceneService.ts

@@ -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;

packages/layers/src/core/triangulation.ts

@@ -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,

packages/layers/src/plugins/ShaderUniformPlugin.ts

@@ -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,
         }),

packages/map/src/map.ts

@@ -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;
 

packages/utils/src/dom.ts

@@ -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;

tslint.prod.json

@@ -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"]
   }
 }