fix: amap webgl force

packages/core/src/services/map/IMapService.ts

@@ -52,6 +52,8 @@ export interface IMapService<RawMap = {}> {
   panBy(pixel: Point): void;
   fitBounds(bound: Bounds): void;
   setZoomAndCenter(zoom: number, center: Point): void;
+  setCenter(center: [number, number]): void;
+  setPitch(pitch: number): void;
   setZoom(zoom: number): void;
   setMapStyle(style: string): void;
 

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

@@ -234,8 +234,7 @@ export default class Scene extends EventEmitter implements ISceneService {
 
   public exportPng(): string {
     const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
-    // this.render();
-    DOM.printCanvas(renderCanvas as HTMLCanvasElement);
+    this.render();
     const layersPng = renderCanvas?.toDataURL('image/png') as string;
     return layersPng;
   }

packages/maps/src/amap/map.ts

@@ -22,6 +22,8 @@ import { IAMapEvent, IAMapInstance } from '../../typings/index';
 import { MapTheme } from './theme';
 import Viewport from './Viewport';
 let mapdivCount = 0;
+// @ts-ignore
+window.forceWebGL = true;
 
 const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
 const AMAP_VERSION: string = '1.4.15';
@@ -129,7 +131,9 @@ export default class AMapService
       lat: center.getLat(),
     };
   }
-
+  public setCenter(lnglat: [number, number]): void {
+    this.map.setCenter(lnglat);
+  }
   public getPitch(): number {
     return this.map.getPitch();
   }
@@ -165,10 +169,14 @@ export default class AMapService
     const zooms = this.map.get('zooms') as [number, number];
     return zooms[1] - 1;
   }
+
   public setRotation(rotation: number): void {
     return this.map.setRotation(rotation);
   }
 
+  public setPitch(pitch: number) {
+    return this.map.setPitch(pitch);
+  }
   public zoomIn(): void {
     this.map.zoomIn();
   }

packages/maps/src/mapbox/map.ts

@@ -107,6 +107,10 @@ export default class MapboxService
     return this.map.getCenter();
   }
 
+  public setCenter(lnglat: [number, number]): void {
+    this.map.setCenter(lnglat);
+  }
+
   public getPitch(): number {
     return this.map.getPitch();
   }
@@ -135,6 +139,10 @@ export default class MapboxService
     this.map.zoomIn();
   }
 
+  public setPitch(pitch: number) {
+    return this.map.setPitch(pitch);
+  }
+
   public zoomOut(): void {
     this.map.zoomOut();
   }

packages/react/src/component/LayerAttribute/Layer.tsx

@@ -55,6 +55,7 @@ export default function BaseLayer(type: string, props: ILayerProps) {
     };
   }, []);
   useEffect(() => {
+    // 重绘layer
     if (layer) {
       mapScene.render();
     }

packages/renderer/src/regl/index.ts

@@ -48,18 +48,21 @@ export default class ReglRendererService implements IRendererService {
           // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1
           antialias: true,
           premultipliedAlpha: true,
+          preserveDrawingBuffer: false,
         },
         // TODO: use extensions
         extensions: [
           'OES_element_index_uint',
           'EXT_blend_minmax',
           'OES_standard_derivatives', // wireframe
-          // 'OES_texture_float', // shadow map 兼容性问题
           'WEBGL_depth_texture',
-          'angle_instanced_arrays',
-          'EXT_texture_filter_anisotropic', // VSM shadow map
+          'angle_instanced_arrays', // VSM shadow map
+        ],
+        optionalExtensions: [
+          'oes_texture_float_linear',
+          'OES_texture_float',
+          'EXT_texture_filter_anisotropic',
         ],
-        optionalExtensions: ['oes_texture_float_linear', 'OES_texture_float'],
         profile: true,
         onDone: (err: Error | null, r?: regl.Regl | undefined): void => {
           if (err || !r) {

stories/Layers/components/Point.tsx

@@ -51,9 +51,7 @@ export default class Point3D extends React.Component {
           strokeWidth: 1,
         });
       scene.addLayer(pointLayer);
-      const items = pointLayer.getLegendItems('color');
-      console.log(items);
-      console.log(pointLayer.getLegendItems('size'));
+
       // scene.on('loaded', () => {
       //   const newData = {
       //     type: 'FeatureCollection',

stories/Layers/components/PointImage.tsx

@@ -37,7 +37,7 @@ export default class PointImage extends React.Component {
     );
     let i = 0;
     const data = await response.json();
-    while (i < 50) {
+    while (i < 1) {
       const imageLayer = new PointLayer()
         .source(data, {
           parser: {
@@ -46,9 +46,9 @@ export default class PointImage extends React.Component {
             y: 'latitude',
           },
         })
-        // .shape('name', ['00', '01', '02'])
-        .shape('name', 'text')
-        .color('red')
+        .shape('name', ['00', '01', '02'])
+        // .shape('name', 'text')
+        // .color('red')
         .active(false)
         .size(20);
       // imageLayer.on('click', (e) => {

stories/Layers/components/hexagon.tsx

@@ -23,7 +23,7 @@ export default class HexagonLayerDemo extends React.Component {
 
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         center: [120.19382669582967, 30.258134],
         pitch: 0,
         style: 'light',

stories/Layers/components/polygon.tsx

@@ -162,9 +162,7 @@ export default class TextLayerDemo extends React.Component {
             opacity,
           });
           scene.render();
-          setTimeout(() => {
-            scene.render();
-          }, 10);
+          scene.exportPng();
         });
       rasterFolder.addColor(styleOptions, 'color').onChange((color: string) => {
         layer.color(color);