Merge pull request #445 from antvis/fix_map_size

Fix map size

docs/api/scene.en.md

@@ -320,7 +320,10 @@ scene.setPitch(pitch);
 - `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]]
 
 ```javascript
-scene.fitBounds([[112, 32], [114, 35]]);
+scene.fitBounds([
+  [112, 32],
+  [114, 35],
+]);
 ```
 
 ### getContainer

docs/api/scene.zh.md

@@ -354,7 +354,10 @@ scene.setPitch(pitch);
 - `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]]
 
 ```javascript
-scene.fitBounds([[112, 32], [114, 35]]);
+scene.fitBounds([
+  [112, 32],
+  [114, 35],
+]);
 ```
 
 ### removeLayer

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

@@ -33,9 +33,12 @@ export default class InteractionService extends EventEmitter
 
   private clickTimer: number;
 
+  private $containter: HTMLElement;
+
   public init() {
     // 注册事件在地图底图上
     this.addEventListenerOnMap();
+    this.$containter = this.mapService.getMapContainer() as HTMLElement;
   }
 
   public destroy() {
@@ -147,7 +150,10 @@ export default class InteractionService extends EventEmitter
     const lngLat = this.mapService.containerToLngLat([clientX, clientY]);
     return { x: clientX, y: clientY, lngLat, type };
   }
