diff --git a/docs/api/layer/point_layer/chart.en.md b/docs/api/layer/point_layer/chart.en.md new file mode 100644 index 0000000000..cd6d08e893 --- /dev/null +++ b/docs/api/layer/point_layer/chart.en.md @@ -0,0 +1,5 @@ +--- +title: 复合图表地图 +order: 6 +--- +使用二维统计图表代替点状符号的一种特殊复合形式,复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等 diff --git a/docs/api/layer/point_layer/cluster.en.md b/docs/api/layer/point_layer/cluster.en.md new file mode 100644 index 0000000000..d8cd791560 --- /dev/null +++ b/docs/api/layer/point_layer/cluster.en.md @@ -0,0 +1,9 @@ +--- +title: 聚合图 +order: 5 +--- + + +##使用 + +目前只有点图层支持聚类方法 diff --git a/docs/api/layer/point_layer/cluster.zh.md b/docs/api/layer/point_layer/cluster.zh.md new file mode 100644 index 0000000000..e61f0e4fc5 --- /dev/null +++ b/docs/api/layer/point_layer/cluster.zh.md @@ -0,0 +1,78 @@ +--- +title: 聚合图 +order: 5 +--- + +## 使用 + +目前只有点数据支持聚类方法 + +数据聚合主要从数据层数据,因此需要在Source方法配置 cluster 参数 + +### Source +[source 文档](../../source/source) + +### 配置项 + - cluster **boolean** 是否聚合 + - clusterOption 聚合配置项 + - radius 聚合半径 **number** default 40 + - minZoom: 最小聚合缩放等级 **number** default 0 + - maxZoom: 最大聚合缩放等级 **number** default 16 + +数据聚合之后,数据会增加 point_count属性,在可视化渲染时可以根据 point_count进行数据映射。 + +#### 方法 + + **getClusters(zoom: number)** + + 获取指定缩放等级的聚合数据 + + - zoom 缩放等级 + + **getClustersLeaves(id: string)** + + 根据id获取聚合节点的数据 + + - id 聚合数据id + + + + +```javascript + +layer.source(pointsData, { + cluster: true, + }); + +// 设置配置项 +layer.source(pointsData, { + cluster: true, + clusterOption:{ + radius:40, + } + }); +``` + + +### 完整示例 + +```javascript +const pointLayer = new PointLayer({}) + .source(pointsData, { + cluster: true, + }) + .shape('circle') + .scale('point_count', { + type: 'quantile', + }) + .size('point_count', [5, 10, 15, 20, 25]) + // .size(10) + .color('red') + .style({ + opacity: 0.3, + strokeWidth: 1, + }); +``` + + + diff --git a/docs/api/layer/point_layer/dot.en.md b/docs/api/layer/point_layer/dot.en.md new file mode 100644 index 0000000000..be0809b75b --- /dev/null +++ b/docs/api/layer/point_layer/dot.en.md @@ -0,0 +1,44 @@ +--- +title: 亮度图 +order: 3 +--- +亮度图又称点密度图,单位面积的内点的个数越多,亮度会越亮,亮度图一般用来表达海量点数据分布情况 + +## 使用 + +### shape + - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape +### color + - 无权重 + 如果数据没有权重可以将颜色设置为常量,渲染时会自动进行颜色叠加,点越多颜色约亮 + - 有权重 + 为数据有权重可以设置一组同一色相不同亮度的色带。 + + +```javascript +const pointLayer = new PointLayer() + .source(data) + .size(2) + .shape('dot') + .color('h8', [ + '#0A3663', + '#1558AC', + '#3771D9', + '#4D89E5', + '#64A5D3', + '#72BED6', + '#83CED6', + '#A6E1E0', + '#B8EFE2', + '#D7F9F0' + ]) + .style({ + opacity: 1 + }); + + scene.addLayer(pointLayer); +``` + +## 相关demo + +[城市亮度图](../../../../examples/point/dot) diff --git a/docs/api/layer/point_layer/marker.en.md b/docs/api/layer/point_layer/marker.en.md new file mode 100644 index 0000000000..fd22bcf63f --- /dev/null +++ b/docs/api/layer/point_layer/marker.en.md @@ -0,0 +1,9 @@ +--- +title: 自定义 Marker +order: 7 +--- +可自定义点符号,通过自定义dom实现地图标注,富文本、动态点状符号都可用于地图上信息的标记。 + +## 使用 + +[Marker 文档](../../component) diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 3ddfa9774d..acdbb76b78 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -170,6 +170,8 @@ export default class Scene extends EventEmitter implements ISceneService { this.initPromise = this.hooks.init.promise( this.configService.getSceneConfig(this.id), ); + + this.render(); } public addLayer(layer: ILayer) { diff --git a/packages/core/src/services/source/ISourceService.ts b/packages/core/src/services/source/ISourceService.ts index 71d3ebbce9..774e8fa373 100644 --- a/packages/core/src/services/source/ISourceService.ts +++ b/packages/core/src/services/source/ISourceService.ts @@ -63,6 +63,8 @@ export interface ISource { clusterOptions: Partial; updateClusterData(zoom: number): void; getFeatureById(id: number): unknown; + getClusters(zoom: number): unknown; + getClustersLeaves(id: string): unknown; } export interface IRasterCfg { extent: [number, number, number, number]; diff --git a/packages/maps/src/mapbox/index.ts b/packages/maps/src/mapbox/index.ts index 13952b6796..290dd3e9f8 100644 --- a/packages/maps/src/mapbox/index.ts +++ b/packages/maps/src/mapbox/index.ts @@ -205,11 +205,17 @@ export default class MapboxService if (!mapboxgl) { this.logger.error(this.configService.getSceneWarninfo('SDK')); } - mapboxgl.accessToken = token; - - if (token === MAPBOX_API_KEY && style !== 'blank') { + if ( + token === MAPBOX_API_KEY && + style !== 'blank' && + !mapboxgl.accessToken + ) { this.logger.warn(this.configService.getSceneWarninfo('MapToken')); } + + if (!mapboxgl.accessToken) { + mapboxgl.accessToken = token; + } if (mapInstance) { // @ts-ignore this.map = mapInstance; diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts index fc7210ce77..80687cc0c0 100644 --- a/packages/source/src/source.ts +++ b/packages/source/src/source.ts @@ -84,7 +84,12 @@ export default class Source extends EventEmitter { }); this.init(); } - + public getClusters(zoom: number) { + return this.clusterIndex.getClusters(this.extent, zoom); + } + public getClustersLeaves(id: number) { + return this.clusterIndex.getLeaves(id, Infinity); + } public updateClusterData(zoom: number): void { const { method = 'sum', field } = this.clusterOptions; let data = this.clusterIndex.getClusters(this.extent, zoom);