p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: merge workspace (tile) (#1204) 

Co-authored-by: lvisei <yunji.me@outlook.com>
This commit is contained in:
YiQianYao 2022-06-30 11:44:46 +08:00 committed by GitHub
parent bb71fe2421
commit bf4d22513d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
198 changed files with 10758 additions and 1179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.storybook/preview.ts
View File

@ -22,6 +22,7 @@ addParameters({
// automatically import all files ending in *.stories.tsx
const req = require.context('../stories', true, /\.stories\.tsx$/);
// const req = require.context('../stories/tile', true, /\.stories\.tsx$/);
function loadStories() {
req.keys().forEach(req);

2
docs/api/base.zh.md
View File

@ -5,7 +5,7 @@ order: 2
`markdown:docs/common/style.md`
## 简介
# 简介
L7 Layer 接口设计遵循图形语法，所有图层都继承于基类（baseLayer）。

4
docs/api/canvas.zh.md
View File

@ -28,7 +28,7 @@ const layer = new CanvasLayer({}).style({
🌟 CanvasLayer 不需要设置 source。
### Event
### event
🌟 CanvasLayer 暂不支持交互动作。
@ -83,5 +83,3 @@ var centerXY = mapService.lngLatToContainer(center); // {x: 100, y: 100}
// centerXY 表示距离视图左上角 x 轴方向 100px，y 轴方向 100px
// canvas 绘图坐标系
```
`markdown:docs/common/layer/base.md`

4
docs/api/cityBuilding/cityBuilding.zh.md
View File

@ -88,7 +88,7 @@ scene.on('loaded', () => {
});
```
#### 完整代码
#### demo
```javascript
import { Scene, CityBuildingLayer } from '@antv/l7';
@ -120,5 +120,3 @@ scene.on('loaded', () => {
```
[在线案例](../../../examples/gallery/animate#build_sweep)
`markdown:docs/common/layer/base.md`

4
docs/api/geometry_layer/plane.zh.md
View File

@ -9,7 +9,7 @@ order: 0
PlaneGeometry 是 L7 提供的通用的平面几何体图形，表现为可以自定义为位置，大小和分段数的贴地矩形。
### 基本用法
### demo
设置普通矩形
@ -112,5 +112,3 @@ PlaneGeometry 高度贴图 URL，当存在该参数的时候 L7 会自动解析
这是一个回调函数，参数是 L7 解析出的地形贴图的 rgb 信息，用户可以使用该函数定义高度值的计算逻辑（不同的地形贴图计算逻辑不同）。
🌟 widthSegments/heightSegments 指定 planeGeometry 的分段数，分段越多，地形越平滑，同时性能消耗越大。
`markdown:docs/common/layer/base.md`

4
docs/api/geometry_layer/sprite.zh.md
View File

@ -9,7 +9,7 @@ order: 1
SpriteGeometry 是 L7 提供的通用的粒子图层，可以用来绘制各种粒子效果。
### 基本用法
### demo
设置普通的粒子图层。
@ -76,5 +76,3 @@ SpriteGeometry 主要通过 style 方法设置位置、大小以及其他属性
#### spriteScale: number
粒子大小缩放、默认为 1。
`markdown:docs/common/layer/base.md`

18
docs/api/heatmap_layer/grid.zh.md
View File

@ -15,7 +15,7 @@ import { HeatmapLayer } from '@antv/l7';
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ'>
## source
### source
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
@ -46,11 +46,11 @@ layer.source(data, {
});
```
## shape
### shape
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
### 2d
#### 2d
- circle,
- triangle
@ -61,7 +61,7 @@ layer.source(data, {
layer.shape('circle');
```
### 3d
#### 3d
- cylinder
- triangleColumn
@ -72,7 +72,7 @@ layer.shape('circle');
layer.shape('cylinder');
```
## size
### size
### 2D shape
@ -88,11 +88,11 @@ layer.size('value', [10, 50]); // 根据value 字段映射大小
layer.size('value', (value) => {}); // 回调函数设置高度
```
## color
### color
同 layer color 方法
## style
### style
- coverage 网格覆盖度 0 - 1
- angle 网格旋转角度 0 - 360
@ -106,7 +106,7 @@ layer.style({
});
```
## 完整实例代码
### demo
```javascript
const layer = new HeatmapLayer({})
@ -139,5 +139,3 @@ scene.addLayer(layer);
```
[在线案例](../../../examples/heatmap/grid#china)
`markdown:docs/common/layer/base.md`

4
docs/api/heatmap_layer/heatmap.zh.md
View File

@ -16,7 +16,7 @@ order: 0
通过切换 shape 参数，用户可以得到不同的热力图
### 基本用法
### demo
```javascript
import { HeatmapLayer } from '@antv/l7';
@ -48,5 +48,3 @@ const layer = new HeatmapLayer({})
[在线案例 经典热力 classical](../../../examples/heatmap/heatmap#heatmap)
[在线案例 蜂窝热力 hexagon](../../../examples/heatmap/hexagon#light)
[在线案例 网格热力 grid](/zh/examples/heatmap/grid#china)
`markdown:docs/common/layer/base.md`

2
docs/api/heatmap_layer/hexagon.zh.md
View File

@ -135,5 +135,3 @@ const layer = new HeatmapLayer({
```
[在线案例](../../../examples/heatmap/hexagon#light)
`markdown:docs/common/layer/base.md`

4
docs/api/heatmap_layer/normal.zh.md
View File

@ -45,7 +45,7 @@ heatmap 需要设置 color 方法，样式通过 style 设置
⚠️ color, position 的长度要相同
## 完整代码
### demo
```javascript
heatmapLayer()
@ -65,5 +65,3 @@ heatmapLayer()
```
[在线案例](../../../examples/heatmap/heatmap#heatmap)
`markdown:docs/common/layer/base.md`

11
docs/api/l7.en.md
View File

@ -18,7 +18,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
✨ 2022.01.17 2.7 版本正式发布
✨ 2022.06.28 2.9 版本正式发布
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
@ -63,17 +63,22 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
- 填充图
- 3D 填充图
### 热力图
### 热力图层
- 经典热力图
- 蜂窝热力图
- 网格热力图
### 栅格地图
### 栅格图层
- 图片
- Raster
### 瓦片地图
- 栅格瓦片
- 矢量瓦片
## L7 2.0 Roadmap
![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)

17
docs/api/l7.zh.md
View File

@ -9,7 +9,7 @@ redirect_from:
# L7 地理空间数据可视分析引擎
✨ 2022.01.17 2.7 版本正式发布
✨ 2022.06.28 2.9 版本正式发布
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
@ -63,22 +63,27 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
- 填充图
- 3D 填充图
### 热力图
### 热力图层
- 经典热力图
- 蜂窝热力图
- 网格热力图
### 栅格地图
### 栅格图层
- 图片
- Raster
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
### 瓦片地图
- 栅格瓦片
- 矢量瓦片
### 技术支持服务群
L7 相关技术问题，需求反馈，我们会及时响应
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
L7 相关技术问题，需求反馈，我们会及时响应。
群号：32292906
<img width="200px" alt="地理空间可视化L7支持群" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*OmBqS7Jn7pIAAAAAAAAAAAAAARQnAQ'>
<img width="200px" alt="地理空间可视化L7支持群" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*D-ygSppqYtIAAAAAAAAAAAAAARQnAQ'>

10
docs/api/line_layer/arc.zh.md
View File

@ -21,7 +21,7 @@ import { LineLayer } from '@antv/l7';
shape 设置成 arc 即可
### 数据
### source
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
@ -37,6 +37,10 @@ source(data, {
});
```
`markdown:docs/api/line_layer/features/animate.zh.md`
### style
`markdown:docs/api/line_layer/features/segmentNumber.zh.md`
`markdown:docs/api/line_layer/features/thetaOffset.zh.md`
@ -45,8 +49,4 @@ source(data, {
`markdown:docs/api/line_layer/features/dash.zh.md`
`markdown:docs/api/line_layer/features/animate.zh.md`
`markdown:docs/api/line_layer/features/texture.zh.md`
`markdown:docs/common/layer/base.md`

10
docs/api/line_layer/arc3d.zh.md
View File

@ -37,7 +37,7 @@ const layer = new LineLayer({})
shape 设置成 arc3d 即可
### 数据
### source
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
@ -53,12 +53,12 @@ source(data, {
});
```
`markdown:docs/api/line_layer/features/animate.zh.md`
### style
`markdown:docs/api/line_layer/features/linear.zh.md`
`markdown:docs/api/line_layer/features/dash.zh.md`
`markdown:docs/api/line_layer/features/animate.zh.md`
`markdown:docs/api/line_layer/features/texture.zh.md`
`markdown:docs/common/layer/base.md`

2
docs/api/line_layer/features/border.zh.md
View File

@ -1,4 +1,4 @@
### 边框
#### border
线图层支持在 style 中设置边框的宽度和颜色

2
docs/api/line_layer/features/dash.zh.md
View File

@ -1,4 +1,4 @@
### 设置虚线
#### dash
线图层通过在 style 中设置线的类型，同时指定虚线部分和实线部分

2
docs/api/line_layer/features/linear.zh.md
View File

@ -1,4 +1,4 @@
### 渐变色
#### linearColor
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高

2
docs/api/line_layer/features/segmentNumber.zh.md
View File

@ -1,4 +1,4 @@
### segmentNumber 弧线分段数
#### segmentNumber
arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需要这么多的分段数，适当降低分段数量可以在保证效果的情况下提高性能。

4
docs/api/line_layer/features/texture.zh.md
View File

@ -1,4 +1,4 @@
### 线纹理
#### texture
线图层支持纹理贴图，同时支持用户选择多种纹理表现形式
@ -35,7 +35,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785
[在线案例](../../../examples/gallery/animate#animate_path_texture)
#### 高级用法
#### texture advance
✨ animate
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关

2
docs/api/line_layer/features/thetaOffset.zh.md
View File

@ -1,4 +1,4 @@
### thetaOffset 弧度参数
#### thetaOffset
thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314

2
docs/api/line_layer/features/vertexHeight.zh.md
View File

@ -1,4 +1,4 @@
### 设置顶点高度
#### vertex height
线图层支持给每个顶点赋予高度值，同时允许用户在 style 方法中通过 vertexHeightScale 属性设置高度比例。

10
docs/api/line_layer/greatLine.zh.md
View File

@ -21,7 +21,7 @@ import { LineLayer } from '@antv/l7';
shape 设置成 greatcircle 即可
### 数据
### source
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
@ -37,12 +37,12 @@ source(data, {
});
```
`markdown:docs/api/line_layer/features/animate.zh.md`
### style
`markdown:docs/api/line_layer/features/linear.zh.md`
`markdown:docs/api/line_layer/features/dash.zh.md`
`markdown:docs/api/line_layer/features/animate.zh.md`
`markdown:docs/api/line_layer/features/texture.zh.md`
`markdown:docs/common/layer/base.md`

8
docs/api/line_layer/linelayer.zh.md
View File

@ -81,14 +81,14 @@ lineLayer.size([1, 2]); // 宽度为1，高度2
线图层支持了纹理贴图的能力，不同 shape 的图层对 texturte 的支持情况会存在细微的差别，详细使用请查看相关图层的文档
`markdown:docs/api/line_layer/features/animate.zh.md`
### style
`markdown:docs/api/line_layer/features/linear.zh.md`
`markdown:docs/api/line_layer/features/dash.zh.md`
`markdown:docs/api/line_layer/features/animate.zh.md`
`markdown:docs/api/line_layer/features/texture.zh.md`
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
`markdown:docs/common/layer/base.md`

4
docs/api/line_layer/path.zh.md
View File

@ -93,8 +93,6 @@ layer.style({
`markdown:docs/api/line_layer/features/border.zh.md`
`markdown:docs/api/line_layer/features/animate.zh.md`
`markdown:docs/api/line_layer/features/texture.zh.md`
`markdown:docs/common/layer/base.md`
`markdown:docs/api/line_layer/features/animate.zh.md`

2
docs/api/line_layer/simple.zh.md
View File

@ -31,5 +31,3 @@ shape 设置成 simple 即可
`markdown:docs/api/line_layer/features/linear.zh.md`
🌟 简单线图层不支持动画和纹理
`markdown:docs/common/layer/base.md`

10
docs/api/line_layer/wall.zh.md
View File

@ -21,12 +21,14 @@ import { LineLayer } from '@antv/l7';
shape 设置成 wall 即可
`markdown:docs/api/line_layer/features/animate.zh.md`
### style
`markdown:docs/api/line_layer/features/linear.zh.md`
🌟 目前渐变色的方向为垂直向上
`markdown:docs/api/line_layer/features/animate.zh.md`
`markdown:docs/api/line_layer/features/texture.zh.md`
🌟 地理围栏支持了新的样式参数 iconStepCount
@ -45,7 +47,7 @@ shape 设置成 wall 即可
<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*3f8ORIbjJmkAAAAAAAAAAAAAARQnAQ'>
### heightfixed
#### heightfixed
wall 支持了固定高度配置 heightfixed
@ -54,5 +56,3 @@ wall 支持了固定高度配置 heightfixed
heightfixed: true // 默认为 false，开启后实际世界高度不变（注意调整尺寸）
})
```
`markdown:docs/common/layer/base.md`

10
docs/api/point_layer/bubble.zh.md
View File

@ -53,14 +53,4 @@ layer.animate(false);
- speed 水波速度
- rings 水波环数
## tips
目前 style 的配置项只支持全局设置，不支持数据映射。
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
style 方法如果没有设置 stroke, 默认于气泡的填充色相同
[在线案例](../../../examples/point/bubble#point)
`markdown:docs/common/layer/base.md`

2
docs/api/point_layer/chart.zh.md
View File

@ -18,5 +18,3 @@ import { PointLayer } from '@antv/l7';
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6AR6Qq0Bq-MAAAAAAAAAAABkARQnAQ'>
[在线案例](../../../examples/point/chart#bar)
`markdown:docs/common/layer/base.md`

69
docs/api/point_layer/cluster.en.md
View File

@ -4,72 +4,3 @@ order: 5
---
`markdown:docs/api/point_layer/cluster.zh.md`
## 使用
目前只有点数据支持聚类方法
数据聚合主要从数据层数据，因此需要在 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])
.color('red')
.style({
opacity: 0.3,
strokeWidth: 1,
});
```
`markdown:docs/common/layer/base.md`

12
docs/api/point_layer/cluster.zh.md
View File

@ -17,11 +17,11 @@ import { PointLayer } from '@antv/l7';
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ'>
### Source
### source
[source 文档](../source/source)
### 配置项
### option
- cluster **boolean** 是否聚合
- clusterOption 聚合配置项
@ -31,7 +31,7 @@ import { PointLayer } from '@antv/l7';
数据聚合之后，数据会增加 point_count 属性，在可视化渲染时可以根据 point_count 进行数据映射。
#### 方法
### layer functions
**getClusters(zoom: number)**
@ -59,7 +59,7 @@ layer.source(pointsData, {
});
```
### 方法
### origin data
获取聚合节点的原始数据,通过 Source 的 getClustersLeaves 方法
@ -71,7 +71,7 @@ layer.on('click', (e) => {
});
```
### 完整示例
### demo
```javascript
const pointLayer = new PointLayer({})
@ -98,5 +98,3 @@ const pointLayer = new PointLayer({})
PointLayer 的聚合图采用 WebGL 绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用 MarkerLayer 的聚合功能，你可以通过 Dom 完全自定义样式。
[MarkerLayer 聚合](../component/markerLayer)
`markdown:docs/common/layer/base.md`

4
docs/api/point_layer/column.zh.md
View File

@ -86,7 +86,7 @@ animateOptions: {
}
```
## 额外的 style 配置
## style
- sourceColor 设置 3D 柱图起始颜色（3D 柱图设置颜色渐变时会覆盖 color 设置的颜色）
@ -137,5 +137,3 @@ style({
pickLight: true, // 默认为 false
});
```
`markdown:docs/common/layer/base.md`

2
docs/api/point_layer/dot.zh.md
View File

@ -51,5 +51,3 @@ scene.addLayer(pointLayer);
```
[在线案例](../../../examples/point/dot#normal2)
`markdown:docs/common/layer/base.md`

2
docs/api/point_layer/iconfont.zh.md
View File

@ -84,5 +84,3 @@ layer.shape('iconfontField', 'text');
✨ iconfont 其他 style 参数的使用和普通的文本标注的参数保持一致
[在线案例](../../../examples/point/text#iconfont)
`markdown:docs/common/layer/base.md`

2
docs/api/point_layer/marker.zh.md
View File

@ -18,5 +18,3 @@ import { MarkerLayer, Marker } from '@antv/l7';
[Marker 文档](../component/marker)
[MarkerLayer 文档](../component/markerLayer)
<!-- `markdown:docs/common/layer/base.md` -->

64
docs/api/point_layer/pointlayer.zh.md
View File

@ -7,6 +7,35 @@ order: 0
## 简介
### demo
```javascript
import { PointLayer } from '@antv/l7';
const layer = PointLayer({
zIndex: 2,
})
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
})
.shape('cylinder')
.size('t', (level) => {
return [4, 4, level + 40];
})
.color('t', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
```
点数据的展示，根据经纬点绘制图形，数据源支持 JSON、GeoJSON、CSV 三种数据格式。
- [GeoJSON](../source/geojson/#point)
@ -73,7 +102,7 @@ var layer = new PointLayer()
})
```
## shape 类型
### shape
PointLayer 图层支持多种 shape 类型，通过改变 shape 我们可以显示不同的点
@ -97,36 +126,7 @@ PointLayer 图层支持多种 shape 类型，通过改变 shape 我们可以显
🌟 若是使用简单的圆点图层，建议使用 simple 代替 circle 以获得更好的性能
### 基本用法
```javascript
import { PointLayer } from '@antv/l7';
const layer = PointLayer({
zIndex: 2,
})
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
})
.shape('cylinder')
.size('t', (level) => {
return [4, 4, level + 40];
})
.color('t', [
'#002466',
'#105CB3',
'#2894E0',
'#CFF6FF',
'#FFF5B8',
'#FFAB5C',
'#F27049',
'#730D1C',
]);
```
### 等面积点
### style
点图层支持等面积点，点大小的单位是米，同样通过 size 方法设置大小
@ -144,5 +144,3 @@ const layer = PointLayer()
```
🌟 从 v2.7.9 版本开始支持高德地图、高德地图 2.0、Mapbox 地图
`markdown:docs/common/layer/base.md`

4
docs/api/point_layer/radar.zh.md
View File

@ -29,10 +29,8 @@ order: 3
})
```
#### style 配置项
### style
- speed 旋转速度，默认为 1，值越大转速越快
[在线案例](../../../examples/point/scatter#radarPoint)
`markdown:docs/common/layer/base.md`

10
docs/api/point_layer/scatter.zh.md
View File

@ -53,10 +53,14 @@ const scatter = new PointLayer()
[在线案例](/zh/examples/point/scatter#scatter)
### blur
### style
```javascript
layer.style({
blur: 0.3,
});
```
散点图的 style 样式支持配置 blur，调整模糊。
[在线案例](/zh/examples/point/scatter#blur)
`markdown:docs/common/layer/base.md`

2
docs/api/point_layer/simple.zh.md
View File

@ -38,5 +38,3 @@ scene.getPointSizeRange(); // Float32Array - [min, max]
```
[在线案例](../../../examples/point/dot#normal2)
`markdown:docs/common/layer/base.md`

2
docs/api/point_layer/symbol.zh.md
View File

@ -125,5 +125,3 @@ scene.addLayer(imageLayer);
```
[在线案例](/zh/examples/point/image#monsoon)
`markdown:docs/common/layer/base.md`

8
docs/api/point_layer/text.zh.md
View File

@ -28,7 +28,6 @@ layer.shape('name', 'text');
### style
- opacity `number`
- textAnchor `string` 文本相对锚点的位置
`'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';`
- padding: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
@ -40,11 +39,6 @@ layer.shape('name', 'text');
- fontFamily `string` 字号
- textOffset `[number, number]` 文本偏移量
- textAllowOverlap: `boolean` 是否允许文字遮盖
[在线案例](../../../examples/point/text#point_text)
## 额外的 style 配置
- raisingHeight 设置 3D 填充图的抬升高度
`markdown:docs/common/layer/base.md`
[在线案例](../../../examples/point/text#point_text)

4
docs/api/point_layer/wave.zh.md
View File

@ -38,8 +38,6 @@ order: 3
[在线案例](../../../examples/point/scatter#animatePoint)
## 额外的 style 配置
### style
- raisingHeight 设置 3D 填充图的抬升高度
`markdown:docs/common/layer/base.md`

4
docs/api/polygon_layer/extrude.zh.md
View File

@ -35,7 +35,7 @@ layer.size('floor', (floor) => {
});
```
### 额外的 style 配置
### style
- pickLight 设置 3D 填充图的高亮色是否计算光照
@ -100,5 +100,3 @@ const provincelayer = new PolygonLayer({})
控制侧面的显隐，默认为 true
[在线案例](/zh/examples/polygon/3d#texture3D)
`markdown:docs/common/layer/base.md`

4
docs/api/polygon_layer/fill.zh.md
View File

@ -24,7 +24,7 @@ layer.shape('fill');
填充图无 size 不需要设置 size
## 额外的 style 配置
### style
- opacityLinear 设置几何填充图的径向渐变
@ -46,5 +46,3 @@ style({
<img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Ob62Q7JDpZ4AAAAAAAAAAAAAARQnAQ">
- raisingHeight 设置 3D 填充图的抬升高度
`markdown:docs/common/layer/base.md`

2
docs/api/polygon_layer/mask.zh.md
View File

@ -73,5 +73,3 @@ const layer = new RasterLayer({ mask: true });
[在线案例](../../../examples/raster/basic#dem)
<img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*jhWWS6dhKhYAAAAAAAAAAAAAARQnAQ">
`markdown:docs/common/layer/base.md`

4
docs/api/polygon_layer/polygonlayer.zh.md
View File

@ -15,7 +15,7 @@ order: 0
import { PolygonLayer } from '@antv/l7';
```
## shape 类型
### shape
`PolygonLayer` 填充图支持 3 种 shape
@ -145,5 +145,3 @@ scene.on('loaded', () => {
});
});
```
`markdown:docs/common/layer/base.md`

4
docs/api/polygon_layer/water.zh.md
View File

@ -40,7 +40,7 @@ layer.aniamte(true);
<img width="60%" style="display: block;margin: 0 auto;" alt="简单水面" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1kqvSYvWP3MAAAAAAAAAAAAAARQnAQ">
### shape
### shape## shape
我们需要设置 shape 为 water
@ -66,5 +66,3 @@ style({
默认值是 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
[在线案例](../../../examples/polygon/fill#water)
`markdown:docs/common/layer/base.md`

8
docs/api/raster/raster_layer.zh.md
View File

@ -17,15 +17,15 @@ import { RasterLayer } from '@antv/l7';
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bUYqRb5esH4AAAAAAAAAAABkARQnAQ'>
## source
### source
见 [raster source](../source/raster)
## shape
### shape
仅支持 `raster`
## style
### style
- `clampLow`: `Boolean` 默认 false, 设置为 true，低于 domain 的数据将不显示
- `clampHigh`: `Boolean` 默认 false, 设置为 true，高于 domain 的数据将不显示
@ -43,5 +43,3 @@ import { RasterLayer } from '@antv/l7';
⚠️ `color`, `position` 的长度要相同
[在线案例](../../../examples/raster/basic#light)
`markdown:docs/common/layer/base.md`

6
docs/api/source/mvt.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: MVT
order: 6
---
`markdown: docs/api/source/mvt.zh.md`

32
docs/api/source/mvt.zh.md Normal file
View File

@ -0,0 +1,32 @@
---
title: MVT
order: 6
---
`markdown:docs/common/style.md`
L7 加载矢量瓦片地图的时候需要在 `source` 中对瓦片服务进行解析，同时配置瓦片服务的请求参数。
## parser
- type string 固定值为 `mvt`
- tileSize number 请求瓦片的大小
- zoomOffset number 瓦片请求瓦片层级的偏移
- maxZoom number 瓦片加载最大 `zoom`
- minZoom number 瓦片加载最小 `zoom`
- extent [number, number, number, number] 地图显示范围
```javascript
const tileSource = new Source(
'http://localhost:3000/zhejiang.mbtiles/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9,
extent: [-180, -85.051129, 179, 85.051129],
},
},
);
```

2
docs/api/source/raster.zh.md
View File

@ -1,5 +1,5 @@
---
title: 栅格
title: Raster
order: 5
---

6
docs/api/source/rasterTile.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: RasterTile
order: 7
---
`markdown: docs/api/source/rasterTile.zh.md`

68
docs/api/source/rasterTile.zh.md Normal file
View File

@ -0,0 +1,68 @@
---
title: RasterTile
order: 7
---
`markdown:docs/common/style.md`
L7 加载栅格瓦片地图的时候需要在 `source` 中对瓦片服务进行解析，同时配置瓦片服务的请求参数。
## parser
- type string 固定值为 `rasterTile`
- tileSize number 请求瓦片的大小
- zoomOffset number 瓦片请求瓦片层级的偏移
- maxZoom number 瓦片加载最大 `zoom`
- minZoom number 瓦片加载最小 `zoom`
- extent [number, number, number, number] 地图显示范围
- dataType string 固定值为 `image`|`arraybuffer`，用于区分普通的栅格瓦片和数据栅格瓦片
- format func 在 `dataType` 为 `arraybuffer` 的时候生效，用于将栅格数据格式化为标准数据
```javascript
const rasterSource = new Source(
'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
{
parser: {
type: 'rasterTile',
tileSize: 256,
zoomOffset: 0,
extent: [-180, -85.051129, 179, 85.051129],
},
},
);
const rasterDataSource = new Source(
'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
{
parser: {
type: 'rasterTile',
dataType: 'arraybuffer',
tileSize: 256,
zoomOffset: 0,
extent: [-180, -85.051129, 179, 85.051129],
format: async (data: any) => {
const blob: Blob = new Blob([new Uint8Array(data)], {
type: 'image/png',
});
const img = await createImageBitmap(blob);
ctx.clearRect(0, 0, 256, 256);
ctx.drawImage(img, 0, 0, 256, 256);
let imgData = ctx.getImageData(0, 0, 256, 256).data;
let arr = [];
for (let i = 0; i < imgData.length; i += 4) {
const R = imgData[i];
const G = imgData[i + 1];
const B = imgData[i + 2];
const d = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;
arr.push(d);
}
return {
rasterData: arr,
width: 256,
height: 256,
};
},
},
},
);
```

6
docs/api/tile/rasterTile_layer.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: Raster Tile
order: 1
---
`markdown:docs/api/rasterTile_layer.zh.md`

218
docs/api/tile/rasterTile_layer.zh.md Normal file
View File

@ -0,0 +1,218 @@
---
title: 栅格瓦片图层
order: 1
---
`markdown:docs/common/style.md`
L7 的栅格瓦片图层支持了图片栅格瓦片和数据栅格瓦片，其中图片栅格加载普通的 png/jpg 图片，数据栅格可以用于加载 tiff/lerc 文件，也可以加载 png/jpg 等图片作为解析文件。
## 栅格瓦片图层
```javascript
// 栅格瓦片图层
import { RasterLayer } from '@antv/l7';
```
<img width="80%" style="display: block;margin: 0 auto;" alt="瓦片图层" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*V45WTKljz-YAAAAAAAAAAAAAARQnAQ'>
[在线案例](/zh/examples/tile/raster#amap-normal)
### option
#### mask
栅格瓦片图层可以在初始化的时候配置瓦片的掩模。
```javascript
const maskData = [...] // geojson
const layer = new RasterLayer({
mask: true,
maskfence: maskData;
});
```
### source
L7 瓦片图层统一在 `source` 中配置瓦片服务，同时用于区别普通的 L7 图层。
#### parser
栅格瓦片在 `parser` 中解析瓦片服务，配置瓦片的参数。
##### type: string
用于指定瓦片服务的解析方式，值为 `rasterTile` 和 `mvt`。
`rasterTile` 用于栅格瓦片的解析，`mvt` 用于矢量瓦片的解析。
##### dataType: string
使用 `dataType` 区分图片栅格和数据栅格，值为 `image` 和 `arraybuffer`，默认为 `image`。
```javascript
// 设置图片栅格
layer.source({
'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
{
parser: {
type: 'rasterTile',
dataType: 'image',
...
}
}
})
// 设置数据栅格
layer.source({
'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
{
parser: {
type: 'rasterTile',
dataType: 'arraybuffer',
...
}
}
})
```
##### minZoom/maxZoom: number
设置瓦片数据的请求层级。当地图的缩放层级 `zoom` 小于 `minZoom` 后，或 `zoom` 大于 `maxZoom` 后将不再请求新的瓦片。
`minZoom` 的默认值为 `-Infinity`。
`maxZoom` 的默认值为 `Infinity`。
##### tileSize: number
设置的值是瓦片服务返回的瓦片大小。
`tileSize` 的默认值为 256。
ps： 该值在生产瓦片的时候确定，我们设置的 `tileSize` 需要和瓦片服务返回的保持一致。
##### extent: [number, number, number, number]
设置请求瓦片数据的边界， 格式是 `[minLng, maxLat, maxLng, minLat]`，只会请求范围内的瓦片数据。
##### zoomOffset: number
设置的值用于改变请求的瓦片数据的层级，通常在移动端可以请求更高一级的瓦片以获取更好的清晰度。
`zoomOffset` 的默认值为 0
#### 🌟 format: func
数据栅格支持额外的 format 参数用于解析栅格数据，需要将栅格数据解析成 L7 栅格图层接受的标准格式。
```javascript
// 解析 png
const tileSource = new Source(
'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=YOUR_TOKRN',
parser: {
type: 'rasterTile',
dataType: 'arraybuffer',
tileSize: 256,
format: async (data: any) => {
const blob: Blob = new Blob([new Uint8Array(data)], {
type: 'image/png',
});
const img = await createImageBitmap(blob);
ctx.clearRect(0, 0, 256, 256);
ctx.drawImage(img, 0, 0, 256, 256);
let imgData = ctx.getImageData(0, 0, 256, 256).data;
let arr = [];
for (let i = 0; i < imgData.length; i += 4) {
const R = imgData[i];
const G = imgData[i + 1];
const B = imgData[i + 2];
const d = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;
arr.push(d);
}
return {
rasterData: arr,
width: 256,
height: 256,
};
}
})
// 解析 Lerc
// const image = Lerc.decode(data);
// return {
// rasterData: image.pixels[0],
// width: image.width,
// height: image.height,
// };
// 解析 Tiff
// const tiff = await GeoTIFF.fromArrayBuffer(data);
// const image = await tiff.getImage();
// const width = image.getWidth();
// const height = image.getHeight();
// const values = await image.readRasters();
// return { rasterData: values[0], width, height };
```
[在线案例](/zh/examples/tile/raster#dem)
### style
栅格瓦片支持配置多种样式参数
#### opacity: number
```javascript
layer.style({
opacity: 0.5,
});
```
#### domain: [number, number]
🌟 数据栅格瓦片
设置数据映射的定义域。
ps：固定值域为 `[0, 1]`，我们将传入的值（domain） 映射到值域 `[0, 1]` 后从 `rampColor` 构建的色带上取颜色。
#### clampLow/clampHigh: boolean
🌟 数据栅格瓦片
`clampLow` 的默认值为 `false`，设置为 `true`，低于 `domain` 的数据将不显示。
`clampHigh` 的默认值为 `false`，设置为 `true`，高于 `domain` 的数据将不显示。
#### rampColors
🌟 数据栅格瓦片
配置瓦片值域映射颜色的色带。
```javascript
layer.style({
rampColors: {
colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
```
ps：⚠️ color, position 的长度要相同
## event
🌟 数据栅格支持图层事件，目前图片栅格暂时不支持图层事件。
### 绑定事件
🌟 数据栅格瓦片
```javascript
// 绑定事件的方式和普通图层保持一致
layer.on('click', e => {...})
```
### 事件参数
🌟 数据栅格瓦片
数据栅格瓦片的事件参数相比于普通图层的事件返回了新的参数。
#### value: number
🌟 数据栅格瓦片
鼠标事件位置的瓦片的实际数值。

6
docs/api/tile/tile_layer.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: Tile
order: 0
---
`markdown:docs/api/tile_layer.zh.md`

58
docs/api/tile/tile_layer.zh.md Normal file
View File

@ -0,0 +1,58 @@
---
title: 瓦片图层
order: 0
---
`markdown:docs/common/style.md`
L7 瓦片图层提供了对图片栅格瓦片、数据栅格瓦片、矢量瓦片的支持，通过使用瓦片图层，用户可以更加自由的选择地图底图，同时使用瓦片图层作为底图意味着不会增加 `webgl` 实例，对需要同时使用多个地图图表的情形更加友好。
### layer
L7 瓦片图层支持多种类型。
```javascript
// 栅格瓦片图层
import { RasterLayer } from '@antv/l7';
// 矢量瓦片图层
import { PointLayer } from '@antv/l7';
import { LineLayer } from '@antv/l7';
import { PolygonLayer } from '@antv/l7';
```
<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*duYYQoVY8EYAAAAAAAAAAAAAARQnAQ'>
### source
L7 的瓦片图层复用了原有的普通图层，在使用上通过 `source` 来进行区分。
```javascript
// 普通图层在 source 中直接传入数据，而瓦片图层则在 source 中设置瓦片服务
import { Source } from '@antv/l7'
const RasterTileSource = new Source({
'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
{
parser: {
type: 'rasterTile',
...
}
}
})
// 设置栅格瓦片服务
layer.source(RasterTileSource)
const VectorTileSource = new Source({
'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
...
}
}
})
// 设置矢量瓦片服务
layer.source(VectorTileSource)
```

6
docs/api/tile/vectorTile_layer.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: Vector Tile
order: 2
---
`markdown:docs/api/vectorTile_layer.zh.md`

133
docs/api/tile/vectorTile_layer.zh.md Normal file
View File

@ -0,0 +1,133 @@
---
title: 矢量瓦片图层
order: 2
---
`markdown:docs/common/style.md`
L7 瓦片图层提供了对图片栅格瓦片、数据栅格瓦片、矢量瓦片的支持，通过使用瓦片图层，用户可以更加自由的选择地图底图，同时使用瓦片图层作为底图意味着不会增加 `webgl` 实例，对需要同时使用多个地图图表的情形更加友好。
### layer
L7 支持多种类型的矢量图层。
```javascript
// 矢量瓦片图层
import { PointLayer } from '@antv/l7';
import { LineLayer } from '@antv/l7';
import { PolygonLayer } from '@antv/l7';
```
<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0yJ8QYqOhCMAAAAAAAAAAAAAARQnAQ'>
[在线案例](/zh/examples/tile/vector#polygon)
### option
矢量瓦片图层可以在初始化的时候传入 `zIndex` 配置图层的渲染顺序。
矢量瓦片图层需要在初始化的时候传入 `featureId` 和 `sourceLayer` 参数，`featureId` 用于指定瓦片的拾取高亮，`sourceLayer` 指定绘制矢量数据中那一图层数据。
```javascript
const layer = new RasterLayer({
zIndex: 1,
featureId: 'id',
sourceLayer: 'water',
});
```
- featureId: string
用于可以自定义指定。
- sourceLayer: string
用于必须传入，且要在返回的矢量数据中存在。
### source
L7 的瓦片图层复用了原有的普通图层，在使用上通过 `source` 来进行区分。
```javascript
// 普通图层在 source 中直接传入数据，而瓦片图层则在 source 中设置瓦片服务
// 设置矢量瓦片服务
import { Source } from '@antv/l7'
const tileSource = new Source({
'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{ // parser
parser: {
type: 'mvt',
...
}
}
})
layer.source(tileSource)
```
#### parser
矢量瓦片在 `parser` 中解析瓦片服务，配置瓦片的参数。
##### type: string
用于指定瓦片服务的解析方式，值为 `rasterTile` 和 `mvt`。
`rasterTile` 用于栅格瓦片的解析，`mvt` 用于矢量瓦片的解析。
##### minZoom/maxZoom: number
设置瓦片数据的请求层级。当地图的缩放层级 `zoom` 小于 `minZoom` 后，或 `zoom` 大于 `maxZoom` 后将不再请求新的瓦片。
`minZoom` 的默认值为 `-Infinity`。
`maxZoom` 的默认值为 `Infinity`。
##### tileSize: number
设置的值是瓦片服务返回的瓦片大小。
`tileSize` 的默认值为 256。
ps： 该值在生产瓦片的时候确定，我们设置的 `tileSize` 需要和瓦片服务返回的保持一致。
##### extent: [number, number, number, number]
设置请求瓦片数据的边界， 格式是 `[minLng, maxLat, maxLng, minLat]`，只会请求范围内的瓦片数据。
##### zoomOffset: number
设置的值用于改变请求的瓦片数据的层级，通常在移动端可以请求更高一级的瓦片以获取更好的清晰度。
`zoomOffset` 的默认值为 `0`。
### style
#### opacity: number
设置矢量图形的透明度。
🌟 vector text、point、line、polygon
#### stroke: string
设置边框的颜色值。
🌟 vector text、point
#### strokeWidth: number
设置边框的宽度。
🌟 vector text
#### textAllowOverlap: boolean
是否允许文字覆盖。
🌟 vector text
#### textAnchor: 'center'
文本相对锚点的位置 `center`|`left`|`right`|`top`|`bottom`|`top-left`。
🌟 vector text
#### textOffset: [number, number]
文本相对锚点的偏移量 [水平, 垂直]。
🌟 vector text
#### spacing: number
字符间距。
🌟 vector text
#### padding: [number, number]
文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近。
🌟 vector text

2
docs/api/wind.zh.md
View File

@ -60,5 +60,3 @@ layer.animate(true);
}
[在线案例](../../examples/wind/basic#wind)
`markdown:docs/common/layer/base.md`

6
docs/tutorial/tile.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: Tile
order: 3
---
`markdown:docs/tutorial/tile.zh.md`

109
docs/tutorial/tile.zh.md Normal file
View File

@ -0,0 +1,109 @@
---
title: 瓦片
order: 3
redirect_from:
- /zh/docs/tutorial
---
`markdown:docs/common/style.md`
## 🌟 初始化指定矢量图层数据参数
在初始化矢量瓦片的时候往往需要我们提前设置矢量数据相关的参数。
```javascript
const layer = new PointLayer({
featureId: 'id', // 指定矢量图层拾取高亮时的编码参数
sourceLayer: 'wood', // 指定绘制矢量数据中那一图层数据
});
```
## 🌟 多图层复用地图服务
在有些场景下，尤其是是矢量瓦片地图的场景，同一份瓦片数据会同时包含多图层的数据，此时我们需要让多图层复用同一个 `source` 对象。如下图所示，我们使用同一份数据绘制省市的面、边界和名称，此时我们就应该复用 `source` 对象。
<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*cMFMTqF7WoIAAAAAAAAAAAAAARQnAQ'>
```javascript
const tileSource = new Source(
'http://localhost:3000/file.mbtiles/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9,
extent: [-180, -85.051129, 179, 85.051129],
},
});
const option = {
featureId: 'NAME_CHN',
sourceLayer: 'city'
}
const linelayer = new LineLayer(option)
.source(tileSource)
.color('#f00')
.size(1)
.style({
opacity: 0.5,
});
this.scene.addLayer(linelayer);
const polygonlayer = new PolygonLayer(option)
.source(tileSource)
.color('citycode', (v: string) => {
return getRandomColor(v);
}
})
.style({
opacity: 0.4,
})
.select(true);
this.scene.addLayer(polygonlayer);
const pointlayer = new PointLayer(option)
.source(tileSource)
.shape('NAME_CHN', 'text')
.color('#f00')
.size(12)
.style({
stroke: '#fff',
strokeWidth: 2,
});
this.scene.addLayer(pointlayer);
```
## Mask
🌟 瓦片图层的掩模使用和普通的图层一样，不过矢量瓦片图层暂时不支持设置掩模。
## 底图
🌟 瓦片图层可以用作 L7 的地图底图，同时推荐使用 `L7Map`，这样我们就可以在一个 L7 实例中减少一个 `webgl` 实例。
## 矢量图层的鼠标事件
在使用上，矢量图层绑定事件的操作和普通图层事件保持一致。
```javascript
layer.on('click', e => {...})
```
🌟 在事件的返回参数中，L7 内部对图形的数据做了合并的操作，以求获取到当前图层的完整数据。
🌟 目前矢量瓦片支持的事件如下：
```javascript
layer.on('click', (e) => {});
layer.on('mousemove', (e) => {});
layer.on('mouseup', (e) => {});
layer.on('mouseenter', (e) => {});
layer.on('mouseout', (e) => {});
layer.on('mousedown', (e) => {});
layer.on('contextmenu', (e) => {});
// out side
layer.on('unclick', (e) => {});
layer.on('unmouseup', (e) => {});
layer.on('unmousedown', (e) => {});
layer.on('uncontextmenu', (e) => {});
```

8
examples/point/text/index.en.md
View File

@ -6,22 +6,22 @@ order: 1
## 使用
## shape
### shape
- text
文本渲染需要将指定字段的shape设置成 text
```javascript
layer.shape('name','text')
```
## color
### color
同layer color
## size
### size
同layer size
## style
### style
- textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
- textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]

62
examples/tile/raster/demo/amap-satelliteMask.js Normal file
View File

@ -0,0 +1,62 @@
import { Scene, RasterLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 120, 30 ],
zoom: 6.5
})
});
scene.on('loaded', () => {
fetch(
// 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
'https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json'
)
.then(res => res.json())
.then(data => {
// 影像底图服务
const baseLayer = new RasterLayer({
zIndex: 1,
mask: true,
maskfence: data
});
baseLayer.source(
'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
{
parser: {
type: 'rasterTile',
tileSize: 256,
zoomOffset: 0
}
}
);
scene.addLayer(baseLayer);
});
// 影像注记服务
const annotionLayer = new RasterLayer({
zIndex: 2
});
annotionLayer.source(
'https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
{
parser: {
type: 'rasterTile',
tileSize: 256,
// minZoom: 6,
// maxZoom: 15,
zoomOffset: 0
// extent: [-180, -85.051129, 179, 85.051129],
}
}
);
scene.addLayer(annotionLayer);
});

106
examples/tile/raster/demo/dem.js Normal file
View File

@ -0,0 +1,106 @@
import { Scene, RasterLayer, Source } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const colorList = [
'#f7fcf5',
'#e5f5e0',
'#c7e9c0',
'#a1d99b',
'#74c476',
'#41ab5d',
'#238b45',
'#006d2c',
'#00441b'
];
const positions = [ 0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0 ];
const scene = new Scene({
id: 'map',
map: new Map({
center: [ 90.268, 35.3628 ],
zoom: 3
})
});
const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext('2d');
scene.on('loaded', () => {
const layer = new RasterLayer();
const tileSource = new Source('https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
{
parser: {
type: 'rasterTile',
dataType: 'arraybuffer',
tileSize: 256,
minZoom: 1,
maxZoom: 18,
zoomOffset: 0,
format: async data => {
const blob = new Blob([ new Uint8Array(data) ], {
type: 'image/png'
});
const img = await createImageBitmap(blob);
ctx.clearRect(0, 0, 256, 256);
ctx.drawImage(img, 0, 0, 256, 256);
const imgData = ctx.getImageData(0, 0, 256, 256).data;
const arr = [];
for (let i = 0; i < imgData.length; i += 4) {
const R = imgData[i];
const G = imgData[i + 1];
const B = imgData[i + 2];
const d = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;
arr.push(d);
}
return {
rasterData: arr,
width: 256,
height: 256
};
}
}
});
layer.source(tileSource)
.style({
domain: [ 0, 1024 ],
clampLow: true,
rampColors: {
colors: colorList,
positions
}
});
scene.addLayer(layer);
return '';
});
const wrap = document.getElementById('map');
const legend = document.createElement('div');
const data = [];
for (let i = 0; i < colorList.length; i++) {
data.push({
color: colorList[i],
text: positions[i]
});
}
const strArr = [];
data.map(({ color, text }) => {
strArr.push(` <div style="display:inline-block;background:#fff;padding:5px;">
<div style="fontSize:12px;lineHeight:12px;">
${text}
</div>
<div style="width: 30px;height:8px; background: ${color};"></div>
</div>`);
return '';
});
legend.innerHTML = strArr.join('');
legend.style.position = 'absolute';
legend.style.left = '10px';
legend.style.bottom = '30px';
legend.style.background = '#fff';
legend.style.zIndex = 10;
wrap.appendChild(legend);

75
examples/tile/raster/demo/lerc.js Normal file
View File

@ -0,0 +1,75 @@
import { Scene, RasterLayer, Source } from '@antv/l7';
import { Map } from '@antv/l7-maps';
import * as Lerc from 'lerc';
const colorList = [ '#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#045a8d', '#023858' ];
const positions = [ 0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0 ];
const scene = new Scene({
id: 'map',
map: new Map({
center: [ 90.268, 35.3628 ],
zoom: 3
})
});
scene.on('loaded', () => {
const layer = new RasterLayer();
const tileSource = new Source('https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/tile/{z}/{y}/{x}',
{
parser: {
type: 'rasterTile',
dataType: 'arraybuffer',
tileSize: 256,
format: async data => {
const image = Lerc.decode(data);
return {
rasterData: image.pixels[0],
width: image.width,
height: image.height
};
}
}
});
layer.source(tileSource)
.style({
domain: [ 0, 1024 ],
clampLow: true,
rampColors: {
colors: colorList,
positions
}
});
scene.addLayer(layer);
return '';
});
const wrap = document.getElementById('map');
const legend = document.createElement('div');
const data = [];
for (let i = 0; i < colorList.length; i++) {
data.push({
color: colorList[i],
text: positions[i]
});
}
const strArr = [];
data.map(({ color, text }) => {
strArr.push(` <div style="display:inline-block;background:#fff;padding:5px;">
<div style="fontSize:12px;lineHeight:12px;">
${text}
</div>
<div style="width: 30px;height:8px; background: ${color};"></div>
</div>`);
return '';
});
legend.innerHTML = strArr.join('');
legend.style.position = 'absolute';
legend.style.left = '10px';
legend.style.bottom = '30px';
legend.style.background = '#fff';
legend.style.zIndex = 10;
wrap.appendChild(legend);

30
examples/tile/raster/demo/mapbox-streets.js
View File

@ -1,30 +0,0 @@
import { Scene, RasterLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Map({
center: [ 90.268, 35.3628 ],
zoom: 3
})
});
scene.on('loaded', () => {
const layer = new RasterLayer({
zIndex: 1
});
layer.source(
'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
{
parser: {
type: 'rasterTile',
tileSize: 512,
minZoom: 1,
maxZoom: 18,
zoomOffset: 0
}
}
);
scene.addLayer(layer);
});

28
examples/tile/raster/demo/meta.json
View File

@ -15,9 +15,9 @@
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oRfnb3AR05/7866c85b-2d33-4ad2-a276-c52cbde041b0.png"
},
{
"filename": "mapbox-streets.js",
"title": "mapbox 街道瓦片",
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oic8gzwY8Z/d047a27f-3d11-41dd-ab9e-22bcafcc3daf.png"
"filename": "amap-satelliteMask.js",
"title": "高德卫星影像瓦片 + Mask",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0zAwTZ4WfNYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "tianditu-normal.js",
@ -25,14 +25,24 @@
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/PbsT2bl0KL/386a8233-322a-4c53-93fc-1eec39aa21f4.png"
},
{
"filename": "open-street-map.js",
"title": "OSM 瓦片",
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/DacxQD9rO5/6da6d0f7-0a90-41f7-963c-48be8fb9050c.png"
"filename": "tianditu-satellite.js",
"title": "天地图卫星影像瓦片",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*sV6gSYSdpl4AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "watercolor.js",
"title": "三方水彩瓦片",
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/v%24zEKgSWSc/aced2778-0687-4b03-9573-1e2f6d9a1d07.png"
"filename": "dem.js",
"title": "png 高程栅格",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MNYOSbk1-KIAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "lerc.js",
"title": "lerc 高程栅格",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Q2SlRZ8L2_sAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "tiff.js",
"title": "tiff 土地栅格",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*QUb2TY71GjIAAAAAAAAAAAAAARQnAQ"
}
]
}

27
examples/tile/raster/demo/open-street-map.js
View File

@ -1,27 +0,0 @@
import { Scene, RasterLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Map({
center: [ 90.268, 35.3628 ],
zoom: 3
})
});
scene.on('loaded', () => {
const layer = new RasterLayer({
zIndex: 1
});
layer.source('https://a.tile.osm.org/{z}/{x}/{y}.png', {
parser: {
type: 'rasterTile',
tileSize: 256,
minZoom: 0,
maxZoom: 22,
zoomOffset: 0
}
});
scene.addLayer(layer);
});

47
examples/tile/raster/demo/tianditu-satellite.js Normal file
View File

@ -0,0 +1,47 @@
import { Scene, RasterLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Map({
center: [ 90.268, 40.3628 ],
zoom: 3
})
});
scene.on('loaded', () => {
// 底图服务
const baseLayer = new RasterLayer({
zIndex: 1
});
baseLayer.source(
'https://t1.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd',
{
parser: {
type: 'rasterTile',
tileSize: 256,
zoomOffset: 0
}
}
);
// 注记服务
const annotionLayer = new RasterLayer({
zIndex: 2
});
annotionLayer.source(
'https://t1.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd',
{
parser: {
type: 'rasterTile',
tileSize: 256,
// minZoom: 6,
// maxZoom: 15,
zoomOffset: 0
}
}
);
scene.addLayer(baseLayer);
scene.addLayer(annotionLayer);
});

152
examples/tile/raster/demo/tiff.js Normal file
View File

@ -0,0 +1,152 @@
import { Scene, RasterLayer, Source } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as GeoTIFF from 'geotiff';
const colorList = [
'#419bdf', // Water
'#419bdf',
'#397d49', // Tree
'#397d49',
'#88b053', // Grass
'#88b053',
'#7a87c6', // vegetation
'#7a87c6',
'#e49635', // Crops
'#e49635',
'#dfc35a', // shrub
'#dfc35a',
'#c4281b', // Built Area
'#c4281b',
'#a59b8f', // Bare ground
'#a59b8f',
'#a8ebff', // Snow
'#a8ebff',
'#616161', // Clouds
'#616161'
];
const positions = [
0.0,
0.1,
0.1,
0.2,
0.2,
0.3,
0.3,
0.4,
0.4,
0.5,
0.5,
0.6,
0.6,
0.7,
0.7,
0.8,
0.8,
0.9,
0.9,
1.0
];
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
center: [ 116, 27 ],
zoom: 6,
style: 'dark'
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json'
)
.then(res => res.json())
.then(maskData => {
const layer = new RasterLayer({
mask: true,
maskfence: maskData
});
const tileSource = new Source('https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
{
parser: {
type: 'rasterTile',
dataType: 'arraybuffer',
tileSize: 256,
maxZoom: 13.1,
format: async data => {
const tiff = await GeoTIFF.fromArrayBuffer(data);
const image = await tiff.getImage();
const width = image.getWidth();
const height = image.getHeight();
const values = await image.readRasters();
return { rasterData: values[0], width, height };
}
}
});
layer.source(tileSource)
.style({
domain: [ 0.001, 11.001 ],
clampLow: false,
rampColors: {
colors: colorList,
positions
}
});
scene.addLayer(layer);
return '';
});
return '';
});
const wrap = document.getElementById('map');
const legend = document.createElement('div');
const data = [];
for (let i = 0; i < colorList.length; i += 2) {
data.push({
color: colorList[i],
text: [
'Water',
'Trees',
'Grass',
'Vegetation',
'Crops',
'Shrub',
'Built Area',
'Bare ground',
'Snow',
'Clouds'
][i / 2]
});
}
const strArr = [];
data.map(({ color, text }) => {
strArr.push(` <div style="display:inline-block;background:#fff:padding:5px;">
<div style="fontSize:12px;lineHeight:12px;color: #fff">
${text}
</div>
<div style="height:8px; background: ${color};"></div>
</div>`);
return '';
});
legend.innerHTML = strArr.join('');
legend.style.position = 'absolute';
legend.style.left = '10px';
legend.style.bottom = '30px';
legend.style.zIndex = 10;
wrap.appendChild(legend);

31
examples/tile/raster/demo/watercolor.js
View File

@ -1,31 +0,0 @@
import { Scene, RasterLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Map({
center: [ 121.268, 30.3628 ],
pitch: 0,
zoom: 2
})
});
scene.on('loaded', () => {
const layer = new RasterLayer({
zIndex: 1
});
layer.source(
'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
{
parser: {
type: 'rasterTile',
tileSize: 256,
minZoom: 0,
maxZoom: 22,
zoomOffset: 0
}
}
);
scene.addLayer(layer);
});

0
examples/tile/vector/API.en.md Normal file
View File

0
examples/tile/vector/API.zh.md Normal file
View File

34
examples/tile/vector/demo/line.js Normal file
View File

@ -0,0 +1,34 @@
import { Scene, LineLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 100, 30.3628 ],
zoom: 1
})
});
scene.on('loaded', () => {
const layer = new LineLayer({
featureId: 'COLOR',
sourceLayer: 'ecoregions2'
});
layer
.source(
'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9
}
}
)
.size(2)
.color('COLOR');
scene.addLayer(layer);
});

28
examples/tile/vector/demo/meta.json Normal file
View File

@ -0,0 +1,28 @@
{
"title": {
"zh": "矢量瓦片图层",
"en": "Vector Tile"
},
"demos": [
{
"filename": "polygon.js",
"title": "矢量 polygon",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GgzeQoJdn80AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "line.js",
"title": "矢量 line",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*qGm9S756ggMAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "point.js",
"title": "矢量 point",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GlzySLqOgH8AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "text.js",
"title": "矢量 text",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0TVXSbkyKvsAAAAAAAAAAAAAARQnAQ"
}
]
}

35
examples/tile/vector/demo/point.js Normal file
View File

@ -0,0 +1,35 @@
import { Scene, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 100, 30.3628 ],
zoom: 1
})
});
scene.on('loaded', () => {
const layer = new PointLayer({
featureId: 'COLOR',
sourceLayer: 'ecoregions2'
});
layer
.source(
'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9
}
}
)
.size(10)
.color('COLOR')
.active(true);
scene.addLayer(layer);
});

