mirror of https://gitee.com/antv-l7/antv-l7
fix: mapbox token 校验问题
This commit is contained in:
parent
05390c6aa7
commit
388ca023e7
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式,复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: 聚合图
|
||||
order: 5
|
||||
---
|
||||
|
||||
|
||||
##使用
|
||||
|
||||
目前只有点图层支持聚类方法
|
|
@ -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,
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -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)
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: 自定义 Marker
|
||||
order: 7
|
||||
---
|
||||
可自定义点符号,通过自定义dom实现地图标注,富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
||||
## 使用
|
||||
|
||||
[Marker 文档](../../component)
|
|
@ -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) {
|
||||
|
|
|
@ -63,6 +63,8 @@ export interface ISource {
|
|||
clusterOptions: Partial<IClusterOptions>;
|
||||
updateClusterData(zoom: number): void;
|
||||
getFeatureById(id: number): unknown;
|
||||
getClusters(zoom: number): unknown;
|
||||
getClustersLeaves(id: string): unknown;
|
||||
}
|
||||
export interface IRasterCfg {
|
||||
extent: [number, number, number, number];
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue