Merge pull request #154 from antvis/setdata

Update docs

README.md

@@ -12,7 +12,7 @@ L7 focuses on geographic data expressiveness，interaction and design of geograp
 
 ## 🌄 l7 visualization demos
 
-![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SGU-QIZsnyoAAAAAAAAAAABkARQnAQ)
+![l7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*DACBQYunl7IAAAAAAAAAAABkARQnAQ)
 
 ## 🌟 Highlight features of L7 2.0
 

README.zh-CN.md

@@ -6,7 +6,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 
 L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
 
-![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JS8vTY5aeCcAAAAAAAAAAABkARQnAQ)
+![l7 demo](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*DACBQYunl7IAAAAAAAAAAABkARQnAQ)
 
 ## 🌟 核心特性
 

docs/api/scene.zh.md

@@ -322,6 +322,24 @@ scene.removeLayer(layer);
 
 移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
 
+### 场景事件
+
+#### loaded
+
+scene 初始化完成事件，scene 初始化完成添加 Layer
+
+```javascript
+scene.on('loaded', () => {});
+```
+
+#### resize
+
+地图容器变化事件
+
+```javascript
+scene.on('resize', () => {}); // 地图容器大小改变事件
+```
+
 ### 地图事件
 
 ```javascript
@@ -350,9 +368,3 @@ scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
 scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
 scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
 ```
-
-### 其它事件
-
-```javascript
-scene.on('resize', () => {}); // 地图容器大小改变事件
-```

examples/gallery/animate/demo/world.js