-  private onHover = ({ x, y, type }: MouseEvent) => {
+  private onHover = (event: MouseEvent) => {
+    let { x, y } = event;
+    const type = event.type;
+
     const $containter = this.mapService.getMapContainer();
     if ($containter) {
       const { top, left } = $containter.getBoundingClientRect();

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

@@ -46,8 +46,12 @@ export default class PickingService implements IPickingService {
       createTexture2D,
       createFramebuffer,
       getViewportSize,
+      getContainer,
     } = this.rendererService;
-    const { width, height } = getViewportSize();
+    const {
+      width,
+      height,
+    } = (getContainer() as HTMLElement).getBoundingClientRect();
     this.pickBufferScale =
       this.configService.getSceneConfig(id).pickBufferScale || 1;
     // 创建 picking framebuffer，后续实时 resize
@@ -76,9 +80,16 @@ export default class PickingService implements IPickingService {
     this.alreadyInPicking = false;
   }
   private async pickingLayers(target: IInteractionTarget) {
-    const { getViewportSize, useFramebuffer, clear } = this.rendererService;
-    const { width, height } = getViewportSize();
-
+    const {
+      getViewportSize,
+      useFramebuffer,
+      clear,
+      getContainer,
+    } = this.rendererService;
+    const {
+      width,
+      height,
+    } = (getContainer() as HTMLElement).getBoundingClientRect();
     if (this.width !== width || this.height !== height) {
       this.pickingFBO.resize({
         width: Math.round(width / this.pickBufferScale),
@@ -113,8 +124,11 @@ export default class PickingService implements IPickingService {
     { x, y, lngLat, type }: IInteractionTarget,
   ) => {
     let isPicked = false;
-    const { getViewportSize, readPixels } = this.rendererService;
-    const { width, height } = getViewportSize();
+    const { getViewportSize, readPixels, getContainer } = this.rendererService;
+    const {
+      width,
+      height,
+    } = (getContainer() as HTMLElement).getBoundingClientRect();
     const { enableHighlight, enableSelect } = layer.getLayerConfig();
 
     const xInDevicePixel = x * window.devicePixelRatio;

packages/core/src/services/renderer/IRendererService.ts

@@ -42,7 +42,7 @@ export interface IReadPixelsOptions {
 }
 
 export interface IRendererService {
-  init($container: HTMLDivElement, cfg: IRenderConfig): Promise<void>;
+  init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise<void>;
   clear(options: IClearOptions): void;
   createModel(options: IModelInitializationOptions): IModel;
   createAttribute(options: IAttributeInitializationOptions): IAttribute;

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

@@ -100,6 +100,8 @@ export default class Scene extends EventEmitter implements ISceneService {
    */
   private $container: HTMLDivElement | null;
 
+  private canvas: HTMLCanvasElement;
+
   private hooks: {
     init: AsyncParallelHook;
   };
@@ -170,11 +172,17 @@ export default class Scene extends EventEmitter implements ISceneService {
         this.configService.getSceneConfig(this.id).id || '',
       );
       this.$container = $container;
+
       if ($container) {
+        this.canvas = DOM.create('canvas', '', $container) as HTMLCanvasElement;
+        this.setCanvas();
         await this.rendererService.init(
-          $container,
+          // @ts-ignore
+          this.canvas,
           this.configService.getSceneConfig(this.id) as IRenderConfig,
         );
+        // this.initContainer();
+        // window.addEventListener('resize', this.handleWindowResized);
         elementResizeEvent(
           this.$container as HTMLDivElement,
           this.handleWindowResized,
@@ -279,35 +287,42 @@ export default class Scene extends EventEmitter implements ISceneService {
     this.emit('resize');
     // @ts-check
     if (this.$container) {
-      // recalculate the viewport's size and call gl.viewport
-      // @see https://github.com/regl-project/regl/blob/master/lib/webgl.js#L24-L38
-      const pixelRatio = window.devicePixelRatio;
-      let w = window.innerWidth;
-      let h = window.innerHeight;
-      if (this.$container !== document.body) {
-        const bounds = this.$container.getBoundingClientRect();
-        w = bounds.right - bounds.left;
-        h = bounds.bottom - bounds.top;
-      }
-      const canvas = this.$container?.getElementsByTagName('canvas')[0];
-      // this.$container.
-      this.rendererService.viewport({
-        x: 0,
-        y: 0,
-        width: pixelRatio * w,
-        height: pixelRatio * h,
-      });
-      // 触发 Map， canvas
-      DOM.triggerResize();
+      this.initContainer();
       this.coordinateSystemService.needRefresh = true;
-      if (canvas) {
-        canvas.width = w * pixelRatio;
-        canvas.height = h * pixelRatio;
-      }
+
       //  repaint layers
       this.render();
     }
   };
+  private initContainer() {
+    const pixelRatio = window.devicePixelRatio;
+    const w = this.$container?.clientWidth || 400;
+    const h = this.$container?.clientHeight || 300;
+    const canvas = this.canvas;
+    if (canvas) {
+      canvas.width = w * pixelRatio;
+      canvas.height = h * pixelRatio;
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+    }
+    this.rendererService.viewport({
+      x: 0,
+      y: 0,
+      width: pixelRatio * w,
+      height: pixelRatio * h,
+    });
+  }
+
+  private setCanvas() {
+    const pixelRatio = window.devicePixelRatio;
+    const w = this.$container?.clientWidth || 400;
+    const h = this.$container?.clientHeight || 300;
+    const canvas = this.canvas;
+    canvas.width = w * pixelRatio;
+    canvas.height = h * pixelRatio;
+    canvas.style.width = `${w}px`;
+    canvas.style.height = `${h}px`;
+  }
 
   private handleMapCameraChanged = (viewport: IViewport) => {
     this.cameraService.update(viewport);

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.2.22';
+const version = '2.2.23';
 export { version };

packages/renderer/src/regl/index.ts

@@ -36,19 +36,21 @@ import ReglTexture2D from './ReglTexture2D';
 export default class ReglRendererService implements IRendererService {
   private gl: regl.Regl;
   private $container: HTMLDivElement | null;
+  private canvas: HTMLCanvasElement;
   private width: number;
   private height: number;
   private isDirty: boolean;
 
   public async init(
-    $container: HTMLDivElement,
+    canvas: HTMLCanvasElement,
     cfg: IRenderConfig,
   ): Promise<void> {
-    this.$container = $container;
+    // this.$container = $container;
+    this.canvas = canvas;
     // tslint:disable-next-line:typedef
     this.gl = await new Promise((resolve, reject) => {
       regl({
-        container: $container,
+        canvas: this.canvas,
         attributes: {
           alpha: true,
           // use TAA instead of MSAA
@@ -141,13 +143,6 @@ export default class ReglRendererService implements IRendererService {
   }) => {
     // use WebGL context directly
     // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
-    const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
-    if (renderCanvas) {
-      renderCanvas.width = width;
-      renderCanvas.height = height;
-      renderCanvas.style.width = width / 2 + 'px';
-      renderCanvas.style.height = height / 2 + 'px';
-    }
     this.gl._gl.viewport(x, y, width, height);
     this.width = width;
     this.height = height;
@@ -176,11 +171,12 @@ export default class ReglRendererService implements IRendererService {
   };
 
   public getContainer = () => {
-    return this.$container;
+    return this.canvas?.parentElement;
   };
 
   public getCanvas = () => {
-    return this.$container?.getElementsByTagName('canvas')[0] || null;
+    // return this.$container?.getElementsByTagName('canvas')[0] || null;
+    return this.canvas;
   };
 
   public getGLContext = () => {

stories/Layers/components/AnimatePoint.tsx

@@ -14,7 +14,7 @@ export default class AnimatePoint extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: document.getElementById('map') as HTMLDivElement,
-      map: new GaodeMap({
+      map: new Mapbox({
         pitch: 0,
         style: 'dark',
         center: [112, 23.69],
@@ -61,6 +61,7 @@ export default class AnimatePoint extends React.Component {
           left: 0,
           right: 0,
           bottom: 0,
+          transform: 'scale(1.5)',
         }}
       />
     );

stories/Layers/components/PointImage.tsx

@@ -72,6 +72,7 @@ export default class PointImage extends React.Component {
           left: 0,
           right: 0,
           bottom: 0,
+          transform: 'scale(0.8)',
         }}
       />
     );

stories/Layers/components/polygon.tsx

@@ -141,8 +141,8 @@ export default class TextLayerDemo extends React.Component {
         });
       scene.addLayer(layer);
       this.scene = scene;
-      layer.on('remapping', ()=>{
-        console.log('remapinbg event')
+      layer.on('remapping', () => {
+        console.log('remapinbg event');
       });
       const gui = new dat.GUI();
       this.gui = gui;