fix: mapbox token 校验问题

This commit is contained in:
thinkinggis 2019-12-17 13:52:53 +08:00
parent 05390c6aa7
commit 388ca023e7
9 changed files with 164 additions and 4 deletions

View File

@ -0,0 +1,5 @@
---
title: 复合图表地图
order: 6
---
使用二维统计图表代替点状符号的一种特殊复合形式,复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

View File

@ -0,0 +1,9 @@
---
title: 聚合图
order: 5
---
##使用
目前只有点图层支持聚类方法

View File

@ -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,
});
```

View File

@ -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)

View File

@ -0,0 +1,9 @@
---
title: 自定义 Marker
order: 7
---
可自定义点符号通过自定义dom实现地图标注富文本、动态点状符号都可用于地图上信息的标记。
## 使用
[Marker 文档](../../component)

View File

@ -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) {

View File

@ -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];

View File

@ -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;

View File

@ -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);