Set data (#1045)

* fix: 修复 setZoomAndCenter/setZoom 缩放层级不同的问题

* feat: 增强 setData 的使用，使之有更高的自由度

* style: lint style

packages/layers/src/core/BaseLayer.ts

@@ -50,7 +50,7 @@ import Source from '@antv/l7-source';
 import { encodePickingColor } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
-import { isFunction, isObject, isUndefined } from 'lodash';
+import { isEqual, isFunction, isObject, isUndefined } from 'lodash';
 import { BlendTypes } from '../utils/blend';
 import { handleStyleDataMapping } from '../utils/dataMappingStyle';
 import {
@@ -521,11 +521,26 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     return this;
   }
   public setData(data: any, options?: ISourceCFG) {
+    const currentSource = this.getSource();
     if (this.inited) {
-      this.layerSource.setData(data, options);
+      if (currentSource && !isEqual(currentSource.parser, options)) {
+        // 在 source 不一致的情况下，需要重新设置 source （parser/data 格式解析规则需要重新生成）
+        this.source(new Source(data, options));
+        this.sourceEvent();
+      } else {
+        this.layerSource.setData(data, options);
+      }
+      // this.layerSource.setData(data, options);
     } else {
       this.on('inited', () => {
-        this.layerSource.setData(data, options);
+        if (!currentSource) {
+          // 执行 setData 的时候 source 还不存在（还未执行 addLayer）
+          this.source(new Source(data, options));
+          this.sourceEvent();
+        } else {
+          this.layerSource.setData(data, options);
+        }
+        // this.layerSource.setData(data, options);
       });
     }
 

packages/maps/src/amap/map.ts

@@ -250,7 +250,7 @@ export default class AMapService
   }
 
   public setZoomAndCenter(zoom: number, center: [number, number]): void {
-    this.map.setZoomAndCenter(zoom, center);
+    this.map.setZoomAndCenter(zoom + 1, center);
   }
 
   public setMapStyle(style: string): void {

packages/maps/src/amap2/map.ts

@@ -328,7 +328,7 @@ export default class AMapService
     );
   }
   public setZoomAndCenter(zoom: number, center: [number, number]): void {
-    this.map.setZoomAndCenter(zoom, center);
+    this.map.setZoomAndCenter(zoom + 1, center);
   }
   public setMapStyle(style: string): void {
     this.map.setMapStyle(this.getMapStyle(style));

packages/source/src/parser/json.ts

@@ -49,21 +49,12 @@ export default function json(data: IJsonData, cfg: IParserCfg): IParserData {
 }
 
 // TODO: 提供默认数据和解析器
-export const defaultData = [
-  {
-    lng1: 100,
-    lat1: 30.0,
-    lng2: 130,
-    lat2: 30,
-  },
-];
+export const defaultData = [];
 
 export const defaultParser = {
   parser: {
     type: 'json',
-    x: 'lng1',
-    y: 'lat1',
-    x1: 'lng2',
-    y1: 'lat2',
+    x: 'lng',
+    y: 'lat',
   },
 };

stories/Map/components/bugfix.tsx

@@ -19,33 +19,6 @@ export default class Amap2demo extends React.Component {
   }
 
   public async componentDidMount() {
-    function initScene() {
-      return new Promise((resolve, reject) => {
-        const scene = new Scene({
-          id: 'map',
-          map: new GaodeMapV2({
-            // center: [121.434765, 31.256735],
-            // zoom: 14.83,
-            pitch: 0,
-            style: 'light',
-            center: [120, 30],
-            zoom: 4,
-          }),
-        });
-        scene.on('loaded', () => {
-          setTimeout(() => {
-            resolve(scene);
-          }, 200);
-        });
-      });
-    }
-
-    // for (let i = 0; i < 20; i++) {
-    //   console.log('init ' + (i + 1));
-    //   let scene = await initScene();
-    //   scene.destroy();
-    // }
-
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
@@ -57,53 +30,78 @@ export default class Amap2demo extends React.Component {
         zoom: 4,
       }),
     });
-    scene.addImage(
-      '00',
-      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
-    );
+
+    const data = {
+      type: 'FeatureCollection',
+      crs: {
+        type: 'name',
+        properties: { name: 'urn:ogc:def:crs:OGC:1.3:CRS84' },
+      },
+      features: [
+        {
+          type: 'Feature',
+          properties: {
+            id: 'ak16994521',
+            mag: 2.3,
+            time: 1507425650893,
+            felt: null,
+            tsunami: 0,
+          },
+          geometry: {
+            type: 'Point',
+            coordinates: [120, 30, 0.0],
+          },
+        },
+      ],
+    };
+    const layer = new PointLayer()
+      // .source(data)
+      .source({
+        type: 'FeatureCollection',
+        crs: {
+          type: 'name',
+          properties: { name: 'urn:ogc:def:crs:OGC:1.3:CRS84' },
+        },
+        features: [
+          {
+            type: 'Feature',
+            properties: {
+              id: 'ak16994521',
+              mag: 2.3,
+              time: 1507425650893,
+              felt: null,
+              tsunami: 0,
+            },
+            geometry: {
+              type: 'Point',
+              coordinates: [125, 30, 0.0],
+            },
+          },
+        ],
+      })
+      .shape('circle')
+      .size(40)
+      .color('#000');
 
     scene.on('loaded', () => {
-      for (let i = 0; i < 20; i++) {
-        //   const layer = new PointLayer().source([
-        //     { lng: 120, lat: 30, name: '00' }
-        //   ], {
-        //     parser: {
-        //       type: 'json',
-        //       x: 'lng',
-        //       y: 'lat'
-        //     }
-        //   })
-        //   .shape('name', ['00'])
-        //   .size(20)
+      layer.setData(
+        [
+          {
+            lng: 120,
+            lat: 30,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        },
+      );
+      // layer.setData(data)
 
-        // scene.addLayer(layer);
-
-        const lineLayer = new LineLayer()
-          .source(
-            [
-              {
-                lng1: 120,
-                lat1: 30,
-                lng2: 122,
-                lat2: 30,
-              },
-            ],
-            {
-              parser: {
-                type: 'json',
-                x: 'lng1',
-                y: 'lat1',
-                x1: 'lng2',
-                y1: 'lat2',
-              },
-            },
-          )
-          .shape('line')
-          .size(2)
-          .color('#f00');
-
-        scene.addLayer(lineLayer);
-      }
+      scene.addLayer(layer);
     });
   }