@@ -27,7 +27,7 @@ const scene = new Scene({
   })
 });
 Promise.all([
-  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
   fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
   fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
 ]).then(function onLoad([ world, dot, flyline ]) {

examples/gallery/animate/demo/world2.js

@@ -27,7 +27,7 @@ const scene = new Scene({
   })
 });
 Promise.all([
-  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
   fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
   fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
 ]).then(function onLoad([ world, dot, flyline ]) {

packages/core/src/services/component/IMarkerService.ts

@@ -23,6 +23,7 @@ export interface IMarkerService {
   addMarker(Marker: IMarker): void;
   addMarkers(): void;
   removeMarker(Marker: IMarker): void;
+  removeAllMarkers(): void;
   init(scene: Container): void;
   destroy(): void;
 }

packages/core/src/services/component/MarkerService.ts

@@ -18,6 +18,7 @@ export default class MarkerService implements IMarkerService {
       this.unAddMarkers.push(marker);
     }
   }
+
   public addMarkers(): void {
     this.unAddMarkers.forEach((marker: IMarker) => {
       marker.addTo(this.scene);
@@ -25,9 +26,15 @@ export default class MarkerService implements IMarkerService {
     });
     this.unAddMarkers = [];
   }
+
   public removeMarker(marker: IMarker): void {
     marker.remove();
   }
+
+  public removeAllMarkers(): void {
+    this.destroy();
+  }
+
   public init(scene: Container): void {
     // this.container = cfg.container;
     this.scene = scene;

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

@@ -264,6 +264,7 @@ export interface ILayerService {
   getLayers(): ILayer[];
   getLayer(name: string): ILayer | undefined;
   remove(layer: ILayer): void;
+  removeAllLayers(): void;
   updateRenderOrder(): void;
   renderLayers(): void;
   destroy(): void;

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

@@ -4,7 +4,7 @@ import { TYPES } from '../../types';
 import Clock from '../../utils/clock';
 import { IGlobalConfigService } from '../config/IConfigService';
 import { IRendererService } from '../renderer/IRendererService';
-import { ILayerService } from './ILayerService';
+import { ILayerModel, ILayerService } from './ILayerService';
 
 @injectable()
 export default class LayerService implements ILayerService {
@@ -52,6 +52,10 @@ export default class LayerService implements ILayerService {
     this.renderLayers();
   }
 
+  public removeAllLayers() {
+    this.destroy();
+  }
+
   public renderLayers() {
     // TODO：脏检查，只渲染发生改变的 Layer
     //
@@ -77,6 +81,7 @@ export default class LayerService implements ILayerService {
   public destroy() {
     this.layers.forEach((layer) => layer.destroy());
     this.layers = [];
+    this.renderLayers();
   }
 
   public startAnimate() {

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

@@ -11,6 +11,7 @@ export interface IPoint {
   y: number;
 }
 
+export type MapStyle = string | { [key: string]: any };
 export interface IMapWrapper {
   setContainer(container: Container, id: string): void;
 }
@@ -108,7 +109,7 @@ export interface IMapConfig<RawMap = {}> {
   /**
    * 底图样式
    */
-  style?: string;
+  style?: MapStyle;
   /**
    * 最小缩放等级
    */

packages/maps/src/amap/index.ts

@@ -13,6 +13,7 @@ import {
   IPoint,
   IViewport,
   MapServiceEvent,
+  MapStyle,
   TYPES,
 } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
@@ -249,7 +250,7 @@ export default class AMapService
           );
           // @ts-ignore
           this.map = new AMap.Map(this.$mapContainer, {
-            mapStyle: this.getMapStyle(style),
+            mapStyle: this.getMapStyle(style as string),
             zooms: [minZoom, maxZoom],
             viewMode: '3D',
             ...rest,
@@ -361,7 +362,7 @@ export default class AMapService
     }
   };
 
-  private getMapStyle(name: string) {
+  private getMapStyle(name: string): string {
     return MapTheme[name] ? MapTheme[name] : name;
   }
   private creatAmapContainer(id: string | HTMLDivElement) {

packages/maps/src/mapbox/index.ts

@@ -13,6 +13,7 @@ import {
   IPoint,
   IViewport,
   MapServiceEvent,
+  MapStyle,
   TYPES,
 } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
@@ -318,7 +319,10 @@ export default class MapboxService
     }
   }
 
-  private getMapStyle(name: string) {
+  private getMapStyle(name: MapStyle) {
+    if (typeof name !== 'string') {
+      return name;
+    }
     return MapTheme[name] ? MapTheme[name] : name;
   }
 }

packages/scene/src/index.ts

@@ -107,6 +107,7 @@ class Scene
     return this.mapService.map;
   }
 
+  // layer 管理
   public addLayer(layer: ILayer): void {
     // 为当前图层创建一个容器
     // TODO: 初始化的时候设置 容器
@@ -127,6 +128,10 @@ class Scene
     this.layerService.remove(layer);
   }
 
+  public removeAllLayer(): void {
+    this.layerService.removeAllLayers();
+  }
+
   public render(): void {
     this.sceneService.render();
   }
@@ -158,9 +163,14 @@ class Scene
     this.markerService.addMarker(marker);
   }
 
+  public removeAllMakers() {
+    this.markerService.removeAllMarkers();
+  }
+
   public addPopup(popup: IPopup) {
     this.popupService.addPopup(popup);
   }
+
   public on(type: string, handle: (...args: any[]) => void): void {
     SceneEventList.indexOf(type) === -1
       ? this.mapService.on(type, handle)

stories/Layers/components/data_update.tsx

@@ -53,14 +53,16 @@ export default class DataUpdate extends React.Component {
         opacity: 1,
       });
     scene.addLayer(layer);
-    function animateMarker(timestamp: number) {
-      layer.setData(pointOnCircle(timestamp / 1000));
-      scene.render();
-      requestAnimationFrame(animateMarker);
-    }
-    layer.on('inited', () => {
-      animateMarker(0);
-    });
+    layer.setData(pointOnCircle(1000));
+    scene.render();
+    // function animateMarker(timestamp: number) {
+    //   layer.setData(pointOnCircle(timestamp / 1000));
+    //   scene.render();
+    //   requestAnimationFrame(animateMarker);
+    // }
+    // layer.on('inited', () => {
+    //   animateMarker(0);
+    // });
   }
 
   public render() {