fix: fix clusterMarker style

docs/api/component/markerLayer.zh.md

@@ -40,17 +40,15 @@ scene.addMarkerLayer(markerLayer);
   - field `string` 聚合统计字段
   - method `sum| max| min| mean`
   - element `function` 通过回调函数设置聚合 Marker 的样式，返回 dom 元素
-    
+
     参数：feature
 
-      - point_count 默认 聚合元素个数
-      - clusterData `Array` 聚合节点的原始数据
-      - point_sum 聚合求和 根据 field 和 method 计算
-      - point_max 聚合最大值 根据 field 和 method 计算
-      - point_min 聚合最小值 根据 field 和 method 计算
-      - point_mean 聚合平均值 根据 field 和 method 计算
-
-
+    - point_count 默认 聚合元素个数
+    - clusterData `Array` 聚合节点的原始数据
+    - point_sum 聚合求和 根据 field 和 method 计算
+    - point_max 聚合最大值 根据 field 和 method 计算
+    - point_min 聚合最小值 根据 field 和 method 计算
+    - point_mean 聚合平均值 根据 field 和 method 计算
 
 ### 方法
 

packages/component/src/markerlayer.ts

@@ -7,7 +7,7 @@ import Supercluster from 'supercluster';
 import Marker from './marker';
 type CallBack = (...args: any[]) => any;
 interface IMarkerStyleOption {
-  element: CallBack;
+  element?: CallBack;
   style: { [key: string]: any } | CallBack;
   className: string;
   field?: string;
@@ -56,7 +56,6 @@ export default class MarkerLayer extends EventEmitter {
         zoom: -99,
         style: {},
         className: '',
-        element: this.generateElement,
       },
     };
   }
@@ -171,10 +170,10 @@ export default class MarkerLayer extends EventEmitter {
           feature.properties[fieldName] = stat;
         }
       }
-      const marker =
-        feature.properties && feature.properties.hasOwnProperty('point_count')
-          ? this.clusterMarker(feature)
-          : this.normalMarker(feature);
+      const marker = this.clusterMarker(feature);
+      // feature.properties && feature.properties.hasOwnProperty('point_count')
+      //   ? this.clusterMarker(feature)
+      //   : this.normalMarker(feature);
 
       this.clusterMarkers.push(marker);
       marker.addTo(this.scene);
@@ -193,7 +192,9 @@ export default class MarkerLayer extends EventEmitter {
   private clusterMarker(feature: any) {
     const clusterOption = this.markerLayerOption.clusterOption;
 
-    const { element } = clusterOption as IMarkerStyleOption;
+    const {
+      element = this.generateElement.bind(this),
+    } = clusterOption as IMarkerStyleOption;
     const marker = new Marker({
       element: element(feature),
     }).setLnglat({
@@ -204,12 +205,7 @@ export default class MarkerLayer extends EventEmitter {
   }
   private normalMarker(feature: any) {
     const marker_id = feature.properties.marker_id;
-    return marker_id
-      ? new Marker().setLnglat({
-          lng: feature.geometry.coordinates[0],
-          lat: feature.geometry.coordinates[1],
-        })
-      : this.markers[marker_id];
+    return this.markers[marker_id];
   }
   private update() {
     const zoom = this.mapsService.getZoom();
@@ -222,11 +218,14 @@ export default class MarkerLayer extends EventEmitter {
     const el = DOM.create('div', 'l7-marker-cluster');
     const label = DOM.create('div', '', el);
     const span = DOM.create('span', '', label);
-    span.textContent = feature.properties.point_count;
-    // if (className !== '') {
-    //   DOM.addClass(el, className);
-    // }
-    // span.textContent = feature.properties.point_count;
+    const { field, method } = this.markerLayerOption.clusterOption;
+    feature.properties.point_count = feature.properties.point_count || 1;
+
+    const text =
+      field && method
+        ? feature.properties['point_' + method] || feature.properties[field]
+        : feature.properties.point_count;
+    span.textContent = text;
     // const elStyle = isFunction(style)
     //   ? style(feature.properties.point_count)
     //   : style;

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

@@ -27,9 +27,9 @@ export default class LayerService implements ILayerService {
   private readonly configService: IGlobalConfigService;
 
   public add(layer: ILayer) {
-    // if (this.sceneInited) {
-    //   layer.init();
-    // }
+    if (this.sceneInited) {
+      layer.init();
+    }
     this.layers.push(layer);
   }
 

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

@@ -213,7 +213,9 @@ export default class Scene extends EventEmitter implements ISceneService {
     }
 
     // 尝试初始化未初始化的图层
-    this.layerService.initLayers();
+    this.once('loaded', () => {
+      this.layerService.initLayers();
+    });
     this.layerService.renderLayers();
     // 组件需要等待layer 初始化完成之后添加
 

packages/layers/src/core/BaseLayer.ts

@@ -56,7 +56,7 @@ let layerIdCounter = 0;
 export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   implements ILayer {
   public id: string = `${layerIdCounter++}`;
-  public name: string = `${layerIdCounter++}`;
+  public name: string = `${layerIdCounter}`;
   public type: string;
   public visible: boolean = true;
   public zIndex: number = 0;

stories/Components/components/clusterMarker.tsx

@@ -52,6 +52,7 @@ export default class ClusterMarkerLayer extends React.Component {
     for (let i = 0; i < nodes.features.length; i++) {
       const { coordinates } = nodes.features[i].geometry;
       const marker = new Marker({
+        color: 'red',
         extData: nodes.features[i].properties,
       }).setLnglat({
         lng: coordinates[0],