Merge pull request #165 from antvis/setdata

fix: 修复数据更新方法

babel.config.js

@@ -16,6 +16,7 @@ module.exports = api => {
       plugins: [
         '@babel/plugin-proposal-optional-chaining',
         '@babel/plugin-proposal-nullish-coalescing-operator',
+        'transform-inline-environment-variables',
         [
           '@babel/plugin-proposal-decorators',
           {

examples/gallery/animate/demo/world.js

@@ -77,6 +77,7 @@ Promise.all([
     .color('#ff6b34')
     .shape('arc3d')
     .size(2)
+    .active(true)
     .animate({
       interval: 2,
       trailLength: 2,

examples/gallery/animate/demo/world2.js

@@ -80,6 +80,7 @@ Promise.all([
     .color('#b97feb')
     .shape('arc3d')
     .size(2)
+    .active(true)
     .animate({
       interval: 2,
       trailLength: 2,

package.json

@@ -43,6 +43,7 @@
     "babel-plugin-inline-webgl-constants": "^1.0.1",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-import-styles": "^0.0.11",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "babel-plugin-transform-postcss": "^0.3.0",
     "babel-preset-gatsby": "^0.2.22",
     "babel-template": "^6.26.0",
@@ -144,7 +145,7 @@
     "test-live": "cross-env BABEL_ENV=test DEBUG_MODE=1 jest --watch  packages/scene/__tests__/index.spec.ts ",
     "coveralls": "jest --coverage && cat ./tests/coverage/lcov.info | coveralls",
     "tsc": "tsc",
-    "watch": "yarn clean && lerna exec --parallel -- cross-env BABEL_ENV=cjs babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "yarn clean && lerna exec --parallel -- cross-env BABEL_ENV=cjs NODE_ENV=production babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
     "bundle": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js",
     "bundle:watch": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js --watch",
     "glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",

packages/component/src/marker.ts

@@ -16,7 +16,7 @@ export interface IMarkerOption {
 export default class Marker extends EventEmitter {
   private markerOption: IMarkerOption;
   private defaultMarker: boolean;
-  private popup: IPopup; // TODO: POPup
+  private popup: IPopup;
   private mapsService: IMapService<unknown>;
   private lngLat: ILngLat;
   private scene: Container;

packages/core/src/services/config/IConfigService.ts

@@ -4,7 +4,7 @@ import { IMapWrapper } from '../map/IMapService';
 import { IRenderConfig } from '../renderer/IRendererService';
 
 export interface ISceneConfig extends IRenderConfig {
-  id: string;
+  id: string | HTMLDivElement;
   map: IMapWrapper;
 }
 

packages/core/src/services/layer/LayerService.ts

@@ -14,6 +14,8 @@ export default class LayerService implements ILayerService {
 
   private layerRenderID: number;
 
+  private sceneInited: boolean = false;
+
   private animateInstanceCount: number = 0;
 
   private alreadyInRendering: boolean = false;
@@ -25,10 +27,14 @@ export default class LayerService implements ILayerService {
   private readonly configService: IGlobalConfigService;
 
   public add(layer: ILayer) {
+    // if (this.sceneInited) {
+    //   layer.init();
+    // }
     this.layers.push(layer);
   }
 
   public initLayers() {
+    this.sceneInited = true;
     this.layers.forEach((layer) => {
       if (!layer.inited) {
         layer.init();

packages/core/src/services/log/LogService.ts

@@ -3,7 +3,6 @@ import Probe, { Log } from 'probe.gl';
 import { ILogService } from './ILogService';
 
 const Logger = new Log({ id: 'L7' }).enable(false);
-
 // // 只输出 debug 级别以上的日志信息
 Logger.priority = 5;
 

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

@@ -13,7 +13,7 @@ export interface IPoint {
 
 export type MapStyle = string | { [key: string]: any };
 export interface IMapWrapper {
-  setContainer(container: Container, id: string): void;
+  setContainer(container: Container, id: string | HTMLDivElement): void;
 }
 
 export interface IMapService<RawMap = {}> {

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

@@ -200,6 +200,7 @@ export default class Scene extends EventEmitter implements ISceneService {
       // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
 
       this.logger.info(' render inited');
+      this.controlService.addControls();
       this.emit('loaded');
       this.inited = true;
     }
@@ -208,7 +209,7 @@ export default class Scene extends EventEmitter implements ISceneService {
     this.layerService.initLayers();
     this.layerService.renderLayers();
     // 组件需要等待layer 初始化完成之后添加
-    this.controlService.addControls();
+
     this.logger.debug(`scene ${this.id} render`);
 
     this.rendering = false;

packages/core/src/services/source/ISourceService.ts

@@ -61,8 +61,10 @@ export interface ISource {
   data: IParserData;
   cluster: boolean;
   clusterOptions: Partial<IClusterOptions>;
+  setData(data: any): void;
   updateClusterData(zoom: number): void;
   getFeatureById(id: number): unknown;
+  getFeatureId(field: string, value: any): number | undefined;
   getClusters(zoom: number): any;
   getClustersLeaves(id: number): any;
 }

packages/layers/src/core/BaseLayer.ts

@@ -419,10 +419,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   }
 
   public setData(data: any, options?: ISourceCFG) {
-    this.sourceOption.data = data;
-    this.sourceOption.options = options;
-    this.hooks.init.call();
-    this.buildModels();
+    if (this.inited) {
+      this.layerSource.setData(data);
+    } else {
+      this.on('inited', () => {
+        this.layerSource.setData(data);
+      });
+    }
+
     return this;
   }
   public style(
@@ -641,6 +645,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
   public destroy() {
     this.hooks.beforeDestroy.call();
+    // 清除sources事件
+    this.layerSource.off('update', this.sourceEvent);
 
     // 清除所有属性以及关联的 vao
     this.styleAttributeService.clearAllAttributes();
@@ -673,11 +679,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
   public setSource(source: Source) {
     this.layerSource = source;
-    const bounds = this.mapService.getBounds();
     const zoom = this.mapService.getZoom();
     if (this.layerSource.cluster) {
       this.layerSource.updateClusterData(zoom);
     }
+    // source 可能会复用，会在其它layer被修改
+    this.layerSource.on('update', this.sourceEvent);
   }
   public getSource() {
     return this.layerSource;
@@ -793,6 +800,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   protected getDefaultConfig() {
     return {};
   }
+
+  private sourceEvent = () => {
+    this.dataState.dataSourceNeedUpdate = true;
+    this.reRender();
+  };
+
   private reRender() {
     if (this.inited) {
       this.layerService.renderLayers();

packages/layers/src/plugins/DataSourcePlugin.ts

@@ -13,9 +13,12 @@ export default class DataSourcePlugin implements ILayerPlugin {
       this.updateClusterData(layer);
     });
 
-    // 检测数据是不否需要更新
+    // 检测数据不否需要更新
     layer.hooks.beforeRenderData.tap('DataSourcePlugin', (flag) => {
-      return this.updateClusterData(layer);
+      const neeUpdate1 = this.updateClusterData(layer);
+      const neeUpdate2 = layer.dataState.dataSourceNeedUpdate;
+      layer.dataState.dataSourceNeedUpdate = false;
+      return neeUpdate1 || neeUpdate2;
     });
   }
 

packages/maps/src/BaseMapWrapper.ts

@@ -8,7 +8,6 @@ import {
   TYPES,
 } from '@antv/l7-core';
 import { Container } from 'inversify';
-
 export default class BaseMapWrapper<RawMap> implements IMapWrapper {
   @lazyInject(TYPES.ILogService)
   protected readonly logger: ILogService;
@@ -23,7 +22,7 @@ export default class BaseMapWrapper<RawMap> implements IMapWrapper {
   }
 
   public setContainer(sceneContainer: Container, id: string) {
-    // 首先使用全局配置服务校验地图参数
+    // // 首先使用全局配置服务校验地图参数
     const { valid, errorText } = this.configService.validateMapConfig(
       this.config,
     );
@@ -32,7 +31,6 @@ export default class BaseMapWrapper<RawMap> implements IMapWrapper {
       this.logger.error(errorText || '');
       return;
     }
-
     // 绑定用户传入的原始地图参数
     sceneContainer.bind<Partial<IMapConfig>>(TYPES.MapConfig).toConstantValue({
       ...this.config,

packages/maps/src/amap/index.ts

@@ -260,7 +260,7 @@ export default class AMapService
           resolve();
         }
       };
-      if (!document.getElementById(AMAP_SCRIPT_ID)) {
+      if (!document.getElementById(AMAP_SCRIPT_ID) || !mapInstance) {
         // 异步加载高德地图
         // @see https://lbs.amap.com/api/javascript-api/guide/abc/load
         // @ts-ignore

packages/scene/src/index.ts

@@ -61,7 +61,6 @@ class Scene
     // 创建场景容器
     const sceneContainer = createSceneContainer();
     this.container = sceneContainer;
-
     // 绑定地图服务
     map.setContainer(sceneContainer, id);
 

packages/source/src/source.ts

@@ -1,6 +1,7 @@
 import {
   IClusterOptions,
   IMapService,
+  IParseDataItem,
   IParserCfg,
   IParserData,
   ISourceCFG,
@@ -84,6 +85,13 @@ export default class Source extends EventEmitter {
     });
     this.init();
   }
+
+  public setData(data: any) {
+    this.rawData = data;
+    this.originData = cloneDeep(data);
+    this.init();
+    this.emit('update');
+  }
   public getClusters(zoom: number): any {
     return this.clusterIndex.getClusters(this.extent, zoom);
   }
@@ -128,7 +136,7 @@ export default class Source extends EventEmitter {
   }
   public getFeatureById(id: number): unknown {
     const { type = 'geojson' } = this.parser;
-    if (type === 'geojson') {
+    if (type === 'geojson' && !this.cluster) {
       return id < this.rawData.features.length
         ? this.rawData.features[id]
         : 'null';
@@ -137,6 +145,13 @@ export default class Source extends EventEmitter {
     }
   }
 
+  public getFeatureId(field: string, value: any): number | undefined {
+    const feature = this.data.dataArray.find((dataItem: IParseDataItem) => {
+      return dataItem[field] === name;
+    });
+    return feature?._id;
+  }
+
   private excuteParser(): void {
     const parser = this.parser;
     const type: string = parser.type || 'geojson';

stories/Components/components/chart.tsx

@@ -23,6 +23,7 @@ export default class ChartComponent extends React.Component {
     });
     addChart();
     scene.render();
+    this.scene = scene;
     function addChart() {
       Promise.all([
         fetch(

stories/Layers/components/Point.tsx

@@ -35,16 +35,22 @@ export default class Point3D extends React.Component {
       // .scale('point_count', {
       //   type: 'quantile',
       // })
-      // .size('point_count', [5, 10, 15, 20, 25])
-      .size(5)
+      .size('mag', [5, 10, 15, 20, 25])
       .animate(false)
       .active(true)
       .color('yellow')
       .style({
-        opacity: 1,
+        opacity: 0.5,
         strokeWidth: 1,
       });
     scene.addLayer(pointLayer);
+    scene.on('loaded', () => {
+      const newData = {
+        type: 'FeatureCollection',
+        features: pointsData.features.slice(0, 100),
+      };
+      pointLayer.setData(newData);
+    });
     this.scene = scene;
     // });
   }

stories/MapAdaptor/components/MapInstance.tsx

@@ -25,6 +25,7 @@ export default class GaodeMapComponent extends React.Component {
         center: [116.397428, 39.90923], // 初始化地图中心点
       });
       const scene = new Scene({
+        // @ts-ignore
         id: 'map',
         map: new GaodeMap({
           mapInstance: map,

stories/MapAdaptor/components/Mapbox.tsx

@@ -17,7 +17,7 @@ export default class MapboxComponent extends React.Component {
     const scene = new Scene({
       id: 'map',
       map: new Mapbox({
-        style: 'mapbox://styles/mapbox/streets-v9',
+        style: 'dark',
         center: [110.19382669582967, 30.258134],
         pitch: 0,
         zoom: 3,

yarn.lock

@@ -5259,6 +5259,11 @@ babel-plugin-transform-inline-consecutive-adds@^0.4.3:
   resolved "https://registry.npmjs.org/babel-plugin-transform-inline-consecutive-adds/-/babel-plugin-transform-inline-consecutive-adds-0.4.3.tgz#323d47a3ea63a83a7ac3c811ae8e6941faf2b0d1"
   integrity sha1-Mj1Ho+pjqDp6w8gRro5pQfrysNE=
 
+babel-plugin-transform-inline-environment-variables@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.npmjs.org/babel-plugin-transform-inline-environment-variables/-/babel-plugin-transform-inline-environment-variables-0.4.3.tgz#a3b09883353be8b5e2336e3ff1ef8a5d93f9c489"
+  integrity sha1-o7CYgzU76LXiM24/8e+KXZP5xIk=
+
 babel-plugin-transform-member-expression-literals@^6.9.4:
   version "6.9.4"
   resolved "https://registry.npmjs.org/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.9.4.tgz#37039c9a0c3313a39495faac2ff3a6b5b9d038bf"