34
examples/tile/vector/demo/polygon.js Normal file
View File

@ -0,0 +1,34 @@
import { Scene, PolygonLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 100, 30.3628 ],
zoom: 1
})
});
scene.on('loaded', () => {
const layer = new PolygonLayer({
featureId: 'COLOR',
sourceLayer: 'ecoregions2'
});
layer
.source(
'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9
}
}
)
.color('COLOR')
.active(true);
scene.addLayer(layer);
});

41
examples/tile/vector/demo/text.js Normal file
View File

@ -0,0 +1,41 @@
import { Scene, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 100, 30.3628 ],
zoom: 1
})
});
scene.on('loaded', () => {
const layer = new PointLayer({
featureId: 'COLOR',
sourceLayer: 'ecoregions2'
});
layer
.source(
'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9
}
}
)
.shape('NNH_NAME', 'text')
.size(10)
.color('COLOR')
.active(true)
.style({
stroke: '#00f',
strokeWidth: 1,
textAllowOverlap: false
});
scene.addLayer(layer);
});

4
examples/tile/vector/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Vector Tile
order: 1
---

4
examples/tile/vector/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 矢量瓦片图层
order: 1
---

1
gatsby-browser.js
View File

@ -2,6 +2,7 @@ require('./site/css/demo.css');
require('./packages/component/src/css/l7.css');
require('antd/dist/antd.less');
window.geotiff = require('geotiff');
window.lerc = require('lerc');
window.g2 = require('@antv/g2');
window.l7 = require('@antv/l7');
window.l7Mini = require('@antv/l7-mini');

