Merge pull request #171 from antvis/image

Image

.storybook/main.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+// Export a function. Accept the base config as the only param.
+module.exports = {
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.stories\**.svg$/,
+      loader: 'svg-inline-loader'
+    }
+    );
+    return config;
+  },
+};

.storybook/webpack.config.js

@@ -31,6 +31,10 @@ module.exports = ({ config }) => {
     test: /\.stories\.css?$/,
     use: ['style-loader', 'css-loader'],
   },
+  {
+    test: /\.stories\.svg$/,
+    loader: 'svg-inline-loader'
+  }
   );
 
   config.resolve.extensions.push('.ts', '.tsx', '.js', '.glsl');

docs/api/component/marker.zh.md

@@ -15,7 +15,7 @@ Marker
 
 - color        `string`   ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色
 - element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
-- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
+- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right
 - offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
 - extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息
 
@@ -37,6 +37,12 @@ Marker
 
 获取 marker dom Element
 
+### setElement
+
+- element `dom`
+
+设置 element 通过此方法更新 Marker 样式
+
 #### getLngLat
 
 获取 marker 经纬度坐标
@@ -45,6 +51,14 @@ Marker
 
 开启或者关闭 marker 弹出框
 
+#### openPopup
+
+打开 Popup
+
+### closePopup
+
+关闭 popup
+
 #### setPopup
 
 为 marker 设置 popup

docs/api/component/markerLayer.zh.md

@@ -33,11 +33,10 @@ scene.addMarkerLayer(markerLayer);
 
 #### option
 
-- cluster 是部分聚合 `boolean` 默认 `false`
+- cluster 聚合 `boolean` 默认 `false`
 
 - clusterOption 聚合配置
-- cluster 是部分聚合
-  - element `function`
+  - element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
 
 后续会增加更多配置项目
 
@@ -47,7 +46,7 @@ scene.addMarkerLayer(markerLayer);
 
 参数
 
-- marker `Marker` 需要添加的 Marker
+- marker `IMarker` 需要添加的 Marker
 
 添加 Marker
 

docs/api/component/popup.zh.md

@@ -60,6 +60,14 @@ var html =
 popup.setHtml(html);
 ```
 
+#### setDOMContent
+
+- 参数 htmlNode dom 对象
+  区别于 setHtml 对象只能传字符串
+
+**tips**
+如果需要将 react 组件渲染到 popup 可以用此方法。
+
 #### setText
 
 设置 popup 显示文本内容

docs/api/layer/point_layer/cluster.zh.md

@@ -73,6 +73,13 @@ const pointLayer = new PointLayer({})
           strokeWidth: 1,
         });
 ```
+[聚合图使用案例](../../../examples/point/cluster)
+
+### FAQ
+PointLayer的聚合图采用WebGL绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用MarkerLayer的聚合功能，你可以通过Dom完全自定义样式。
+
+[MarkerLayer聚合](../../component/markerLayer)
+
 
 
 

docs/api/source/source.en.md

@@ -7,6 +7,13 @@ order: 0
 
 source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
 
+- data
+- option
+  - cluster **boolean** 是否聚合
+  - clusterOption 聚合配置项
+  - parser 数据解析配置
+  - transforms 数据处理配置
+
 ### parser
 
 不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。
@@ -23,6 +30,14 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 ## API
 
+### cluster `boolean` 可选 可以只设置
+
+### clusterOption 可选
+
+- radius 聚合半径 **number** default 40
+- minZoom: 最小聚合缩放等级 **number** default 0
+- maxZoom: 最大聚合缩放等级 **number** default 16
+
 ### parser
 
 **配置项**
@@ -38,6 +53,17 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 layer.source(data);
 ```
 
+### Source 更新
+
+如果数据发生改变，可以需要更新数据
+可以通过调用 layer 的 setData 方法实现数据的更新
+
+具体见 [Layer](../layer/layer/#setdata)
+
+```javascript
+layer.setData(data);
+```
+
 #### JSON
 
 [JSON 数据格式解析](./json)
@@ -54,6 +80,23 @@ layer.source(data);
 
 ### transforms
 
+tranforms 处理的是的标准化之后的数据
+标准化之后的数据结构包括 coordinates 地理坐标字段，以及其他属性字段。
+
+处理完之后返回的也是标准数据
+
+```json
+[
+  {
+    "coordinates": [[]], // 地理坐标字段
+    "_id": "122", // 标准化之后新增字段
+    "name": "test",
+    "value": 1
+    // ....
+  }
+]
+```
+
 目前支持两种热力图使用的数据处理方法 grid，hexagon transform 配置项
 
 - type 数据处理类型

docs/api/source/source.zh.md

@@ -30,7 +30,7 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 ## API
 
-### cluster ``boolean` 可选 可以只设置
+### cluster `boolean` 可选 可以只设置
 
 ### clusterOption 可选
 
@@ -38,6 +38,8 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 - minZoom: 最小聚合缩放等级 **number** default 0
 - maxZoom: 最大聚合缩放等级 **number** default 16
 
+[聚合图使用案例](../../../examples/point/cluster)
+
 ### parser
 
 **配置项**

examples/point/marker/demo/clustermarker.js

@@ -31,6 +31,5 @@ function addMarkers() {
         markerLayer.addMarker(marker);
       }
       scene.addMarkerLayer(markerLayer);
-      scene.addMarkerLayer(markerLayer);
     });
 }

package.json

@@ -103,6 +103,7 @@
     "stylelint-config-standard": "^18.2.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.3.2",
+    "svg-inline-loader": "^0.8.0",
     "ts-jest": "^24.0.2",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",

packages/component/src/marker.ts

@@ -20,6 +20,7 @@ export default class Marker extends EventEmitter {
   private mapsService: IMapService<unknown>;
   private lngLat: ILngLat;
   private scene: Container;
+  private added: boolean = false;
   constructor(option?: Partial<IMarkerOption>) {
     super();
     this.markerOption = {
@@ -49,6 +50,8 @@ export default class Marker extends EventEmitter {
     this.registerMarkerEvent(element as HTMLElement);
     this.mapsService.on('camerachange', this.update);
     this.update();
+    this.added = true;
+    this.emit('added');
     return this;
   }
 
@@ -97,6 +100,55 @@ export default class Marker extends EventEmitter {
     return this.markerOption.element as HTMLElement;
   }
 
+  public setElement(el: HTMLElement): this {
+    if (!this.added) {
+      this.once('added', () => {
+        this.setElement(el);
+      });
+      return this;
+    }
+    const { element } = this.markerOption;
+    if (element) {
+      DOM.remove(element);
+    }
+    this.markerOption.element = el;
+    this.init();
+    this.mapsService.getMarkerContainer().appendChild(el as HTMLElement);
+    this.registerMarkerEvent(el as HTMLElement);
+    this.update();
+    return this;
+  }
+
+  public openPopup(): this {
+    if (!this.added) {
+      this.once('added', () => {
+        this.openPopup();
+      });
+      return this;
+    }
+    const popup = this.popup;
+    if (!popup) {
+      return this;
+    }
+    if (!popup.isOpen()) {
+      popup.addTo(this.scene);
+    }
+    return this;
+  }
+
+  public closePopup(): this {
+    if (!this.added) {
+      this.once('added', () => {
+        this.closePopup();
+      });
+    }
+    const popup = this.popup;
+    if (popup) {
+      popup.remove();
+    }
+    return this;
+  }
+
   public setPopup(popup: IPopup) {
     this.popup = popup;
     if (this.lngLat) {

packages/component/src/popup.ts

@@ -23,6 +23,7 @@ export default class Popup extends EventEmitter implements IPopup {
   private timeoutInstance: any;
   private container: HTMLElement;
   private tip: HTMLElement;
+  private scene: Container;
 
   constructor(cfg?: Partial<IPopupOption>) {
     super();
@@ -36,6 +37,7 @@ export default class Popup extends EventEmitter implements IPopup {
   public addTo(scene: Container) {
     this.mapsService = scene.get<IMapService>(TYPES.IMapService);
     this.mapsService.on('camerachange', this.update);
+    this.scene = scene;
     this.update();
     if (this.popupOption.closeOnClick) {
       this.timeoutInstance = setTimeout(() => {
@@ -45,6 +47,14 @@ export default class Popup extends EventEmitter implements IPopup {
     return this;
   }
 
+  public close(): void {
+    this.remove();
+  }
+
+  public open(): void {
+    this.addTo(this.scene);
+  }
+
   public setHTML(html: string) {
     const frag = window.document.createDocumentFragment();
     const temp = window.document.createElement('body');

packages/core/src/inversify.config.ts

@@ -73,10 +73,10 @@ container
   .bind<IGlobalConfigService>(TYPES.IGlobalConfigService)
   .to(GlobalConfigService)
   .inSingletonScope();
-container
-  .bind<IIconService>(TYPES.IIconService)
-  .to(IconService)
-  .inSingletonScope();
+// container
+//   .bind<IIconService>(TYPES.IIconService)
+//   .to(IconService)
+//   .inSingletonScope();
 container
   .bind<IShaderModuleService>(TYPES.IShaderModuleService)
   .to(ShaderModuleService)
@@ -85,10 +85,10 @@ container
   .bind<ILogService>(TYPES.ILogService)
   .to(LogService)
   .inSingletonScope();
-container
-  .bind<IFontService>(TYPES.IFontService)
-  .to(FontService)
-  .inSingletonScope();
+// container
+//   .bind<IFontService>(TYPES.IFontService)
+//   .to(FontService)
+//   .inSingletonScope();
 
 // @see https://github.com/inversify/InversifyJS/blob/master/wiki/inheritance.md#what-can-i-do-when-my-base-class-is-provided-by-a-third-party-module
 decorate(injectable(), EventEmitter);
@@ -160,7 +160,6 @@ export function createSceneContainer() {
   sceneContainer
     .bind<string>(TYPES.SceneID)
     .toConstantValue(`${sceneIdCounter++}`);
-
   sceneContainer
     .bind<ILayerService>(TYPES.ILayerService)
     .to(LayerService)
@@ -189,6 +188,14 @@ export function createSceneContainer() {
     .bind<IMarkerService>(TYPES.IMarkerService)
     .to(MarkerService)
     .inSingletonScope();
+  sceneContainer
+    .bind<IIconService>(TYPES.IIconService)
+    .to(IconService)
+    .inSingletonScope();
+  sceneContainer
+    .bind<IFontService>(TYPES.IFontService)
+    .to(FontService)
+    .inSingletonScope();
 
   sceneContainer
     .bind<IPopupService>(TYPES.IPopupService)

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

@@ -19,6 +19,9 @@ export interface IMarker {
   setExtData(data: any): void;
   setPopup(popup: IPopup): void;
   togglePopup(): this;
+  openPopup(): this;
+  closePopup(): this;
+  setElement(el: HTMLElement): this;
 }
 export interface IMarkerService {
   container: HTMLElement;

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

@@ -10,10 +10,13 @@ export interface IPopup {
   setText(text: string): this;
   setMaxWidth(maxWidth: string): this;
   isOpen(): boolean;
+  open(): void;
+  close(): void;
 }
 export interface IPopupService {
   addPopup(popup: IPopup): void;
   removePopup(popup: IPopup): void;
   init(scene: Container): void;
+  initPopup(): void;
   destroy(): void;
 }

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

@@ -7,6 +7,8 @@ import { IPopup, IPopupService } from './IPopupService';
 export default class PopupService implements IPopupService {
   private scene: Container;
   private popup: IPopup;
+  private mapsService: IMapService;
+  private unAddPopup: IPopup | null;
 
   public removePopup(popup: IPopup): void {
     popup.remove();
@@ -20,11 +22,22 @@ export default class PopupService implements IPopupService {
     if (this.popup) {
       this.popup.remove();
     }
-    popup.addTo(this.scene);
-    this.popup = popup;
+    if (this.mapsService.map && this.mapsService.getMarkerContainer()) {
+      popup.addTo(this.scene);
+      this.popup = popup;
+    } else {
+      this.unAddPopup = popup;
+    }
+  }
+  public initPopup() {
+    if (this.unAddPopup) {
+      this.addPopup(this.unAddPopup);
+      this.unAddPopup = null;
+    }
   }
 
   public init(scene: Container) {
     this.scene = scene;
+    this.mapsService = scene.get<IMapService>(TYPES.IMapService);
   }
 }

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

@@ -10,6 +10,7 @@ import { IIconService } from '../asset/IIconService';
 import { ICameraService, IViewport } from '../camera/ICameraService';
 import { IControlService } from '../component/IControlService';
 import { IMarkerService } from '../component/IMarkerService';
+import { IPopupService } from '../component/IPopupService';
 import { IGlobalConfigService, ISceneConfig } from '../config/IConfigService';
 import { ICoordinateSystemService } from '../coordinate/ICoordinateSystemService';
 import { IInteractionService } from '../interaction/IInteractionService';
@@ -69,6 +70,9 @@ export default class Scene extends EventEmitter implements ISceneService {
   @inject(TYPES.IMarkerService)
   private readonly markerService: IMarkerService;
 
+  @inject(TYPES.IPopupService)
+  private readonly popupService: IPopupService;
+
   /**
    * 是否首次渲染
    */
@@ -139,9 +143,11 @@ export default class Scene extends EventEmitter implements ISceneService {
       // 重新绑定非首次相机更新事件
       this.map.onCameraChanged(this.handleMapCameraChanged);
       this.map.addMarkerContainer();
+
       // 初始化未加载的marker;
       this.markerService.addMarkers();
       this.markerService.addMarkerLayers();
+      this.popupService.initPopup();
       // 地图初始化之后 才能初始化 container 上的交互
       this.interactionService.init();
       this.logger.debug(`map ${this.id} loaded`);

packages/layers/src/core/BaseLayer.ts

@@ -230,10 +230,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     this.configService.setLayerConfig(sceneId, this.id, {});
 
     // 全局容器服务
+
+    // 场景容器服务
     this.iconService = this.container.get<IIconService>(TYPES.IIconService);
     this.fontService = this.container.get<IFontService>(TYPES.IFontService);
 
-    // 场景容器服务
     this.rendererService = this.container.get<IRendererService>(
       TYPES.IRendererService,
     );

packages/layers/src/core/BaseModel.ts

@@ -32,16 +32,18 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
   @lazyInject(TYPES.IGlobalConfigService)
   protected readonly configService: IGlobalConfigService;
 
-  @lazyInject(TYPES.IIconService)
-  protected readonly iconService: IIconService;
+  // @lazyInject(TYPES.IIconService)
+  // protected readonly iconService: IIconService;
 
-  @lazyInject(TYPES.IFontService)
-  protected readonly fontService: IFontService;
+  // @lazyInject(TYPES.IFontService)
+  // protected readonly fontService: IFontService;
 
   @lazyInject(TYPES.IShaderModuleService)
   protected readonly shaderModuleService: IShaderModuleService;
 
   protected rendererService: IRendererService;
+  protected iconService: IIconService;
+  protected fontService: IFontService;
   protected styleAttributeService: IStyleAttributeService;
   protected mapService: IMapService;
   protected cameraService: ICameraService;
@@ -56,6 +58,12 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
       .getContainer()
       .get<IStyleAttributeService>(TYPES.IStyleAttributeService);
     this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService);
+    this.iconService = layer
+      .getContainer()
+      .get<IIconService>(TYPES.IIconService);
+    this.fontService = layer
+      .getContainer()
+      .get<IFontService>(TYPES.IFontService);
     this.cameraService = layer
       .getContainer()
       .get<ICameraService>(TYPES.ICameraService);

packages/layers/src/point/models/image.ts

@@ -106,6 +106,8 @@ export default class ImageModel extends BaseModel {
     const { createTexture2D } = this.rendererService;
     this.texture = createTexture2D({
       data: this.iconService.getCanvas(),
+      mag: gl.LINEAR,
+      min: gl.LINEAR,
       width: 1024,
       height: this.iconService.canvasHeight || 128,
     });

packages/layers/src/point/shaders/image_frag.glsl

@@ -9,6 +9,7 @@ uniform float u_stroke_opacity : 1;
 uniform float u_opacity : 1;
 
 varying float v_size;
+#pragma include "picking"
 void main(){
 vec2 pos= v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;
 vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
@@ -24,5 +25,5 @@ float r = 1.0 - smoothstep(radius-(radius*0.01),
   }else {
         gl_FragColor= step(0.01, textureColor.x) * v_color;
   }
-  return;
+  gl_FragColor = filterColor(gl_FragColor);
 }

packages/layers/src/point/shaders/image_vert.glsl

@@ -11,6 +11,7 @@ uniform float u_stroke_width : 1;
 varying float v_size;
 
 #pragma include "projection"
+#pragma include "picking"
 
 void main() {
    v_color = a_Color;
@@ -20,5 +21,6 @@ void main() {
 
    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
    gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
+   setPickingColor(a_PickingColor);
 
 }

packages/layers/src/point/shaders/text_frag.glsl

@@ -13,6 +13,7 @@ varying vec4 v_color;
 varying vec2 v_uv;
 varying float v_gamma_scale;
 
+#pragma include "picking"
 void main() {
   // get sdf from atlas
   float dist = texture2D(u_sdf_map, v_uv).a;
@@ -27,4 +28,5 @@ void main() {
   highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
 
   gl_FragColor = mix(v_color * u_opacity, u_stroke, smoothstep(0., 0.5, 1. - dist)) * alpha;
+  gl_FragColor = filterColor(gl_FragColor);
 }

packages/layers/src/point/shaders/text_vert.glsl

@@ -14,6 +14,7 @@ varying float v_gamma_scale;
 varying vec4 v_color;
 
 #pragma include "projection"
+#pragma include "picking"
 
 void main() {
   v_color = a_Color;
@@ -29,6 +30,6 @@ void main() {
   gl_Position = vec4(projected_position.xy / projected_position.w
     + a_textOffsets * fontScale / u_ViewportSize * 2. * u_DevicePixelRatio, 0.0, 1.0);
   v_gamma_scale = gl_Position.w;
-
+  setPickingColor(a_PickingColor);
 
 }

packages/utils/src/dom.ts

@@ -142,3 +142,13 @@ export function triggerResize() {
     window.dispatchEvent(evt);
   }
 }
+
+export function printCanvas(canvas: HTMLCanvasElement) {
+  const css = [
+    'padding: ' + (canvas.height / 2 - 8) + 'px ' + canvas.width / 2 + 'px;',
+    'line-height: ' + canvas.height + 'px;',
+    'background-image: url(' + canvas.toDataURL() + ');',
+  ];
+  // tslint:disable-next-line:no-console
+  console.log('%c\n', css.join(''));
+}

stories/Components/components/Marker.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7';
+import { Marker, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -26,10 +26,22 @@ export default class MarkerComponent extends React.Component {
     });
     this.scene = scene;
 
-    const marker = new Marker().setLnglat({
-      lng: 120.184824,
-      lat: 30.248341,
-    });
+    const popup = new Popup({
+      offsets: [0, 20],
+    }).setText('hello');
+
+    const marker = new Marker()
+      .setLnglat({
+        lng: 120.184824,
+        lat: 30.248341,
+      })
+      .setPopup(popup);
+
+    scene.addMarker(marker);
+
+    const el = document.createElement('h1');
+    el.innerHTML = 'Marker';
+    marker.setElement(el);
 
     const arr = [
       {
@@ -54,6 +66,7 @@ export default class MarkerComponent extends React.Component {
       .style({
         opacity: 1,
       });
+
     scene.addLayer(pointLayer);
     scene.addMarker(marker);
 

stories/Layers/components/PointImage.tsx

@@ -47,6 +47,9 @@ export default class PointImage extends React.Component {
       .shape('name', ['00', '01', '02'])
       .size(30);
     scene.addLayer(imageLayer);
+    imageLayer.on('click', (e) => {
+      console.log(e);
+    });
   }
 
   public render() {

stories/Layers/components/Text.tsx

@@ -53,6 +53,9 @@ export default class TextLayerDemo extends React.Component {
         // strokeOpacity: 1.0,
       });
     scene.addLayer(pointLayer);
+    pointLayer.on('click', (e) => {
+      console.log(e);
+    });
 
     this.scene = scene;
 

stories/MapAdaptor/Map.stories.tsx

@@ -7,6 +7,7 @@ import AMapinstance from './components/MapInstance';
 import Mixed from './components/Mixed';
 import MultiAMap from './components/MultiAMap';
 import MultiMapbox from './components/MultiMapbox';
+import MultiAMapLayer from './components/multiMaptest';
 // @ts-ignore
 import notes from './Map.md';
 // @ts-ignore
@@ -26,6 +27,9 @@ storiesOf('地图底图', module)
   .add('多个高德地图实例', () => <MultiAMap />, {
     notes: { markdown: notes },
   })
+  .add('多个高德图层', () => <MultiAMapLayer />, {
+    notes: { markdown: notes },
+  })
   .add('多个 Mapbox 实例', () => <MultiMapbox />, {
     notes: { markdown: notes },
   })

stories/MapAdaptor/components/MultiAMap.tsx

@@ -87,12 +87,12 @@ export default class MultiGaodeMap extends React.Component {
         opacity: 0.3,
         strokeWidth: 2,
       });
-    scene1.on('loaded', () => {
-      scene1.addLayer(pointLayer);
-    });
-    scene2.on('loaded', () => {
-      scene2.addLayer(pointLayer2);
-    });
+    // scene1.on('loaded', () => {
+    scene1.addLayer(pointLayer);
+    // });
+    // scene2.on('loaded', () => {
+    scene2.addLayer(pointLayer2);
+    // });
 
     this.scene1 = scene1;
     this.scene2 = scene2;

stories/MapAdaptor/components/image/icon.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 58 (84663) - https://sketch.com -->
+    <title>cloth</title>
+    <desc>Created with Sketch.</desc>
+    <g id="cloth" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2-Copy-21">
+            <circle id="Oval" fill="#26BEBA" cx="19" cy="19" r="19"></circle>
+            <circle id="Oval-Copy" fill="#F7FFFF" cx="19" cy="19" r="16"></circle>
+            <g id="Group-12" transform="translate(10.000000, 9.000000)" fill="#26BEBA">
+                <path d="M12.91,6.00427273 L12.9103448,19 L9.43448276,19 L9.434,9.48627273 L12.91,6.00427273 Z M4.965,5.47627273 L8.441,8.95827273 L8.44137931,19 L4.96551724,19 L4.965,5.47627273 Z M17.8758621,2.48727273 L17.8758621,19 L13.9034483,19 L13.903,5.00927273 L16.421,2.48727273 L17.8758621,2.48727273 Z M1.98,2.48727273 L3.972,4.48227273 L3.97241379,19 L-1.59872116e-14,19 L-1.59872116e-14,2.48727273 L1.98,2.48727273 Z M12.9206807,-1.80522264e-13 L15.0273712,2.11052089 L9.05841469,8.0903301 L9.003,8.035 L8.9482669,8.0903301 L2.97931034,2.11052089 L5.08600089,-5.65991698e-13 L9.003,3.924 L12.9206807,-1.80522264e-13 Z M11.4735522,6.66133815e-16 L8.97732484,2.50131221 L6.48055222,6.66133815e-16 L11.4735522,6.66133815e-16 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>

stories/MapAdaptor/components/multiMaptest.tsx

@@ -0,0 +1,118 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+export default class MultiGaodeMap extends React.Component {
+  private scene1: Scene;
+  private scene2: Scene;
+
+  public componentWillUnmount() {
+    this.scene1.destroy();
+    this.scene2.destroy();
+  }
+
+  public async componentDidMount() {
+    const data = {
+      schoolGps: [120.46970867, 27.25603049],
+      dataObs: {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Point',
+              coordinates: [120.46753644, 27.22434614],
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Point',
+              coordinates: [120.48454783, 27.25587721],
+            },
+          },
+        ],
+      },
+      dataObs2: {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Point',
+              coordinates: [120.47067657, 27.26350309],
+            },
+          },
+        ],
+      },
+    };
+    const scene1 = new Scene({
+      id: 'map1',
+      map: new GaodeMap({
+        center: data.schoolGps as [number, number],
+        zoom: 12,
+        style: 'light',
+      }),
+    });
+    scene1.addImage(
+      '02',
+      'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
+    );
+    const scene2 = new Scene({
+      id: 'map2',
+      map: new GaodeMap({
+        center: data.schoolGps as [number, number],
+        zoom: 12,
+        style: 'dark',
+      }),
+    });
+    scene2.addImage(
+      '02',
+      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KFyuTZxN6wYAAAAAAAAAAABkARQnAQ',
+    );
+    const imageLayer1 = new PointLayer()
+      .source(data.dataObs)
+      .shape('02')
+      .size(12);
+
+    const imageLayer2 = new PointLayer()
+      .source(data.dataObs2)
+      .shape('02')
+      .size(12);
+    scene1.addLayer(imageLayer1);
+    scene2.addLayer(imageLayer2);
+
+    this.scene1 = scene1;
+    this.scene2 = scene2;
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map1"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: '50%',
+            bottom: 0,
+          }}
+        />
+        <div
+          id="map2"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

yarn.lock

@@ -8330,7 +8330,7 @@ detect-indent@^5.0.0:
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
   integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
 
-detect-libc@^1.0.2, detect-libc@^1.0.3:
+detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
@@ -12535,7 +12535,7 @@ i18next@^19.0.0:
   dependencies:
     "@babel/runtime" "^7.3.1"
 
-iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -14782,7 +14782,7 @@ loader-utils@1.2.3, loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^0.2.16:
+loader-utils@^0.2.11, loader-utils@^0.2.16:
   version "0.2.17"
   resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
@@ -16092,15 +16092,6 @@ nearley@^2.7.10:
     randexp "0.4.6"
     semver "^5.4.1"
 
-needle@^2.2.1:
-  version "2.4.0"
-  resolved "https://registry.npmjs.org/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
-  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -16303,22 +16294,6 @@ node-object-hash@^2.0.0:
   resolved "https://registry.npmjs.org/node-object-hash/-/node-object-hash-2.0.0.tgz#9971fcdb7d254f05016bd9ccf508352bee11116b"
   integrity sha512-VZR0zroAusy1ETZMZiGeLkdu50LGjG5U1KHZqTruqtTyQ2wfWhHG2Ow4nsUbfTFGlaREgNHcCWoM/OzEm6p+NQ==
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.29, node-releases@^1.1.44:
   version "1.1.45"
   resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.45.tgz#4cf7e9175d71b1317f15ffd68ce63bce1d53e9f2"
@@ -16504,7 +16479,7 @@ npm-package-arg@^5.1.2:
     semver "^5.1.0"
     validate-npm-package-name "^3.0.0"
 
-npm-packlist@^1.1.6, npm-packlist@^1.4.4:
+npm-packlist@^1.4.4:
   version "1.4.7"
   resolved "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
   integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==
@@ -16565,7 +16540,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -21101,6 +21076,11 @@ simple-get@^3.0.3, simple-get@^3.1.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+simple-html-tokenizer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
+  integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -22256,6 +22236,15 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
+svg-inline-loader@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.0.tgz#7e9d905d80d0b4e68d2df21afcd08ee9e9a3ea6e"
+  integrity sha512-rynplY2eXFrdNomL1FvyTFQlP+dx0WqbzHglmNtA9M4IHRC3no2aPAl3ny9lUpJzFzFMZfWRK5YIclNU+FRePA==
+  dependencies:
+    loader-utils "^0.2.11"
+    object-assign "^4.0.1"
+    simple-html-tokenizer "^0.1.1"
+
 svg-parser@^2.0.0:
   version "2.0.3"
   resolved "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.3.tgz#a38f2e4e5442986f7ecb554c11f1411cfcf8c2b9"
@@ -22414,7 +22403,7 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
-tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8:
+tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
   version "4.4.13"
   resolved "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
   integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==