Merge pull request #219 from antvis/fix_react

Fix react

lerna.json

@@ -14,7 +14,7 @@
       "message": "chore: publish"
     }
   },
-  "version": "2.0.23",
+  "version": "2.0.24",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,8 +24,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.23",
+    "@antv/l7-core": "^2.0.24",
-    "@antv/l7-utils": "^2.0.23",
+    "@antv/l7-utils": "^2.0.24",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-core",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-utils": "^2.0.23",
+    "@antv/l7-utils": "^2.0.24",
     "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",

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();
+    this.render();
-    DOM.printCanvas(renderCanvas as HTMLCanvasElement);
     const layersPng = renderCanvas?.toDataURL('image/png') as string;
     return layersPng;
   }

packages/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,11 +24,11 @@
   "author": "antv",
   "license": "MIT",
   "dependencies": {
-    "@antv/l7-component": "^2.0.23",
+    "@antv/l7-component": "^2.0.24",
-    "@antv/l7-core": "^2.0.23",
+    "@antv/l7-core": "^2.0.24",
-    "@antv/l7-layers": "^2.0.23",
+    "@antv/l7-layers": "^2.0.24",
-    "@antv/l7-maps": "^2.0.23",
+    "@antv/l7-maps": "^2.0.24",
-    "@antv/l7-scene": "^2.0.23",
+    "@antv/l7-scene": "^2.0.24",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",

packages/layers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,9 +22,9 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.23",
+    "@antv/l7-core": "^2.0.24",
-    "@antv/l7-source": "^2.0.23",
+    "@antv/l7-source": "^2.0.24",
-    "@antv/l7-utils": "^2.0.23",
+    "@antv/l7-utils": "^2.0.24",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.1.0",
     "@turf/meta": "^6.0.2",

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-maps",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,8 +23,8 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.23",
+    "@antv/l7-core": "^2.0.24",
-    "@antv/l7-utils": "^2.0.23",
+    "@antv/l7-utils": "^2.0.24",
     "@babel/runtime": "^7.7.7",
     "gl-matrix": "^3.1.0",
     "inversify": "^5.0.1",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-react",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,8 +24,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7": "^2.0.23",
+    "@antv/l7": "^2.0.24",
-    "@antv/l7-maps": "^2.0.23",
+    "@antv/l7-maps": "^2.0.24",
     "@babel/runtime": "^7.7.7",
     "load-styles": "^2.0.0",
     "react": "^16.8.6",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,7 +25,7 @@
     "gl": "^4.4.0"
   },
   "dependencies": {
-    "@antv/l7-core": "^2.0.23",
+    "@antv/l7-core": "^2.0.24",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "lodash": "^4.17.15",

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',
+          'angle_instanced_arrays', // VSM shadow map
-          'EXT_texture_filter_anisotropic', // 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) {

packages/scene/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-scene",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,11 +22,11 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "^2.0.23",
+    "@antv/l7-component": "^2.0.24",
-    "@antv/l7-core": "^2.0.23",
+    "@antv/l7-core": "^2.0.24",
-    "@antv/l7-maps": "^2.0.23",
+    "@antv/l7-maps": "^2.0.24",
-    "@antv/l7-renderer": "^2.0.23",
+    "@antv/l7-renderer": "^2.0.24",
-    "@antv/l7-utils": "^2.0.23",
+    "@antv/l7-utils": "^2.0.24",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",

packages/source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-source",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,8 +24,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.23",
+    "@antv/l7-core": "^2.0.24",
-    "@antv/l7-utils": "^2.0.23",
+    "@antv/l7-utils": "^2.0.24",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-utils",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",

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', ['00', '01', '02'])
-        .shape('name', 'text')
+        // .shape('name', 'text')
-        .color('red')
+        // .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.exportPng();
-            scene.render();
-          }, 10);
         });
       rasterFolder.addColor(styleOptions, 'color').onChange((color: string) => {
         layer.color(color);