8
gatsby-config.js
View File

@ -215,6 +215,14 @@ module.exports = {
},
order: 8,
},
{
slug: 'api/tile',
title: {
zh: '瓦片',
en: 'tile',
},
order: 8,
},
{
slug: 'api/cityBuilding',
title: {

2
lerna.json
View File

@ -15,7 +15,7 @@
"registry": "https://registry.npmjs.org"
}
},
"version": "2.8.47",
"version": "2.9.8",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

1
package.json
View File

@ -86,6 +86,7 @@
"glsl-minifier": "^0.0.13",
"html-webpack-plugin": "^4.3.0",
"husky": "^3.0.9",
"lerc": "^3.0.0",
"jest": "^24.9.0",
"jest-electron": "^0.1.11",
"@material-ui/core": "^4.10.2",

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.8.47",
"version": "2.9.8",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "2.8.47",
"@antv/l7-utils": "2.8.47",
"@antv/l7-core": "2.9.8",
"@antv/l7-utils": "2.9.8",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

4
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.8.47",
"version": "2.9.8",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "2.8.47",
"@antv/l7-utils": "2.9.8",
"@babel/runtime": "^7.7.7",
"ajv": "^6.10.2",
"element-resize-event": "^3.0.3",

4
packages/core/src/services/coordinate/CoordinateSystemService.ts
View File

@ -65,13 +65,13 @@ export default class CoordinateSystemService
* 重新计算当前坐标系参数
* TODO: 使用 memoize 缓存参数以及计算结果
*/
public refresh(): void {
public refresh(offsetCenter?: [number, number]): void {
// if (!this.needRefresh) {
// return;
// }
const zoom = this.cameraService.getZoom();
const zoomScale = this.cameraService.getZoomScale();
const center = this.cameraService.getCenter();
const center = offsetCenter ? offsetCenter : this.cameraService.getCenter();
// 计算像素到米以及经纬度之间的转换
const { pixelsPerMeter, pixelsPerDegree } = getDistanceScales({

2
packages/core/src/services/coordinate/ICoordinateSystemService.ts
View File

@ -34,7 +34,7 @@ export const CoordinateUniform = {
export interface ICoordinateSystemService {
needRefresh: boolean;
refresh(): void;
refresh(offset?: [number, number]): void;
getCoordinateSystem(): CoordinateSystem;
setCoordinateSystem(coordinateSystem: CoordinateSystem): void;
getViewportCenter(): [number, number];

4
packages/core/src/services/interaction/IPickingService.ts
View File

@ -1,6 +1,10 @@
import { IInteractionTarget } from '../interaction/IInteractionService';
import { ILayer } from '../layer/ILayerService';
export interface IPickingService {
pickedColors: Uint8Array | undefined;
pickedTileLayers: ILayer[];
init(id: string): void;
pickFromPickingFBO(layer: ILayer, target: IInteractionTarget): boolean;
pickBox(layer: ILayer, box: [number, number, number, number]): any[];
boxPickLayer(
layer: ILayer,

217
packages/core/src/services/interaction/PickingService.ts
View File

@ -22,6 +22,8 @@ import { IRendererService } from '../renderer/IRendererService';
import { IPickingService } from './IPickingService';
@injectable()
export default class PickingService implements IPickingService {
public pickedColors: Uint8Array | undefined;
public pickedTileLayers: ILayer[] = [];
@inject(TYPES.IMapService)
private readonly mapService: IMapService;
@ -182,103 +184,7 @@ export default class PickingService implements IPickingService {
this.pickingFBO = null;
}
// 获取容器的大小 - 兼容小程序环境
private getContainerSize(container: HTMLCanvasElement | HTMLElement) {
if (!!(container as HTMLCanvasElement).getContext) {
return {
width: (container as HTMLCanvasElement).width / DOM.DPR,
height: (container as HTMLCanvasElement).height / DOM.DPR,
};
} else {
return container.getBoundingClientRect();
}
}
private async pickingAllLayer(target: IInteractionTarget) {
if (
// TODO: this.alreadyInPicking 避免多次重复拾取
this.alreadyInPicking ||
// TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
this.layerService.alreadyInRendering ||
// Tip: this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去）
this.interactionService.indragging ||
// TODO: 判断当前 是都进行 shader pick 拾取判断
!this.layerService.getShaderPickStat()
) {
return;
}
this.alreadyInPicking = true;
await this.pickingLayers(target);
this.layerService.renderLayers();
this.alreadyInPicking = false;
}
private resizePickingFBO() {
const { getContainer } = this.rendererService;
let { width, height } = this.getContainerSize(
getContainer() as HTMLCanvasElement | HTMLElement,
);
width *= DOM.DPR;
height *= DOM.DPR;
if (this.width !== width || this.height !== height) {
this.pickingFBO.resize({
width: Math.round(width / this.pickBufferScale),
height: Math.round(height / this.pickBufferScale),
});
this.width = width;
this.height = height;
}
}
private async pickingLayers(target: IInteractionTarget) {
const {
getViewportSize,
useFramebuffer,
clear,
getContainer,
} = this.rendererService;
this.resizePickingFBO();
useFramebuffer(this.pickingFBO, () => {
const layers = this.layerService.getRenderList();
layers
.filter((layer) => layer.needPick(target.type))
.reverse()
.some((layer) => {
clear({
framebuffer: this.pickingFBO,
color: [0, 0, 0, 0],
stencil: 0,
depth: 1,
});
layer.hooks.beforePickingEncode.call();
if (layer.masks.length > 0) {
// 若存在 mask，则在 pick 阶段的绘制也启用
layer.masks.map((m: ILayer) => {
m.hooks.beforeRenderData.call();
m.hooks.beforeRender.call();
m.render();
m.hooks.afterRender.call();
});
}
layer.renderModels(true);
layer.hooks.afterPickingEncode.call();
// Tip: clear last picked layer state
this.pickedLayers.map((pickedlayer) => {
this.selectFeature(pickedlayer, new Uint8Array([0, 0, 0, 0]));
});
const isPicked = this.pickFromPickingFBO(layer, target);
this.layerService.pickedLayerId = isPicked ? +layer.id : -1;
return isPicked && !layer.getLayerConfig().enablePropagation;
});
});
}
private pickFromPickingFBO = (
public pickFromPickingFBO = (
layer: ILayer,
{ x, y, lngLat, type, target }: IInteractionTarget,
) => {
@ -312,6 +218,7 @@ export default class PickingService implements IPickingService {
data: new Uint8Array(1 * 1 * 4),
framebuffer: this.pickingFBO,
});
this.pickedColors = pickedColors;
// let pickedColors = new Uint8Array(4)
// this.rendererService.getGLContext().readPixels(
@ -396,9 +303,125 @@ export default class PickingService implements IPickingService {
this.selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
layer.setCurrentSelectedId(null);
}
if (!layer.isVector) {
// Tip: 选中普通 layer 的时候将 tileLayer 的选中状态清除
this.layerService
.getLayers()
.filter((l) => l.tileLayer)
.map((l) => {
l.tileLayer.clearPickState();
});
}
}
return isPicked;
};
// 获取容器的大小 - 兼容小程序环境
private getContainerSize(container: HTMLCanvasElement | HTMLElement) {
if (!!(container as HTMLCanvasElement).getContext) {
return {
width: (container as HTMLCanvasElement).width / DOM.DPR,
height: (container as HTMLCanvasElement).height / DOM.DPR,
};
} else {
return container.getBoundingClientRect();
}
}
private async pickingAllLayer(target: IInteractionTarget) {
if (
// TODO: this.alreadyInPicking 避免多次重复拾取
this.alreadyInPicking ||
// TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
this.layerService.alreadyInRendering ||
// Tip: this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去）
this.interactionService.indragging ||
// TODO: 判断当前 是都进行 shader pick 拾取判断
!this.layerService.getShaderPickStat()
) {
return;
}
this.alreadyInPicking = true;
await this.pickingLayers(target);
this.layerService.renderLayers();
this.alreadyInPicking = false;
}
private resizePickingFBO() {
const { getContainer } = this.rendererService;
let { width, height } = this.getContainerSize(
getContainer() as HTMLCanvasElement | HTMLElement,
);
width *= DOM.DPR;
height *= DOM.DPR;
if (this.width !== width || this.height !== height) {
this.pickingFBO.resize({
width: Math.round(width / this.pickBufferScale),
height: Math.round(height / this.pickBufferScale),
});
this.width = width;
this.height = height;
}
}
private async pickingLayers(target: IInteractionTarget) {
const {
getViewportSize,
useFramebuffer,
clear,
getContainer,
} = this.rendererService;
this.resizePickingFBO();
useFramebuffer(this.pickingFBO, () => {
const layers = this.layerService.getRenderList();
layers
.filter((layer) => layer.needPick(target.type))
.reverse()
.some((layer) => {
clear({
framebuffer: this.pickingFBO,
color: [0, 0, 0, 0],
stencil: 0,
depth: 1,
});
// Tip: clear last picked layer state
this.pickedLayers
.filter((pickedlayer) => !pickedlayer.isVector)
.map((pickedlayer) => {
this.selectFeature(pickedlayer, new Uint8Array([0, 0, 0, 0]));
});
// Tip: clear last picked tilelayer state
this.pickedTileLayers.map((pickedTileLayer) =>
pickedTileLayer.tileLayer?.clearPick(target.type),
);
// Tip: 如果当前 layer 是瓦片图层，则走瓦片图层独立的拾取逻辑
if (layer.tileLayer) {
return layer.tileLayer.pickLayers(target);
}
layer.hooks.beforePickingEncode.call();
if (layer.masks.length > 0) {
// 若存在 mask，则在 pick 阶段的绘制也启用
layer.masks.map((m: ILayer) => {
m.hooks.beforeRenderData.call();
m.hooks.beforeRender.call();
m.render();
m.hooks.afterRender.call();
});
}
layer.renderModels(true);
layer.hooks.afterPickingEncode.call();
const isPicked = this.pickFromPickingFBO(layer, target);
this.layerService.pickedLayerId = isPicked ? +layer.id : -1;
return isPicked && !layer.getLayerConfig().enablePropagation;
});
});
}
private triggerHoverOnLayer(
layer: ILayer,
target: {

110
packages/core/src/services/layer/ILayerService.ts
View File

@ -1,8 +1,11 @@
// @ts-ignore
import { SyncBailHook, SyncHook, SyncWaterfallHook } from '@antv/async-hook';
import { IColorRamp, IImagedata, Tile, TilesetManager } from '@antv/l7-utils';
import { Container } from 'inversify';
import Clock from '../../utils/clock';
import { ISceneConfig } from '../config/IConfigService';
import { IInteractionTarget } from '../interaction/IInteractionService';
import { IPickingService } from '../interaction/IPickingService';
import { IMapService } from '../map/IMapService';
import { IAttribute } from '../renderer/IAttribute';
import {
@ -23,6 +26,8 @@ import {
IEncodeFeature,
IScale,
IScaleOptions,
IScaleValue,
IStyleAttribute,
IStyleAttributeService,
IStyleAttributeUpdateOptions,
ScaleAttributeType,
@ -116,6 +121,96 @@ export interface IAttrubuteAndElements {
elements: any;
}
export interface ISubLayerStyles {
opacity: number;
}
/**
* For tile subLayer
*/
export interface ISubLayerInitOptions {
layerType: string;
shape?: string | string[] | IScaleValue;
// options
zIndex: number;
mask: boolean;
// source
// style
stroke?: string;
strokeWidth?: number;
strokeOpacity?: number;
opacity: number;
color?: IScaleValue;
size?: IScaleValue;
// raster tiff
domain?: [number, number];
clampLow?: boolean;
clampHigh?: boolean;
rampColors?: IColorRamp;
// 在初始化的时候使用
rampColorsData?: ImageData | IImagedata;
coords?: string;
sourceLayer?: string;
featureId?: string;
}
export interface ITilePickManager {
isLastPicked: boolean;
on(type: string, cb: (option: any) => void): void;
normalRender(layers: ILayer[]): void;
beforeHighlight(pickedColors: any): void;
beforeSelect(pickedColors: any): void;
clearPick(): void;
pickRender(layers: ILayer[], target: IInteractionTarget): boolean;
}
export interface ITileLayerManager {
sourceLayer: string;
parent: ILayer;
children: ILayer[];
tilePickManager: ITilePickManager;
createTile(tile: Tile): { layers: ILayer[]; layerIDList: string[] };
addChild(layer: ILayer): void;
addChilds(layers: ILayer[]): void;
getChilds(layerIDList: string[]): ILayer[];
removeChild(layer: ILayer): void;
removeChilds(layerIDList: string[], refresh?: boolean): void;
clearChild(): void;
hasChild(layer: ILayer): boolean;
render(isPicking?: boolean): void;
pickLayers(target: IInteractionTarget): boolean;
updateLayersConfig(layers: ILayer[], key: string, value: any): void;
}
export interface ITileLayer {
type: string;
sourceLayer: string;
parent: ILayer;
tileLayerManager: ITileLayerManager;
tilesetManager: TilesetManager | undefined;
children: ILayer[];
scaleField: any;
render(isPicking?: boolean): void;
pickLayers(target: IInteractionTarget): boolean;
clearPick(type: string): void;
clearPickState(): void;
}
export interface ITileLayerOPtions {
parent: ILayer;
rendererService: IRendererService;
mapService: IMapService;
layerService: ILayerService;
pickingService: IPickingService;
}
export type LayerEventType =
| 'inited'
| 'add'
@ -149,6 +244,7 @@ export interface ILayer {
layerModelNeedUpdate: boolean;
styleNeedUpdate: boolean;
layerModel: ILayerModel;
tileLayer: ITileLayer;
layerChildren: ILayer[]; // 在图层中添加子图层
masks: ILayer[]; // 图层的 mask 列表
sceneContainer: Container | undefined;
@ -177,7 +273,7 @@ export interface ILayer {
multiPassRenderer: IMultiPassRenderer;
// 初始化 layer 的时候指定 layer type 类型（）兼容空数据的情况
layerType?: string | undefined;
isLayerGroup: boolean;
isVector?: boolean;
triangulation?: Triangulation | undefined;
/**
* threejs 适配兼容相关的方法
@ -195,6 +291,7 @@ export interface ILayer {
addMaskLayer(maskLayer: ILayer): void;
removeMaskLayer(maskLayer: ILayer): void;
needPick(type: string): boolean;
getAttribute(name: string): IStyleAttribute | undefined;
getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
setBottomColor(color: string): void;
getBottomColor(): string;
@ -272,7 +369,7 @@ export interface ILayer {
clear(): void;
clearModels(): void;
destroy(): void;
destroy(refresh?: boolean): void;
source(data: any, option?: ISourceCFG): ILayer;
setData(data: any, option?: ISourceCFG): ILayer;
fitBounds(fitBoundsOptions?: unknown): ILayer;
@ -352,13 +449,6 @@ export interface ILayer {
setEarthTime(time: number): void;
}
export interface ILayerGroup extends ILayer {
addChild(layer: ILayer): void;
removeChild(layer: ILayer): void;
clearChild(): void;
hasChild(layer: ILayer): boolean;
}
/**
* Layer 插件
*/
@ -488,7 +578,7 @@ export interface ILayerService {
getRenderList(): ILayer[];
getLayer(id: string): ILayer | undefined;
getLayerByName(name: string): ILayer | undefined;
cleanRemove(layer: ILayer, parentLayer?: ILayer): void;
cleanRemove(layer: ILayer, refresh?: boolean): void;
remove(layer: ILayer, parentLayer?: ILayer): void;
removeAllLayers(): void;
updateLayerRenderList(): void;

6
packages/core/src/services/layer/IStyleAttributeService.ts
View File

@ -144,6 +144,12 @@ export interface IStyleAttributeInitializationOptions {
descriptor: IVertexAttributeDescriptor;
}
export interface IScaleValue {
field: StyleAttributeField | undefined;
values: unknown[] | string | undefined;
callback?: (...args: any[]) => [] | undefined;
}
export interface IFeatureRange {
startIndex: number;
endIndex: number;

43
packages/core/src/services/layer/LayerService.ts
View File

@ -86,21 +86,15 @@ export default class LayerService implements ILayerService {
return this.layers.find((layer) => layer.name === name);
}
public cleanRemove(layer: ILayer, parentLayer?: ILayer) {
// Tip: layer.layerChildren 当 layer 存在子图层的情况
if (parentLayer) {
const layerIndex = parentLayer.layerChildren.indexOf(layer);
if (layerIndex > -1) {
parentLayer.layerChildren.splice(layerIndex, 1);
}
} else {
const layerIndex = this.layers.indexOf(layer);
if (layerIndex > -1) {
this.layers.splice(layerIndex, 1);
}
public cleanRemove(layer: ILayer, refresh = true) {
const layerIndex = this.layers.indexOf(layer);
if (layerIndex > -1) {
this.layers.splice(layerIndex, 1);
}
if (refresh) {
this.updateLayerRenderList();
this.renderLayers();
}
this.updateLayerRenderList();
this.renderLayers();
}
public remove(layer: ILayer, parentLayer?: ILayer): void {
@ -140,8 +134,7 @@ export default class LayerService implements ILayerService {
layer.hooks.beforeRenderData.call();
layer.hooks.beforeRender.call();
// layerGroup 不支持 Mask
if (!layer.isLayerGroup && layer.masks.length > 0) {
if (layer.masks.length > 0) {
// 清除上一次的模版缓存
this.renderService.clear({
stencil: 0,
@ -185,23 +178,7 @@ export default class LayerService implements ILayerService {
return pre.zIndex - next.zIndex;
})
.forEach((layer) => {
if (layer.isLayerGroup) {
// layerGroup
// Tip: 渲染 layer 的子图层 默认 layerChildren 为空数组 表示没有子图层 目前只有 ImageTileLayer 有子图层
layer.layerChildren
.filter((childlayer) => childlayer.inited)
.filter((childlayer) => childlayer.isVisible())
.sort((pre: ILayer, next: ILayer) => {
// 根据 zIndex 对渲染顺序进行排序
return pre.zIndex - next.zIndex;
})
.forEach((childlayer) => {
this.layerList.push(childlayer);
});
} else {
// baseLayer
this.layerList.push(layer);
}
this.layerList.push(layer);
});
}

1
packages/core/src/services/renderer/ITexture2D.ts
View File

@ -35,6 +35,7 @@ export interface ITexture2DInitializationOptions {
| undefined
| HTMLCanvasElement
| HTMLImageElement
| ImageBitmap
| number[]
| number[][]
| Uint8Array

17
packages/core/src/shaders/projection.glsl
View File

@ -80,6 +80,23 @@ vec3 reverse_offset_normal(vec3 vector) {
return vector;
}
vec4 project_mvt_offset_position(vec4 position) {
float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;
float b = COORDINATE_SYSTEM_P20_OFFSET;
float c = COORDINATE_SYSTEM_LNGLAT;
if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
return project_offset(vec4(0.0, 0.0, position.z, position.w));
}
if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {
return vec4(
project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,
project_scale(position.z),
position.w
);
}
return position;
}
vec4 project_position(vec4 position) {
float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;
float b = COORDINATE_SYSTEM_P20_OFFSET;

16
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.8.47",
"version": "2.9.8",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,13 +25,13 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "2.8.47",
"@antv/l7-core": "2.8.47",
"@antv/l7-layers": "2.8.47",
"@antv/l7-maps": "2.8.47",
"@antv/l7-scene": "2.8.47",
"@antv/l7-source": "2.8.47",
"@antv/l7-utils": "2.8.47",
"@antv/l7-component": "2.9.8",
"@antv/l7-core": "2.9.8",
"@antv/l7-layers": "2.9.8",
"@antv/l7-maps": "2.9.8",
"@antv/l7-scene": "2.9.8",
"@antv/l7-source": "2.9.8",
"@antv/l7-utils": "2.9.8",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

2
packages/l7/src/version.ts
View File

@ -1,2 +1,2 @@
const version = '2.8.47';
const version = '2.9.8';
export { version };

10
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.8.47",
"version": "2.9.8",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,12 +25,14 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "2.8.47",
"@antv/l7-source": "2.8.47",
"@antv/l7-utils": "2.8.47",
"@antv/l7-core": "2.9.8",
"@antv/l7-source": "2.9.8",
"@antv/l7-utils": "2.9.8",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/helpers": "^6.1.4",
"@turf/meta": "^6.0.2",
"@turf/union": "^6.5.0",
"d3-array": "1",
"d3-color": "^1.4.0",
"d3-interpolate": "1.4.0",

22
packages/layers/src/core/BaseLayer.ts
View File

@ -85,7 +85,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
public rendering: boolean;
public clusterZoom: number = 0; // 聚合等级标记
public layerType?: string | undefined;
public isLayerGroup: boolean = false;
public triangulation?: Triangulation | undefined;
public dataState: IDataState = {
@ -135,9 +134,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
// TODO: 记录 sceneContainer 供创建子图层的时候使用 如 imageTileLayer
public sceneContainer: Container | undefined;
public tileLayer: any | undefined;
// TODO: 用于保存子图层对象
public layerChildren: ILayer[] = [];
public masks: ILayer[] = [];
// Tip: 用于标识矢量图层
public isVector: boolean = false;
@lazyInject(TYPES.IGlobalConfigService)
protected readonly configService: IGlobalConfigService;
@ -233,6 +235,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
maskLayer.destroy();
}
public getAttribute(name: string) {
return this.styleAttributeService.getLayerStyleAttribute(name);
}
public getLayerConfig() {
return this.configService.getLayerConfig<ChildLayerStyleOptions>(this.id);
}
@ -395,7 +401,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
// this.pickingPassRender = this.normalPassFactory('pixelPicking');
// this.pickingPassRender.init(this);
this.hooks.afterInit.call();
// 触发初始化完成事件;
this.emit('inited', {
target: this,
@ -541,7 +546,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
};
this.updateStyleAttribute('shape', field, values, updateOptions);
// TODO: 根据 shape 判断是否需要更新 model
updateShape(this, lastShape, currentShape);
if (!this.tileLayer) {
updateShape(this, lastShape, currentShape);
}
return this;
}
public label(
@ -668,6 +675,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
}
public render(): ILayer {
if (this.tileLayer !== undefined) {
// 瓦片图层执行单独的 render 渲染队列
this.tileLayer.render();
return this;
}
// TODO: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
if (this.getEncodedData().length !== 0) {
this.renderModels();
@ -949,7 +961,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
return this;
}
public destroy() {
public destroy(refresh = true) {
if (this.isDestroied) {
return;
}
@ -980,7 +992,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.models = [];
this.layerService.cleanRemove(this);
this.layerService.cleanRemove(this, refresh);
this.emit('remove', {
target: this,

6
packages/layers/src/core/BaseModel.ts
View File

@ -17,6 +17,7 @@ import {
IMapService,
IModel,
IModelUniform,
IPickingService,
IRendererService,
IShaderModuleService,
IStyleAttributeService,
@ -110,6 +111,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
protected mapService: IMapService;
protected cameraService: ICameraService;
protected layerService: ILayerService;
protected pickingService: IPickingService;
// style texture data mapping
@ -118,6 +120,10 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
this.rendererService = layer
.getContainer()
.get<IRendererService>(TYPES.IRendererService);
this.pickingService = layer
.getContainer()
.get<IPickingService>(TYPES.IPickingService);
this.shaderModuleService = layer
.getContainer()
.get<IShaderModuleService>(TYPES.IShaderModuleService);

Some files were not shown because too many files have changed in this diff Show More