diff --git a/docs/api/component/markerLayer.zh.md b/docs/api/component/markerLayer.zh.md index c62a0fb875..3d480476d2 100644 --- a/docs/api/component/markerLayer.zh.md +++ b/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 计算 ### 方法 diff --git a/packages/component/src/markerlayer.ts b/packages/component/src/markerlayer.ts index 409c453221..29f60a0d3c 100644 --- a/packages/component/src/markerlayer.ts +++ b/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; diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 2f85b75c28..f9364fe2cb 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/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); } diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 94c4426411..3ce7daedfa 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/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 初始化完成之后添加 diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index b902419d14..1e4ddc1e74 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -56,7 +56,7 @@ let layerIdCounter = 0; export default class BaseLayer 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; diff --git a/stories/Components/components/clusterMarker.tsx b/stories/Components/components/clusterMarker.tsx index 4ee3f9455e..ab6ca05dd8 100644 --- a/stories/Components/components/clusterMarker.tsx +++ b/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],