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.initPromise = this.hooks.init.promise(
|
||||||
this.configService.getSceneConfig(this.id),
|
this.configService.getSceneConfig(this.id),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
this.render();
|
||||||
}
|
}
|
||||||
|
|
||||||
public addLayer(layer: ILayer) {
|
public addLayer(layer: ILayer) {
|
||||||
|
|
|
@ -63,6 +63,8 @@ export interface ISource {
|
||||||
clusterOptions: Partial<IClusterOptions>;
|
clusterOptions: Partial<IClusterOptions>;
|
||||||
updateClusterData(zoom: number): void;
|
updateClusterData(zoom: number): void;
|
||||||
getFeatureById(id: number): unknown;
|
getFeatureById(id: number): unknown;
|
||||||
|
getClusters(zoom: number): unknown;
|
||||||
|
getClustersLeaves(id: string): unknown;
|
||||||
}
|
}
|
||||||
export interface IRasterCfg {
|
export interface IRasterCfg {
|
||||||
extent: [number, number, number, number];
|
extent: [number, number, number, number];
|
||||||
|
|
|
@ -205,11 +205,17 @@ export default class MapboxService
|
||||||
if (!mapboxgl) {
|
if (!mapboxgl) {
|
||||||
this.logger.error(this.configService.getSceneWarninfo('SDK'));
|
this.logger.error(this.configService.getSceneWarninfo('SDK'));
|
||||||
}
|
}
|
||||||
mapboxgl.accessToken = token;
|
if (
|
||||||
|
token === MAPBOX_API_KEY &&
|
||||||
if (token === MAPBOX_API_KEY && style !== 'blank') {
|
style !== 'blank' &&
|
||||||
|
!mapboxgl.accessToken
|
||||||
|
) {
|
||||||
this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
|
this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!mapboxgl.accessToken) {
|
||||||
|
mapboxgl.accessToken = token;
|
||||||
|
}
|
||||||
if (mapInstance) {
|
if (mapInstance) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
this.map = mapInstance;
|
this.map = mapInstance;
|
||||||
|
|
|
@ -84,7 +84,12 @@ export default class Source extends EventEmitter {
|
||||||
});
|
});
|
||||||
this.init();
|
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 {
|
public updateClusterData(zoom: number): void {
|
||||||
const { method = 'sum', field } = this.clusterOptions;
|
const { method = 'sum', field } = this.clusterOptions;
|
||||||
let data = this.clusterIndex.getClusters(this.extent, zoom);
|
let data = this.clusterIndex.getClusters(this.extent, zoom);
|
||||||
|
|
Loading…
Reference in New Issue