Merge branch 'master' of https://github.com/antvis/L7

docs/api/FAQ.zh.md

@@ -13,3 +13,13 @@ Error: Cannot apply @injectable decorator multiple times.
 
 🌟 解决方法：  
 删除 node_modules 下所有不同版本的 L7 包，重新安装启动即可
+
+### 禁止地图交互
+
+1. 初始化的时候可以在 map 配置项设置
+
+- 高德地图可查看 https://lbs.amap.com/api/javascript-api/reference/map
+- mapbox https://docs.mapbox.com/mapbox-gl-js/api/#map
+
+2. 加载完成后设置
+   调用 scene 的 [setMapStatus](./scene/#setmapstatus) 方法

docs/api/changelog.zh.md

@@ -5,9 +5,39 @@ order: 15
 
 `markdown:docs/common/style.md`
 
-## 20201.05.31 2.4 正式版本
+## 2022.01.17 2.7 正式版本
 
-###✨ Features
+### ✨ Features
+
+- 新增简单点、简单线
+- 新增墙图层
+- 新增风场图层
+
+### 🍏 Improvements
+
+- 柱图支持生长动画
+- 柱图支持配置渐变、光照、深度
+- 点图层支持等面积模式
+- 线图层支持配置高度
+- 弧线支持动态配置弧度
+- 面图层支持配置径向渐变
+- 拾取效果支持配置混合，光照计算
+- color 增加图层保底颜色设置
+- 增加 pointLayer image mipmap 支持
+- 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象
+
+### 🐞 Bug Fixes
+
+- 修复线图层在存在高度的情况下，不同地图，不同场景下的效果兼容
+- 修复 threejs 图层导致 L7 图层失效的问题
+- 修复 pointLayer meter 单个数据失效的情况
+- 修复 marker 在 cluster getMakers 失效
+- 取消在 shape 方法执行后的暴力更新
+- 修复纹理贴图在 zoom 大于 12 时存在错位的问题
+
+## 2021.05.31 2.4 正式版本
+
+### ✨ Features
 
 - 支持高德 2.0 JSAPI
 - 支持 iconfont 字体图标功能
@@ -24,7 +54,7 @@ order: 15
 
 ## 2020.04.20 2.2 正式版本
 
-###✨ Features
+### ✨ Features
 
 #### [L7-Draw 地图绘制组件发布](../draw/start)
 
@@ -52,7 +82,7 @@ order: 15
 
 ## 2020.03.12 2.1 正式版
 
-###✨ Features
+### ✨ Features
 
 - 新增 l7-react 版本
 - 可自定义样式的聚合图 MakerLayer
@@ -74,7 +104,7 @@ order: 15
 
 [Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
 
-###✨ Features
+### ✨ Features
 
 • 新增弧线图，路径图动画功能
 

docs/api/component/marker.en.md

@@ -87,3 +87,5 @@ new L7.Marker({
   .setLnglat(item.coordinates)
   .setPopup(popup);
 ```
+
+[demo1](../../../examples/tutorial/marker#amap)

docs/api/component/marker.zh.md

@@ -140,4 +140,4 @@ marker.on('click', (e) => {});
 
 ## demo 地址
 
-[demo1](../../../examples/tutorial/marker)
+[demo1](../../../examples/tutorial/marker#amap)

docs/api/component/popup.en.md

@@ -153,5 +153,5 @@ popup.on('close', () => {});
 
 ## demo 地址
 
-[demo1](../../../examples/point/column)
+[demo1](../../../examples/point/column#column_linear)
-[demo2](../../../examples/line/path)
+[demo2](../../../examples/line/path#bus_light)

docs/api/component/popup.zh.md

@@ -146,5 +146,5 @@ popup.on('close', () => {});
 
 ## demo 地址
 
-[demo1](../../../examples/point/column)
+[demo1](../../../examples/point/column#column_linear)
-[demo2](../../../examples/line/path)
+[demo2](../../../examples/line/path#bus_light)

docs/api/line_layer/arc3d.zh.md

@@ -29,9 +29,9 @@ const layer = new LineLayer({})
   });
 ```
 
-<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ'>
 
-[在线案例](../../../examples/gallery/basic#arcCircle)
+[在线案例](../../../examples/line/arc#trip_arc)
 
 ### shape
 

docs/api/line_layer/features/animate.zh.md

@@ -29,7 +29,7 @@ L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
 如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
 
 
-<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*W-m5Q6yrL_UAAAAAAAAAAAAAARQnAQ'>
+<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mo_7Q6sTqOIAAAAAAAAAAAAAARQnAQ'>
 
 [在线案例](../../../examples/gallery/animate#plane_animate2)
 

docs/api/line_layer/features/linear.zh.md

@@ -22,6 +22,6 @@ const layer = new LineLayer({})
   });
 ```
 
-<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*RZEgSYZLeJIAAAAAAAAAAAAAARQnAQ'>
+<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*8DYQTZeQyZ4AAAAAAAAAAAAAARQnAQ'>
 
 [在线案例](../../../examples/line/arc#trip_arc_dark_linear)

docs/api/line_layer/features/texture.zh.md

@@ -31,7 +31,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785
 - lineTexture   指定是否开启纹理贴图能力
 - iconStep      指定贴图在线图层上面排布的间隔
 
-<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i2fJSJHpVGcAAAAAAAAAAAAAARQnAQ'>
+<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
 
 [在线案例](../../../examples/gallery/animate#animate_path_texture)
 
@@ -67,5 +67,5 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785
 
 ```
 
-[在线案例](../../../examples/gallery/animate#route_line)
+[在线案例](../../../examples/line/animate#plane_animate2)
 

docs/api/line_layer/features/thetaOffset.zh.md

@@ -20,6 +20,6 @@ const layer = new LineLayer({})
     thetaOffset: 0.35,
   });
 ```
-<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i6d6SqQgjAwAAAAAAAAAAAAAARQnAQ'>
+<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*qRFaR7Ko274AAAAAAAAAAAAAARQnAQ'>
 
 [在线案例](../../../examples/gallery/animate#route_line)

docs/api/line_layer/linelayer.zh.md

@@ -87,6 +87,6 @@ lineLayer.size([1, 2]); // 宽度为1，高度2
 
 `markdown:docs/api/line_layer/features/texture.zh.md`
 
-[在线案例](../../../examples/line/isoline#height)
+`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
 
 `markdown:docs/common/layer/base.md`

docs/api/line_layer/path.zh.md

@@ -12,7 +12,7 @@ order: 1
 import { LineLayer } from '@antv/l7';
 ```
 
-<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
 
 [在线案例](../../../examples/gallery/animate#animate_path)
 

docs/api/point_layer/simple.zh.md

@@ -37,8 +37,6 @@ import { PointLayer } from '@antv/l7';
 scene.getPointSizeRange(); // Float32Array - [min, max]
 ```
 
-## 相关 demo
-
 [在线案例](../../../examples/point/dot#normal2)
 
 `markdown:docs/common/layer/base.md`

docs/api/polygon_layer/extrude.zh.md

@@ -47,6 +47,6 @@ style({
 });
 ```
 
-[光照拾取](../../../../examples/react/covid#covid_extrude)
+[光照拾取](/zh/examples/react/covid#covid_extrude)
 
 `markdown:docs/common/layer/base.md`

docs/api/scene.zh.md

@@ -803,15 +803,3 @@ scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发
 scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发
 scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
 ```
-
-## FAQ
-
-### 禁止地图交互
-
-1. 初始化的时候可以在 map 配置项设置
-
-- 高德地图可查看 https://lbs.amap.com/api/javascript-api/reference/map
-- mapbox https://docs.mapbox.com/mapbox-gl-js/api/#map
-
-2. 加载完成后设置
-   调用 scene 的 [setMapStatus](./scene/#setmapstatus) 方法

docs/api/source/json.zh.md

@@ -41,7 +41,7 @@ layer.source(data, {
 });
 ```
 
-[JOSN 数据 demo 示例](../../../examples/gallery/basic)
+[JOSN 数据 demo 示例](../../../examples/gallery/animate#animate_path_texture)
 
 ### 通用解析方式
 

docs/api/source/source.zh.md

@@ -40,7 +40,7 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 - minZoom: 最小聚合缩放等级 **number** default 0
 - maxZoom: 最大聚合缩放等级 **number** default 16
 
-[聚合图使用案例](../../../examples/point/cluster)
+[聚合图使用案例](../../../examples/point/cluster#cluster)
 
 ### parser
 

docs/api/wind.zh.md

@@ -18,6 +18,7 @@ import { WindLayer } from '@antv/l7';
 (data, options) => WindLayer, 设置风场相关信息的函数
 
 - data: string 存储风场信息的图片地址
+  🌟 [数据获取](https://github.com/mapbox/webgl-wind#downloading-weather-data)
 - options:
 
 ```js

docs/common/layer/layer_encode.md

@@ -7,9 +7,9 @@
 - data { geojson | json | csv }
 - config   可选   数据源配置项
   - parser 数据解析，默认是解析层 geojson
-  - transforms [transform，transform ]  数据处理转换 可设置多个
+  - transforms [transform，transform ]  数据处理转换可设置多个
 
-parser 和  transforms [见 source 文档](../../source/source)
+parser 和  transforms [见 source 文档](/zh/docs/api/source/source)
 
 ```javascript
 layer.source(data, {

docs/common/layer/layer_texture.md

@@ -34,6 +34,6 @@ const layer = new LineLayer({
   });
 ```
 
-<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i2fJSJHpVGcAAAAAAAAAAAAAARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
 
-[在线案例](../../examples/gallery/animate#animate_path_texture)
+[在线案例](../../examples/line/animate#plane_animate2)

examples/line/arc/demo/meta.json

@@ -12,7 +12,7 @@
     {
       "filename": "trip_arc_dark.js",
       "title": "3D 弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Qg8sQ4H9RVsAAAAAAAAAAAAAARQnAQ"
 
     },
     {

examples/line/arc/demo/trip_arc_dark.js

@@ -18,7 +18,7 @@ scene.on('loaded', () => {
       const layer = new LineLayer({})
         .source(data, {
           parser: {
-            type: 'csv',
+            type: 'json',
             x: 'from_lon',
             y: 'from_lat',
             x1: 'to_lon',
@@ -26,7 +26,7 @@ scene.on('loaded', () => {
           }
         })
         .size(1)
-        .shape('arc')
+        .shape('arc3d')
         .color('#FF7C6A')
         .style({
           segmentNumber: 15,

examples/point/cluster/demo/cluster2.js

@@ -0,0 +1,62 @@
+import { Scene, PointLayer, Source } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [ 120.19382669582967, 30.258134 ],
+    pitch: 0,
+    style: 'dark',
+    zoom: 3
+  })
+});
+scene.on('loaded', () => {
+  fetch('https://gw.alipayobjects.com/os/bmw-prod/87e40417-a5da-4fdb-8313-c796ea15f982.csv')
+    .then(res => res.text())
+    .then(data => {
+      const dataSource = new Source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng',
+          y: 'lat'
+
+        },
+        cluster: true
+      });
+      const pointLayer = new PointLayer({
+        autoFit: true
+      })
+        .source(dataSource)
+        .shape('circle')
+        .scale('point_count', {
+          type: 'quantile'
+        })
+        .size('point_count', [ 5, 10, 15, 20, 25 ])
+        .active(true)
+        .color('rgb(73,167,86)')
+        .style({
+          opacity: 1,
+          strokeWidth: 1,
+          stroke: '#fff'
+        });
+
+      // 聚合图标注
+      const pointLayerText = new PointLayer({
+        autoFit: false
+      })
+        .source(dataSource)
+        .shape('point_count', 'text')
+        .size(15)
+        .active(true)
+        .color('#fff')
+        .style({
+          opacity: 1,
+          strokeWidth: 0,
+          stroke: '#fff'
+
+        });
+
+      scene.addLayer(pointLayer);
+      scene.addLayer(pointLayerText);
+    });
+});

examples/point/cluster/demo/meta.json

@@ -7,7 +7,12 @@
     {
       "filename": "cluster.js",
       "title": "聚合图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MowATbzWK_QAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "cluster2.js",
+      "title": "充电桩分布聚合图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_08cc33/afts/img/A*dy0NSJHoRSYAAAAAAAAAAAAAARQnAQ"
     }
 
   ]

examples/tutorial/control/API.en.md

@@ -0,0 +1,4 @@
+---
+title: API
+---
+`markdown:docs/api/base.en.md`

examples/tutorial/control/API.zh.md

@@ -0,0 +1,4 @@
+---
+title: API
+---
+`markdown:docs/api/base.zh.md`

examples/tutorial/layer/API.en.md

@@ -0,0 +1,4 @@
+---
+title: API
+---
+`markdown:docs/api/base.en.md`

examples/tutorial/layer/API.zh.md

@@ -0,0 +1,4 @@
+---
+title: API
+---
+`markdown:docs/api/base.zh.md`

examples/tutorial/map/API.en.md

@@ -0,0 +1,4 @@
+---
+title: API
+---
+`markdown:docs/api/base.en.md`

examples/tutorial/map/API.zh.md

@@ -0,0 +1,4 @@
+---
+title: API
+---
+`markdown:docs/api/base.zh.md`

examples/tutorial/marker/API.en.md

@@ -0,0 +1,4 @@
+---
+title: API
+---
+`markdown:docs/api/base.en.md`

examples/tutorial/marker/API.zh.md

@@ -0,0 +1,4 @@
+---
+title: API
+---
+`markdown:docs/api/base.zh.md`

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

@@ -98,6 +98,7 @@ export interface ILayer {
   name: string; //
   inited: boolean; // 是否初始化完成
   zIndex: number;
+  clusterZoom: number;
   plugins: ILayerPlugin[];
   layerModelNeedUpdate: boolean;
   styleNeedUpdate: boolean;

packages/layers/src/core/BaseLayer.ts

@@ -73,6 +73,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public selectedFeatureID: number | null = null;
   public styleNeedUpdate: boolean = false;
   public rendering: boolean;
+  public clusterZoom: number = 0; // 聚合等级标记
 
   public dataState: IDataState = {
     dataSourceNeedUpdate: false,
@@ -491,6 +492,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
       data,
       options,
     };
+    this.clusterZoom = 0;
     return this;
   }
   public setData(data: any, options?: ISourceCFG) {
@@ -862,6 +864,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     }
 
     this.layerSource = source;
+    this.clusterZoom = 0;
 
     // 已 inited 且启用聚合进行更新聚合数据
     if (this.inited && this.layerSource.cluster) {
@@ -1093,7 +1096,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     if (autoFit) {
       this.fitBounds(fitBoundsOptions);
     }
-
+    // 对外暴露事件
     this.emit('dataUpdate');
     this.reRender();
   };

packages/layers/src/plugins/DataSourcePlugin.ts

@@ -46,10 +46,14 @@ export default class DataSourcePlugin implements ILayerPlugin {
     // 如果 dataSource 有更新，跳过 zoom 的判断，直接更新一次
     if (
       cluster &&
-      (dataSourceNeedUpdate || Math.abs(zoom - newZoom) > 1) &&
+      (dataSourceNeedUpdate || Math.abs(layer.clusterZoom - newZoom) >= 1) &&
-      maxZoom > zoom
+      maxZoom > layer.clusterZoom
     ) {
-      source.updateClusterData(Math.floor(newZoom));
+      // TODO 判断数据是否更新
+      if (zoom !== Math.floor(newZoom)) {
+        source.updateClusterData(Math.round(newZoom));
+      }
+      layer.clusterZoom = newZoom;
       return true;
     }
     return false;

stories/Layers/Layers.stories.tsx

@@ -5,6 +5,7 @@ import Arc2DLineDemo from './components/Arc2DLine';
 import ArcLineDemo from './components/Arcline';
 import CityBuildingLayerDemo from './components/citybuilding';
 import ClusterDemo from './components/cluster';
+import ClusterDemo2 from './components/cluster2';
 import Column from './components/column';
 import DashLineDemo from './components/dash';
 import DataUpdate from './components/data_update';
@@ -31,6 +32,7 @@ import TextLayerDemo from './components/Text';
 storiesOf('图层', module)
   .add('点图层', () => <PointDemo />)
   .add('聚合图', () => <ClusterDemo />)
+  .add('聚合图标注', () => <ClusterDemo2 />)
   .add('数据更新', () => <DataUpdate />)
   .add('点动画', () => <AnimatePoint />)
   .add('3D点', () => <Point3D />)

stories/Layers/components/cluster2.tsx

@@ -0,0 +1,95 @@
+import { PointLayer, Scene, Source } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+// @ts-ignore
+import data from '../data/data.json';
+export default class Point3D extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      pickBufferScale: 3.0,
+      map: new GaodeMap({
+        style: 'light',
+        center: [-121.24357, 37.58264],
+        pitch: 0,
+        zoom: 10.45,
+      }),
+    });
+    scene.on('loaded', () => {
+      const fontFamily = 'iconfont';
+      const fontPath =
+        '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
+      scene.addFontFace(fontFamily, fontPath);
+      scene.addIconFont('icon1', '');
+      fetch(
+        'https://gw.alipayobjects.com/os/bmw-prod/87e40417-a5da-4fdb-8313-c796ea15f982.csv',
+      )
+        .then((res) => res.text())
+        .then((data) => {
+          const dataSource = new Source(data, {
+            parser: {
+              type: 'csv',
+              x: 'lng',
+              y: 'lat',
+            },
+            cluster: true,
+          });
+          const pointLayer = new PointLayer({
+            autoFit: true,
+          })
+            .source(dataSource)
+            .shape('circle')
+            .scale('point_count', {
+              type: 'quantile',
+            })
+            .size('point_count', [5, 10, 15, 20, 25])
+            .active(true)
+            .color('rgb(73,167,86)')
+            .style({
+              opacity: 1,
+              strokeWidth: 1,
+              stroke: '#333',
+            });
+
+          const pointLayerText = new PointLayer({
+            autoFit: true,
+          })
+            .source(dataSource)
+            .shape('point_count', 'text')
+            .size(15)
+            .active(true)
+            .color('#fff')
+            .style({
+              opacity: 1,
+              strokeWidth: 0,
+              stroke: '#fff',
+            });
+
+          scene.addLayer(pointLayer);
+          scene.addLayer(pointLayerText);
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Map/components/cluster.tsx

@@ -0,0 +1,70 @@
+import { PointLayer, Marker, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+export default class Cluster extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    // this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const pointLayer = new PointLayer({})
+            .source(data, {
+              cluster: true,
+            })
+            .shape('circle')
+            .scale('point_count', {
+              type: 'quantile',
+            })
+            .size('point_count', [5, 10, 15, 20, 25])
+            .active(true)
+            .color('yellow')
+            .style({
+              opacity: 0.5,
+              strokeWidth: 1,
+            });
+
+          scene.addLayer(pointLayer);
+
+          scene.on('zoomchange', () => {
+            const d = pointLayer.getSource();
+            // console.log('ddd', d.data.dataArray)
+          });
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/map.stories.tsx

@@ -74,6 +74,7 @@ import SimplePoint from './components/simplePoint';
 import LineWall from './components/linewall'
 import GridTile from './components/gridTile'
 import GridTile2 from './components/gridTile2'
+import Cluster from './components/cluster'
 
 // @ts-ignore
 storiesOf('地图方法', module)
@@ -152,3 +153,4 @@ storiesOf('地图方法', module)
         .add('BusLine', () => <BusLine/>)
         .add('GridTile', () => <GridTile/>)
         .add('GridTile2', () => <GridTile2/>)
+        .add('Cluster', () => <Cluster/>)