mirror of https://gitee.com/antv-l7/antv-l7
feat: merge workspace (tile) (#1204)
Co-authored-by: lvisei <yunji.me@outlook.com>
This commit is contained in:
YiQianYao
GitHub
parent
bb71fe2421
commit
bf4d22513d
|
|
@ -22,6 +22,7 @@ addParameters({
|
||||||
|
|
||||||
// automatically import all files ending in *.stories.tsx
|
// automatically import all files ending in *.stories.tsx
|
||||||
const req = require.context('../stories', true, /\.stories\.tsx$/);
|
const req = require.context('../stories', true, /\.stories\.tsx$/);
|
||||||
|
// const req = require.context('../stories/tile', true, /\.stories\.tsx$/);
|
||||||
|
|
||||||
function loadStories() {
|
function loadStories() {
|
||||||
req.keys().forEach(req);
|
req.keys().forEach(req);
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ order: 2
|
||||||
|
|
||||||
`markdown:docs/common/style.md`
|
`markdown:docs/common/style.md`
|
||||||
|
|
||||||
## 简介
|
# 简介
|
||||||
|
|
||||||
L7 Layer 接口设计遵循图形语法，所有图层都继承于基类（baseLayer）。
|
L7 Layer 接口设计遵循图形语法，所有图层都继承于基类（baseLayer）。
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ const layer = new CanvasLayer({}).style({
|
||||||
|
|
||||||
🌟 CanvasLayer 不需要设置 source。
|
🌟 CanvasLayer 不需要设置 source。
|
||||||
|
|
||||||
### Event
|
### event
|
||||||
|
|
||||||
🌟 CanvasLayer 暂不支持交互动作。
|
🌟 CanvasLayer 暂不支持交互动作。
|
||||||
|
|
||||||
|
|
@ -83,5 +83,3 @@ var centerXY = mapService.lngLatToContainer(center); // {x: 100, y: 100}
|
||||||
// centerXY 表示距离视图左上角 x 轴方向 100px，y 轴方向 100px
|
// centerXY 表示距离视图左上角 x 轴方向 100px，y 轴方向 100px
|
||||||
// canvas 绘图坐标系
|
// canvas 绘图坐标系
|
||||||
```
|
```
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -88,7 +88,7 @@ scene.on('loaded', () => {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 完整代码
|
#### demo
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { Scene, CityBuildingLayer } from '@antv/l7';
|
import { Scene, CityBuildingLayer } from '@antv/l7';
|
||||||
|
|
@ -120,5 +120,3 @@ scene.on('loaded', () => {
|
||||||
```
|
```
|
||||||
|
|
||||||
[在线案例](../../../examples/gallery/animate#build_sweep)
|
[在线案例](../../../examples/gallery/animate#build_sweep)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ order: 0
|
||||||
|
|
||||||
PlaneGeometry 是 L7 提供的通用的平面几何体图形，表现为可以自定义为位置，大小和分段数的贴地矩形。
|
PlaneGeometry 是 L7 提供的通用的平面几何体图形，表现为可以自定义为位置，大小和分段数的贴地矩形。
|
||||||
|
|
||||||
### 基本用法
|
### demo
|
||||||
|
|
||||||
设置普通矩形
|
设置普通矩形
|
||||||
|
|
||||||
|
|
@ -112,5 +112,3 @@ PlaneGeometry 高度贴图 URL，当存在该参数的时候 L7 会自动解析
|
||||||
这是一个回调函数，参数是 L7 解析出的地形贴图的 rgb 信息，用户可以使用该函数定义高度值的计算逻辑（不同的地形贴图计算逻辑不同）。
|
这是一个回调函数，参数是 L7 解析出的地形贴图的 rgb 信息，用户可以使用该函数定义高度值的计算逻辑（不同的地形贴图计算逻辑不同）。
|
||||||
|
|
||||||
🌟 widthSegments/heightSegments 指定 planeGeometry 的分段数，分段越多，地形越平滑，同时性能消耗越大。
|
🌟 widthSegments/heightSegments 指定 planeGeometry 的分段数，分段越多，地形越平滑，同时性能消耗越大。
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ order: 1
|
||||||
|
|
||||||
SpriteGeometry 是 L7 提供的通用的粒子图层，可以用来绘制各种粒子效果。
|
SpriteGeometry 是 L7 提供的通用的粒子图层，可以用来绘制各种粒子效果。
|
||||||
|
|
||||||
### 基本用法
|
### demo
|
||||||
|
|
||||||
设置普通的粒子图层。
|
设置普通的粒子图层。
|
||||||
|
|
||||||
|
|
@ -76,5 +76,3 @@ SpriteGeometry 主要通过 style 方法设置位置、大小以及其他属性
|
||||||
#### spriteScale: number
|
#### spriteScale: number
|
||||||
|
|
||||||
粒子大小缩放、默认为 1。
|
粒子大小缩放、默认为 1。
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -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'>
|
<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.
|
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
|
||||||
|
|
||||||
|
|
@ -46,11 +46,11 @@ layer.source(data, {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
## shape
|
### shape
|
||||||
|
|
||||||
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||||
|
|
||||||
### 2d
|
#### 2d
|
||||||
|
|
||||||
- circle,
|
- circle,
|
||||||
- triangle
|
- triangle
|
||||||
|
|
@ -61,7 +61,7 @@ layer.source(data, {
|
||||||
layer.shape('circle');
|
layer.shape('circle');
|
||||||
```
|
```
|
||||||
|
|
||||||
### 3d
|
#### 3d
|
||||||
|
|
||||||
- cylinder
|
- cylinder
|
||||||
- triangleColumn
|
- triangleColumn
|
||||||
|
|
@ -72,7 +72,7 @@ layer.shape('circle');
|
||||||
layer.shape('cylinder');
|
layer.shape('cylinder');
|
||||||
```
|
```
|
||||||
|
|
||||||
## size
|
### size
|
||||||
|
|
||||||
### 2D shape
|
### 2D shape
|
||||||
|
|
||||||
|
|
@ -88,11 +88,11 @@ layer.size('value', [10, 50]); // 根据value 字段映射大小
|
||||||
layer.size('value', (value) => {}); // 回调函数设置高度
|
layer.size('value', (value) => {}); // 回调函数设置高度
|
||||||
```
|
```
|
||||||
|
|
||||||
## color
|
### color
|
||||||
|
|
||||||
同 layer color 方法
|
同 layer color 方法
|
||||||
|
|
||||||
## style
|
### style
|
||||||
|
|
||||||
- coverage 网格覆盖度 0 - 1
|
- coverage 网格覆盖度 0 - 1
|
||||||
- angle 网格旋转角度 0 - 360
|
- angle 网格旋转角度 0 - 360
|
||||||
|
|
@ -106,7 +106,7 @@ layer.style({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
## 完整实例代码
|
### demo
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const layer = new HeatmapLayer({})
|
const layer = new HeatmapLayer({})
|
||||||
|
|
@ -139,5 +139,3 @@ scene.addLayer(layer);
|
||||||
```
|
```
|
||||||
|
|
||||||
[在线案例](../../../examples/heatmap/grid#china)
|
[在线案例](../../../examples/heatmap/grid#china)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ order: 0
|
||||||
|
|
||||||
通过切换 shape 参数，用户可以得到不同的热力图
|
通过切换 shape 参数，用户可以得到不同的热力图
|
||||||
|
|
||||||
### 基本用法
|
### demo
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { HeatmapLayer } from '@antv/l7';
|
import { HeatmapLayer } from '@antv/l7';
|
||||||
|
|
@ -48,5 +48,3 @@ const layer = new HeatmapLayer({})
|
||||||
[在线案例 经典热力 classical](../../../examples/heatmap/heatmap#heatmap)
|
[在线案例 经典热力 classical](../../../examples/heatmap/heatmap#heatmap)
|
||||||
[在线案例 蜂窝热力 hexagon](../../../examples/heatmap/hexagon#light)
|
[在线案例 蜂窝热力 hexagon](../../../examples/heatmap/hexagon#light)
|
||||||
[在线案例 网格热力 grid](/zh/examples/heatmap/grid#china)
|
[在线案例 网格热力 grid](/zh/examples/heatmap/grid#china)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -135,5 +135,3 @@ const layer = new HeatmapLayer({
|
||||||
```
|
```
|
||||||
|
|
||||||
[在线案例](../../../examples/heatmap/hexagon#light)
|
[在线案例](../../../examples/heatmap/hexagon#light)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ heatmap 需要设置 color 方法，样式通过 style 设置
|
||||||
|
|
||||||
⚠️ color, position 的长度要相同
|
⚠️ color, position 的长度要相同
|
||||||
|
|
||||||
## 完整代码
|
### demo
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
heatmapLayer()
|
heatmapLayer()
|
||||||
|
|
@ -65,5 +65,3 @@ heatmapLayer()
|
||||||
```
|
```
|
||||||
|
|
||||||
[在线案例](../../../examples/heatmap/heatmap#heatmap)
|
[在线案例](../../../examples/heatmap/heatmap#heatmap)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||||
</video>
|
</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)
|
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
|
@ -63,17 +63,22 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
- 填充图
|
- 填充图
|
||||||
- 3D 填充图
|
- 3D 填充图
|
||||||
|
|
||||||
### 热力图
|
### 热力图层
|
||||||
|
|
||||||
- 经典热力图
|
- 经典热力图
|
||||||
- 蜂窝热力图
|
- 蜂窝热力图
|
||||||
- 网格热力图
|
- 网格热力图
|
||||||
|
|
||||||
### 栅格地图
|
### 栅格图层
|
||||||
|
|
||||||
- 图片
|
- 图片
|
||||||
- Raster
|
- Raster
|
||||||
|
|
||||||
|
### 瓦片地图
|
||||||
|
|
||||||
|
- 栅格瓦片
|
||||||
|
- 矢量瓦片
|
||||||
|
|
||||||
## L7 2.0 Roadmap
|
## L7 2.0 Roadmap
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ redirect_from:
|
||||||
|
|
||||||
# L7 地理空间数据可视分析引擎
|
# 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)
|
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
|
@ -63,22 +63,27 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
- 填充图
|
- 填充图
|
||||||
- 3D 填充图
|
- 3D 填充图
|
||||||
|
|
||||||
### 热力图
|
### 热力图层
|
||||||
|
|
||||||
- 经典热力图
|
- 经典热力图
|
||||||
- 蜂窝热力图
|
- 蜂窝热力图
|
||||||
- 网格热力图
|
- 网格热力图
|
||||||
|
|
||||||
### 栅格地图
|
### 栅格图层
|
||||||
|
|
||||||
- 图片
|
- 图片
|
||||||
- Raster
|
- Raster
|
||||||
|
|
||||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
### 瓦片地图
|
||||||
|
|
||||||
|
- 栅格瓦片
|
||||||
|
- 矢量瓦片
|
||||||
|
|
||||||
### 技术支持服务群
|
### 技术支持服务群
|
||||||
|
|
||||||
L7 相关技术问题，需求反馈，我们会及时响应
|
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||||
|
|
||||||
|
L7 相关技术问题，需求反馈，我们会及时响应。
|
||||||
|
|
||||||
群号：32292906
|
群号：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'>
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ import { LineLayer } from '@antv/l7';
|
||||||
|
|
||||||
shape 设置成 arc 即可
|
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/segmentNumber.zh.md`
|
||||||
|
|
||||||
`markdown:docs/api/line_layer/features/thetaOffset.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/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/texture.zh.md`
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@ const layer = new LineLayer({})
|
||||||
|
|
||||||
shape 设置成 arc3d 即可
|
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/linear.zh.md`
|
||||||
|
|
||||||
`markdown:docs/api/line_layer/features/dash.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/texture.zh.md`
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### 边框
|
#### border
|
||||||
|
|
||||||
线图层支持在 style 中设置边框的宽度和颜色
|
线图层支持在 style 中设置边框的宽度和颜色
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### 设置虚线
|
#### dash
|
||||||
|
|
||||||
线图层通过在 style 中设置线的类型，同时指定虚线部分和实线部分
|
线图层通过在 style 中设置线的类型，同时指定虚线部分和实线部分
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### 渐变色
|
#### linearColor
|
||||||
|
|
||||||
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
|
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### segmentNumber 弧线分段数
|
#### segmentNumber
|
||||||
|
|
||||||
arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需要这么多的分段数，适当降低分段数量可以在保证效果的情况下提高性能。
|
arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需要这么多的分段数，适当降低分段数量可以在保证效果的情况下提高性能。
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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)
|
[在线案例](../../../examples/gallery/animate#animate_path_texture)
|
||||||
|
|
||||||
#### 高级用法
|
#### texture advance
|
||||||
|
|
||||||
✨ animate
|
✨ animate
|
||||||
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关
|
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### thetaOffset 弧度参数
|
#### thetaOffset
|
||||||
|
|
||||||
thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314
|
thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
### 设置顶点高度
|
#### vertex height
|
||||||
|
|
||||||
线图层支持给每个顶点赋予高度值，同时允许用户在 style 方法中通过 vertexHeightScale 属性设置高度比例。
|
线图层支持给每个顶点赋予高度值，同时允许用户在 style 方法中通过 vertexHeightScale 属性设置高度比例。
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ import { LineLayer } from '@antv/l7';
|
||||||
|
|
||||||
shape 设置成 greatcircle 即可
|
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/linear.zh.md`
|
||||||
|
|
||||||
`markdown:docs/api/line_layer/features/dash.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/texture.zh.md`
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -81,14 +81,14 @@ lineLayer.size([1, 2]); // 宽度为1，高度2
|
||||||
|
|
||||||
线图层支持了纹理贴图的能力，不同 shape 的图层对 texturte 的支持情况会存在细微的差别，详细使用请查看相关图层的文档
|
线图层支持了纹理贴图的能力，不同 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/linear.zh.md`
|
||||||
|
|
||||||
`markdown:docs/api/line_layer/features/dash.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/texture.zh.md`
|
||||||
|
|
||||||
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
|
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -93,8 +93,6 @@ layer.style({
|
||||||
|
|
||||||
`markdown:docs/api/line_layer/features/border.zh.md`
|
`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/api/line_layer/features/texture.zh.md`
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||||
|
|
|
||||||
|
|
@ -31,5 +31,3 @@ shape 设置成 simple 即可
|
||||||
`markdown:docs/api/line_layer/features/linear.zh.md`
|
`markdown:docs/api/line_layer/features/linear.zh.md`
|
||||||
|
|
||||||
🌟 简单线图层不支持动画和纹理
|
🌟 简单线图层不支持动画和纹理
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -21,12 +21,14 @@ import { LineLayer } from '@antv/l7';
|
||||||
|
|
||||||
shape 设置成 wall 即可
|
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/linear.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/texture.zh.md`
|
||||||
|
|
||||||
🌟 地理围栏支持了新的样式参数 iconStepCount
|
🌟 地理围栏支持了新的样式参数 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'>
|
<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
|
wall 支持了固定高度配置 heightfixed
|
||||||
|
|
||||||
|
|
@ -54,5 +56,3 @@ wall 支持了固定高度配置 heightfixed
|
||||||
heightfixed: true // 默认为 false，开启后实际世界高度不变（注意调整尺寸）
|
heightfixed: true // 默认为 false，开启后实际世界高度不变（注意调整尺寸）
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -53,14 +53,4 @@ layer.animate(false);
|
||||||
- speed 水波速度
|
- speed 水波速度
|
||||||
- rings 水波环数
|
- rings 水波环数
|
||||||
|
|
||||||
## tips
|
|
||||||
|
|
||||||
目前 style 的配置项只支持全局设置，不支持数据映射。
|
|
||||||
|
|
||||||
如果 opacity 设置为 0.3 则所有的气泡都是 0.3
|
|
||||||
|
|
||||||
style 方法如果没有设置 stroke, 默认于气泡的填充色相同
|
|
||||||
|
|
||||||
[在线案例](../../../examples/point/bubble#point)
|
[在线案例](../../../examples/point/bubble#point)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -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'>
|
<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)
|
[在线案例](../../../examples/point/chart#bar)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -4,72 +4,3 @@ order: 5
|
||||||
---
|
---
|
||||||
|
|
||||||
`markdown:docs/api/point_layer/cluster.zh.md`
|
`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`
|
|
||||||
|
|
|
||||||
|
|
@ -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'>
|
<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)
|
[source 文档](../source/source)
|
||||||
|
|
||||||
### 配置项
|
### option
|
||||||
|
|
||||||
- cluster **boolean** 是否聚合
|
- cluster **boolean** 是否聚合
|
||||||
- clusterOption 聚合配置项
|
- clusterOption 聚合配置项
|
||||||
|
|
@ -31,7 +31,7 @@ import { PointLayer } from '@antv/l7';
|
||||||
|
|
||||||
数据聚合之后，数据会增加 point_count 属性，在可视化渲染时可以根据 point_count 进行数据映射。
|
数据聚合之后，数据会增加 point_count 属性，在可视化渲染时可以根据 point_count 进行数据映射。
|
||||||
|
|
||||||
#### 方法
|
### layer functions
|
||||||
|
|
||||||
**getClusters(zoom: number)**
|
**getClusters(zoom: number)**
|
||||||
|
|
||||||
|
|
@ -59,7 +59,7 @@ layer.source(pointsData, {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### 方法
|
### origin data
|
||||||
|
|
||||||
获取聚合节点的原始数据,通过 Source 的 getClustersLeaves 方法
|
获取聚合节点的原始数据,通过 Source 的 getClustersLeaves 方法
|
||||||
|
|
||||||
|
|
@ -71,7 +71,7 @@ layer.on('click', (e) => {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### 完整示例
|
### demo
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const pointLayer = new PointLayer({})
|
const pointLayer = new PointLayer({})
|
||||||
|
|
@ -98,5 +98,3 @@ const pointLayer = new PointLayer({})
|
||||||
PointLayer 的聚合图采用 WebGL 绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用 MarkerLayer 的聚合功能，你可以通过 Dom 完全自定义样式。
|
PointLayer 的聚合图采用 WebGL 绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用 MarkerLayer 的聚合功能，你可以通过 Dom 完全自定义样式。
|
||||||
|
|
||||||
[MarkerLayer 聚合](../component/markerLayer)
|
[MarkerLayer 聚合](../component/markerLayer)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -86,7 +86,7 @@ animateOptions: {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## 额外的 style 配置
|
## style
|
||||||
|
|
||||||
- sourceColor 设置 3D 柱图起始颜色（3D 柱图设置颜色渐变时会覆盖 color 设置的颜色）
|
- sourceColor 设置 3D 柱图起始颜色（3D 柱图设置颜色渐变时会覆盖 color 设置的颜色）
|
||||||
|
|
||||||
|
|
@ -137,5 +137,3 @@ style({
|
||||||
pickLight: true, // 默认为 false
|
pickLight: true, // 默认为 false
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -51,5 +51,3 @@ scene.addLayer(pointLayer);
|
||||||
```
|
```
|
||||||
|
|
||||||
[在线案例](../../../examples/point/dot#normal2)
|
[在线案例](../../../examples/point/dot#normal2)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -84,5 +84,3 @@ layer.shape('iconfontField', 'text');
|
||||||
✨ iconfont 其他 style 参数的使用和普通的文本标注的参数保持一致
|
✨ iconfont 其他 style 参数的使用和普通的文本标注的参数保持一致
|
||||||
|
|
||||||
[在线案例](../../../examples/point/text#iconfont)
|
[在线案例](../../../examples/point/text#iconfont)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -18,5 +18,3 @@ import { MarkerLayer, Marker } from '@antv/l7';
|
||||||
[Marker 文档](../component/marker)
|
[Marker 文档](../component/marker)
|
||||||
|
|
||||||
[MarkerLayer 文档](../component/markerLayer)
|
[MarkerLayer 文档](../component/markerLayer)
|
||||||
|
|
||||||
<!-- `markdown:docs/common/layer/base.md` -->
|
|
||||||
|
|
|
||||||
|
|
@ -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 三种数据格式。
|
点数据的展示，根据经纬点绘制图形，数据源支持 JSON、GeoJSON、CSV 三种数据格式。
|
||||||
|
|
||||||
- [GeoJSON](../source/geojson/#point)
|
- [GeoJSON](../source/geojson/#point)
|
||||||
|
|
@ -73,7 +102,7 @@ var layer = new PointLayer()
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
## shape 类型
|
### shape
|
||||||
|
|
||||||
PointLayer 图层支持多种 shape 类型，通过改变 shape 我们可以显示不同的点
|
PointLayer 图层支持多种 shape 类型，通过改变 shape 我们可以显示不同的点
|
||||||
|
|
||||||
|
|
@ -97,36 +126,7 @@ PointLayer 图层支持多种 shape 类型，通过改变 shape 我们可以显
|
||||||
|
|
||||||
🌟 若是使用简单的圆点图层，建议使用 simple 代替 circle 以获得更好的性能
|
🌟 若是使用简单的圆点图层，建议使用 simple 代替 circle 以获得更好的性能
|
||||||
|
|
||||||
### 基本用法
|
### style
|
||||||
|
|
||||||
```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',
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
|
|
||||||
### 等面积点
|
|
||||||
|
|
||||||
点图层支持等面积点，点大小的单位是米，同样通过 size 方法设置大小
|
点图层支持等面积点，点大小的单位是米，同样通过 size 方法设置大小
|
||||||
|
|
||||||
|
|
@ -144,5 +144,3 @@ const layer = PointLayer()
|
||||||
```
|
```
|
||||||
|
|
||||||
🌟 从 v2.7.9 版本开始支持高德地图、高德地图 2.0、Mapbox 地图
|
🌟 从 v2.7.9 版本开始支持高德地图、高德地图 2.0、Mapbox 地图
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -29,10 +29,8 @@ order: 3
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
#### style 配置项
|
### style
|
||||||
|
|
||||||
- speed 旋转速度，默认为 1，值越大转速越快
|
- speed 旋转速度，默认为 1，值越大转速越快
|
||||||
|
|
||||||
[在线案例](../../../examples/point/scatter#radarPoint)
|
[在线案例](../../../examples/point/scatter#radarPoint)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -53,10 +53,14 @@ const scatter = new PointLayer()
|
||||||
|
|
||||||
[在线案例](/zh/examples/point/scatter#scatter)
|
[在线案例](/zh/examples/point/scatter#scatter)
|
||||||
|
|
||||||
### blur
|
### style
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.style({
|
||||||
|
blur: 0.3,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
散点图的 style 样式支持配置 blur，调整模糊。
|
散点图的 style 样式支持配置 blur，调整模糊。
|
||||||
|
|
||||||
[在线案例](/zh/examples/point/scatter#blur)
|
[在线案例](/zh/examples/point/scatter#blur)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -38,5 +38,3 @@ scene.getPointSizeRange(); // Float32Array - [min, max]
|
||||||
```
|
```
|
||||||
|
|
||||||
[在线案例](../../../examples/point/dot#normal2)
|
[在线案例](../../../examples/point/dot#normal2)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -125,5 +125,3 @@ scene.addLayer(imageLayer);
|
||||||
```
|
```
|
||||||
|
|
||||||
[在线案例](/zh/examples/point/image#monsoon)
|
[在线案例](/zh/examples/point/image#monsoon)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,6 @@ layer.shape('name', 'text');
|
||||||
|
|
||||||
### style
|
### style
|
||||||
|
|
||||||
- opacity `number`
|
|
||||||
- textAnchor `string` 文本相对锚点的位置
|
- textAnchor `string` 文本相对锚点的位置
|
||||||
`'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';`
|
`'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 [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
- padding: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||||
|
|
@ -40,11 +39,6 @@ layer.shape('name', 'text');
|
||||||
- fontFamily `string` 字号
|
- fontFamily `string` 字号
|
||||||
- textOffset `[number, number]` 文本偏移量
|
- textOffset `[number, number]` 文本偏移量
|
||||||
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
||||||
|
|
||||||
[在线案例](../../../examples/point/text#point_text)
|
|
||||||
|
|
||||||
## 额外的 style 配置
|
|
||||||
|
|
||||||
- raisingHeight 设置 3D 填充图的抬升高度
|
- raisingHeight 设置 3D 填充图的抬升高度
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
[在线案例](../../../examples/point/text#point_text)
|
||||||
|
|
|
||||||
|
|
@ -38,8 +38,6 @@ order: 3
|
||||||
|
|
||||||
[在线案例](../../../examples/point/scatter#animatePoint)
|
[在线案例](../../../examples/point/scatter#animatePoint)
|
||||||
|
|
||||||
## 额外的 style 配置
|
### style
|
||||||
|
|
||||||
- raisingHeight 设置 3D 填充图的抬升高度
|
- raisingHeight 设置 3D 填充图的抬升高度
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@ layer.size('floor', (floor) => {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### 额外的 style 配置
|
### style
|
||||||
|
|
||||||
- pickLight 设置 3D 填充图的高亮色是否计算光照
|
- pickLight 设置 3D 填充图的高亮色是否计算光照
|
||||||
|
|
||||||
|
|
@ -100,5 +100,3 @@ const provincelayer = new PolygonLayer({})
|
||||||
控制侧面的显隐，默认为 true
|
控制侧面的显隐，默认为 true
|
||||||
|
|
||||||
[在线案例](/zh/examples/polygon/3d#texture3D)
|
[在线案例](/zh/examples/polygon/3d#texture3D)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ layer.shape('fill');
|
||||||
|
|
||||||
填充图无 size 不需要设置 size
|
填充图无 size 不需要设置 size
|
||||||
|
|
||||||
## 额外的 style 配置
|
### style
|
||||||
|
|
||||||
- opacityLinear 设置几何填充图的径向渐变
|
- 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">
|
<img width="60%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Ob62Q7JDpZ4AAAAAAAAAAAAAARQnAQ">
|
||||||
|
|
||||||
- raisingHeight 设置 3D 填充图的抬升高度
|
- raisingHeight 设置 3D 填充图的抬升高度
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -73,5 +73,3 @@ const layer = new RasterLayer({ mask: true });
|
||||||
[在线案例](../../../examples/raster/basic#dem)
|
[在线案例](../../../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">
|
<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`
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ order: 0
|
||||||
import { PolygonLayer } from '@antv/l7';
|
import { PolygonLayer } from '@antv/l7';
|
||||||
```
|
```
|
||||||
|
|
||||||
## shape 类型
|
### shape
|
||||||
|
|
||||||
`PolygonLayer` 填充图支持 3 种 shape
|
`PolygonLayer` 填充图支持 3 种 shape
|
||||||
|
|
||||||
|
|
@ -145,5 +145,3 @@ scene.on('loaded', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -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">
|
<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
|
我们需要设置 shape 为 water
|
||||||
|
|
||||||
|
|
@ -66,5 +66,3 @@ style({
|
||||||
默认值是 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
|
默认值是 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
|
||||||
|
|
||||||
[在线案例](../../../examples/polygon/fill#water)
|
[在线案例](../../../examples/polygon/fill#water)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -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'>
|
<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)
|
见 [raster source](../source/raster)
|
||||||
|
|
||||||
## shape
|
### shape
|
||||||
|
|
||||||
仅支持 `raster`
|
仅支持 `raster`
|
||||||
|
|
||||||
## style
|
### style
|
||||||
|
|
||||||
- `clampLow`: `Boolean` 默认 false, 设置为 true，低于 domain 的数据将不显示
|
- `clampLow`: `Boolean` 默认 false, 设置为 true，低于 domain 的数据将不显示
|
||||||
- `clampHigh`: `Boolean` 默认 false, 设置为 true，高于 domain 的数据将不显示
|
- `clampHigh`: `Boolean` 默认 false, 设置为 true，高于 domain 的数据将不显示
|
||||||
|
|
@ -43,5 +43,3 @@ import { RasterLayer } from '@antv/l7';
|
||||||
⚠️ `color`, `position` 的长度要相同
|
⚠️ `color`, `position` 的长度要相同
|
||||||
|
|
||||||
[在线案例](../../../examples/raster/basic#light)
|
[在线案例](../../../examples/raster/basic#light)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: MVT
|
||||||
|
order: 6
|
||||||
|
---
|
||||||
|
|
||||||
|
`markdown: docs/api/source/mvt.zh.md`
|
||||||
|
|
@ -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],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: 栅格
|
title: Raster
|
||||||
order: 5
|
order: 5
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: RasterTile
|
||||||
|
order: 7
|
||||||
|
---
|
||||||
|
|
||||||
|
`markdown: docs/api/source/rasterTile.zh.md`
|
||||||
|
|
@ -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,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Raster Tile
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
`markdown:docs/api/rasterTile_layer.zh.md`
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
🌟 数据栅格瓦片
|
||||||
|
鼠标事件位置的瓦片的实际数值。
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Tile
|
||||||
|
order: 0
|
||||||
|
---
|
||||||
|
|
||||||
|
`markdown:docs/api/tile_layer.zh.md`
|
||||||
|
|
@ -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)
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Vector Tile
|
||||||
|
order: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
`markdown:docs/api/vectorTile_layer.zh.md`
|
||||||
|
|
@ -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
|
||||||
|
|
@ -60,5 +60,3 @@ layer.animate(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
[在线案例](../../examples/wind/basic#wind)
|
[在线案例](../../examples/wind/basic#wind)
|
||||||
|
|
||||||
`markdown:docs/common/layer/base.md`
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Tile
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
|
||||||
|
`markdown:docs/tutorial/tile.zh.md`
|
||||||
|
|
@ -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) => {});
|
||||||
|
```
|
||||||
|
|
@ -6,22 +6,22 @@ order: 1
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
## shape
|
### shape
|
||||||
- text
|
- text
|
||||||
文本渲染需要将指定字段的shape设置成 text
|
文本渲染需要将指定字段的shape设置成 text
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
layer.shape('name','text')
|
layer.shape('name','text')
|
||||||
```
|
```
|
||||||
## color
|
### color
|
||||||
|
|
||||||
同layer color
|
同layer color
|
||||||
|
|
||||||
## size
|
### size
|
||||||
|
|
||||||
同layer size
|
同layer size
|
||||||
|
|
||||||
## style
|
### style
|
||||||
|
|
||||||
- textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
- textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||||
- textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
- textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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);
|
|
||||||
});
|
|
||||||
|
|
@ -15,9 +15,9 @@
|
||||||
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oRfnb3AR05/7866c85b-2d33-4ad2-a276-c52cbde041b0.png"
|
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oRfnb3AR05/7866c85b-2d33-4ad2-a276-c52cbde041b0.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename": "mapbox-streets.js",
|
"filename": "amap-satelliteMask.js",
|
||||||
"title": "mapbox 街道瓦片",
|
"title": "高德卫星影像瓦片 + Mask",
|
||||||
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/oic8gzwY8Z/d047a27f-3d11-41dd-ab9e-22bcafcc3daf.png"
|
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0zAwTZ4WfNYAAAAAAAAAAAAAARQnAQ"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename": "tianditu-normal.js",
|
"filename": "tianditu-normal.js",
|
||||||
|
|
@ -25,14 +25,24 @@
|
||||||
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/PbsT2bl0KL/386a8233-322a-4c53-93fc-1eec39aa21f4.png"
|
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/PbsT2bl0KL/386a8233-322a-4c53-93fc-1eec39aa21f4.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename": "open-street-map.js",
|
"filename": "tianditu-satellite.js",
|
||||||
"title": "OSM 瓦片",
|
"title": "天地图卫星影像瓦片",
|
||||||
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/DacxQD9rO5/6da6d0f7-0a90-41f7-963c-48be8fb9050c.png"
|
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*sV6gSYSdpl4AAAAAAAAAAAAAARQnAQ"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename": "watercolor.js",
|
"filename": "dem.js",
|
||||||
"title": "三方水彩瓦片",
|
"title": "png 高程栅格",
|
||||||
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/v%24zEKgSWSc/aced2778-0687-4b03-9573-1e2f6d9a1d07.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"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
});
|
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
@ -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,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);
|
||||||
|
});
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Vector Tile
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: 矢量瓦片图层
|
||||||
|
order: 1
|
||||||
|
---
|
||||||
|
|
@ -2,6 +2,7 @@ require('./site/css/demo.css');
|
||||||
require('./packages/component/src/css/l7.css');
|
require('./packages/component/src/css/l7.css');
|
||||||
require('antd/dist/antd.less');
|
require('antd/dist/antd.less');
|
||||||
window.geotiff = require('geotiff');
|
window.geotiff = require('geotiff');
|
||||||
|
window.lerc = require('lerc');
|
||||||
window.g2 = require('@antv/g2');
|
window.g2 = require('@antv/g2');
|
||||||
window.l7 = require('@antv/l7');
|
window.l7 = require('@antv/l7');
|
||||||
window.l7Mini = require('@antv/l7-mini');
|
window.l7Mini = require('@antv/l7-mini');
|
||||||
|
|
|
||||||
|
|
@ -215,6 +215,14 @@ module.exports = {
|
||||||
},
|
},
|
||||||
order: 8,
|
order: 8,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
slug: 'api/tile',
|
||||||
|
title: {
|
||||||
|
zh: '瓦片',
|
||||||
|
en: 'tile',
|
||||||
|
},
|
||||||
|
order: 8,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
slug: 'api/cityBuilding',
|
slug: 'api/cityBuilding',
|
||||||
title: {
|
title: {
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
"registry": "https://registry.npmjs.org"
|
"registry": "https://registry.npmjs.org"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"version": "2.8.47",
|
"version": "2.9.8",
|
||||||
"npmClient": "yarn",
|
"npmClient": "yarn",
|
||||||
"useWorkspaces": true,
|
"useWorkspaces": true,
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
|
|
|
||||||
|
|
@ -86,6 +86,7 @@
|
||||||
"glsl-minifier": "^0.0.13",
|
"glsl-minifier": "^0.0.13",
|
||||||
"html-webpack-plugin": "^4.3.0",
|
"html-webpack-plugin": "^4.3.0",
|
||||||
"husky": "^3.0.9",
|
"husky": "^3.0.9",
|
||||||
|
"lerc": "^3.0.0",
|
||||||
"jest": "^24.9.0",
|
"jest": "^24.9.0",
|
||||||
"jest-electron": "^0.1.11",
|
"jest-electron": "^0.1.11",
|
||||||
"@material-ui/core": "^4.10.2",
|
"@material-ui/core": "^4.10.2",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@antv/l7-component",
|
"name": "@antv/l7-component",
|
||||||
"version": "2.8.47",
|
"version": "2.9.8",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "es/index.js",
|
"module": "es/index.js",
|
||||||
|
|
@ -25,8 +25,8 @@
|
||||||
"author": "lzxue",
|
"author": "lzxue",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-core": "2.8.47",
|
"@antv/l7-core": "2.9.8",
|
||||||
"@antv/l7-utils": "2.8.47",
|
"@antv/l7-utils": "2.9.8",
|
||||||
"@babel/runtime": "^7.7.7",
|
"@babel/runtime": "^7.7.7",
|
||||||
"eventemitter3": "^4.0.0",
|
"eventemitter3": "^4.0.0",
|
||||||
"inversify": "^5.0.1",
|
"inversify": "^5.0.1",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@antv/l7-core",
|
"name": "@antv/l7-core",
|
||||||
"version": "2.8.47",
|
"version": "2.9.8",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "es/index.js",
|
"module": "es/index.js",
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/async-hook": "^2.1.0",
|
"@antv/async-hook": "^2.1.0",
|
||||||
"@antv/l7-utils": "2.8.47",
|
"@antv/l7-utils": "2.9.8",
|
||||||
"@babel/runtime": "^7.7.7",
|
"@babel/runtime": "^7.7.7",
|
||||||
"ajv": "^6.10.2",
|
"ajv": "^6.10.2",
|
||||||
"element-resize-event": "^3.0.3",
|
"element-resize-event": "^3.0.3",
|
||||||
|
|
|
||||||
|
|
@ -65,13 +65,13 @@ export default class CoordinateSystemService
|
||||||
* 重新计算当前坐标系参数
|
* 重新计算当前坐标系参数
|
||||||
* TODO: 使用 memoize 缓存参数以及计算结果
|
* TODO: 使用 memoize 缓存参数以及计算结果
|
||||||
*/
|
*/
|
||||||
public refresh(): void {
|
public refresh(offsetCenter?: [number, number]): void {
|
||||||
// if (!this.needRefresh) {
|
// if (!this.needRefresh) {
|
||||||
// return;
|
// return;
|
||||||
// }
|
// }
|
||||||
const zoom = this.cameraService.getZoom();
|
const zoom = this.cameraService.getZoom();
|
||||||
const zoomScale = this.cameraService.getZoomScale();
|
const zoomScale = this.cameraService.getZoomScale();
|
||||||
const center = this.cameraService.getCenter();
|
const center = offsetCenter ? offsetCenter : this.cameraService.getCenter();
|
||||||
|
|
||||||
// 计算像素到米以及经纬度之间的转换
|
// 计算像素到米以及经纬度之间的转换
|
||||||
const { pixelsPerMeter, pixelsPerDegree } = getDistanceScales({
|
const { pixelsPerMeter, pixelsPerDegree } = getDistanceScales({
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ export const CoordinateUniform = {
|
||||||
|
|
||||||
export interface ICoordinateSystemService {
|
export interface ICoordinateSystemService {
|
||||||
needRefresh: boolean;
|
needRefresh: boolean;
|
||||||
refresh(): void;
|
refresh(offset?: [number, number]): void;
|
||||||
getCoordinateSystem(): CoordinateSystem;
|
getCoordinateSystem(): CoordinateSystem;
|
||||||
setCoordinateSystem(coordinateSystem: CoordinateSystem): void;
|
setCoordinateSystem(coordinateSystem: CoordinateSystem): void;
|
||||||
getViewportCenter(): [number, number];
|
getViewportCenter(): [number, number];
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,10 @@
|
||||||
|
import { IInteractionTarget } from '../interaction/IInteractionService';
|
||||||
import { ILayer } from '../layer/ILayerService';
|
import { ILayer } from '../layer/ILayerService';
|
||||||
export interface IPickingService {
|
export interface IPickingService {
|
||||||
|
pickedColors: Uint8Array | undefined;
|
||||||
|
pickedTileLayers: ILayer[];
|
||||||
init(id: string): void;
|
init(id: string): void;
|
||||||
|
pickFromPickingFBO(layer: ILayer, target: IInteractionTarget): boolean;
|
||||||
pickBox(layer: ILayer, box: [number, number, number, number]): any[];
|
pickBox(layer: ILayer, box: [number, number, number, number]): any[];
|
||||||
boxPickLayer(
|
boxPickLayer(
|
||||||
layer: ILayer,
|
layer: ILayer,
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,8 @@ import { IRendererService } from '../renderer/IRendererService';
|
||||||
import { IPickingService } from './IPickingService';
|
import { IPickingService } from './IPickingService';
|
||||||
@injectable()
|
@injectable()
|
||||||
export default class PickingService implements IPickingService {
|
export default class PickingService implements IPickingService {
|
||||||
|
public pickedColors: Uint8Array | undefined;
|
||||||
|
public pickedTileLayers: ILayer[] = [];
|
||||||
@inject(TYPES.IMapService)
|
@inject(TYPES.IMapService)
|
||||||
private readonly mapService: IMapService;
|
private readonly mapService: IMapService;
|
||||||
|
|
||||||
|
|
@ -182,103 +184,7 @@ export default class PickingService implements IPickingService {
|
||||||
this.pickingFBO = null;
|
this.pickingFBO = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取容器的大小 - 兼容小程序环境
|
public pickFromPickingFBO = (
|
||||||
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 = (
|
|
||||||
layer: ILayer,
|
layer: ILayer,
|
||||||
{ x, y, lngLat, type, target }: IInteractionTarget,
|
{ x, y, lngLat, type, target }: IInteractionTarget,
|
||||||
) => {
|
) => {
|
||||||
|
|
@ -312,6 +218,7 @@ export default class PickingService implements IPickingService {
|
||||||
data: new Uint8Array(1 * 1 * 4),
|
data: new Uint8Array(1 * 1 * 4),
|
||||||
framebuffer: this.pickingFBO,
|
framebuffer: this.pickingFBO,
|
||||||
});
|
});
|
||||||
|
this.pickedColors = pickedColors;
|
||||||
|
|
||||||
// let pickedColors = new Uint8Array(4)
|
// let pickedColors = new Uint8Array(4)
|
||||||
// this.rendererService.getGLContext().readPixels(
|
// 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
|
this.selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
|
||||||
layer.setCurrentSelectedId(null);
|
layer.setCurrentSelectedId(null);
|
||||||
}
|
}
|
||||||
|
if (!layer.isVector) {
|
||||||
|
// Tip: 选中普通 layer 的时候将 tileLayer 的选中状态清除
|
||||||
|
this.layerService
|
||||||
|
.getLayers()
|
||||||
|
.filter((l) => l.tileLayer)
|
||||||
|
.map((l) => {
|
||||||
|
l.tileLayer.clearPickState();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return isPicked;
|
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(
|
private triggerHoverOnLayer(
|
||||||
layer: ILayer,
|
layer: ILayer,
|
||||||
target: {
|
target: {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,11 @@
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { SyncBailHook, SyncHook, SyncWaterfallHook } from '@antv/async-hook';
|
import { SyncBailHook, SyncHook, SyncWaterfallHook } from '@antv/async-hook';
|
||||||
|
import { IColorRamp, IImagedata, Tile, TilesetManager } from '@antv/l7-utils';
|
||||||
import { Container } from 'inversify';
|
import { Container } from 'inversify';
|
||||||
import Clock from '../../utils/clock';
|
import Clock from '../../utils/clock';
|
||||||
import { ISceneConfig } from '../config/IConfigService';
|
import { ISceneConfig } from '../config/IConfigService';
|
||||||
|
import { IInteractionTarget } from '../interaction/IInteractionService';
|
||||||
|
import { IPickingService } from '../interaction/IPickingService';
|
||||||
import { IMapService } from '../map/IMapService';
|
import { IMapService } from '../map/IMapService';
|
||||||
import { IAttribute } from '../renderer/IAttribute';
|
import { IAttribute } from '../renderer/IAttribute';
|
||||||
import {
|
import {
|
||||||
|
|
@ -23,6 +26,8 @@ import {
|
||||||
IEncodeFeature,
|
IEncodeFeature,
|
||||||
IScale,
|
IScale,
|
||||||
IScaleOptions,
|
IScaleOptions,
|
||||||
|
IScaleValue,
|
||||||
|
IStyleAttribute,
|
||||||
IStyleAttributeService,
|
IStyleAttributeService,
|
||||||
IStyleAttributeUpdateOptions,
|
IStyleAttributeUpdateOptions,
|
||||||
ScaleAttributeType,
|
ScaleAttributeType,
|
||||||
|
|
@ -116,6 +121,96 @@ export interface IAttrubuteAndElements {
|
||||||
elements: any;
|
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 =
|
export type LayerEventType =
|
||||||
| 'inited'
|
| 'inited'
|
||||||
| 'add'
|
| 'add'
|
||||||
|
|
@ -149,6 +244,7 @@ export interface ILayer {
|
||||||
layerModelNeedUpdate: boolean;
|
layerModelNeedUpdate: boolean;
|
||||||
styleNeedUpdate: boolean;
|
styleNeedUpdate: boolean;
|
||||||
layerModel: ILayerModel;
|
layerModel: ILayerModel;
|
||||||
|
tileLayer: ITileLayer;
|
||||||
layerChildren: ILayer[]; // 在图层中添加子图层
|
layerChildren: ILayer[]; // 在图层中添加子图层
|
||||||
masks: ILayer[]; // 图层的 mask 列表
|
masks: ILayer[]; // 图层的 mask 列表
|
||||||
sceneContainer: Container | undefined;
|
sceneContainer: Container | undefined;
|
||||||
|
|
@ -177,7 +273,7 @@ export interface ILayer {
|
||||||
multiPassRenderer: IMultiPassRenderer;
|
multiPassRenderer: IMultiPassRenderer;
|
||||||
// 初始化 layer 的时候指定 layer type 类型（）兼容空数据的情况
|
// 初始化 layer 的时候指定 layer type 类型（）兼容空数据的情况
|
||||||
layerType?: string | undefined;
|
layerType?: string | undefined;
|
||||||
isLayerGroup: boolean;
|
isVector?: boolean;
|
||||||
triangulation?: Triangulation | undefined;
|
triangulation?: Triangulation | undefined;
|
||||||
/**
|
/**
|
||||||
* threejs 适配兼容相关的方法
|
* threejs 适配兼容相关的方法
|
||||||
|
|
@ -195,6 +291,7 @@ export interface ILayer {
|
||||||
addMaskLayer(maskLayer: ILayer): void;
|
addMaskLayer(maskLayer: ILayer): void;
|
||||||
removeMaskLayer(maskLayer: ILayer): void;
|
removeMaskLayer(maskLayer: ILayer): void;
|
||||||
needPick(type: string): boolean;
|
needPick(type: string): boolean;
|
||||||
|
getAttribute(name: string): IStyleAttribute | undefined;
|
||||||
getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
|
getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
|
||||||
setBottomColor(color: string): void;
|
setBottomColor(color: string): void;
|
||||||
getBottomColor(): string;
|
getBottomColor(): string;
|
||||||
|
|
@ -272,7 +369,7 @@ export interface ILayer {
|
||||||
|
|
||||||
clear(): void;
|
clear(): void;
|
||||||
clearModels(): void;
|
clearModels(): void;
|
||||||
destroy(): void;
|
destroy(refresh?: boolean): void;
|
||||||
source(data: any, option?: ISourceCFG): ILayer;
|
source(data: any, option?: ISourceCFG): ILayer;
|
||||||
setData(data: any, option?: ISourceCFG): ILayer;
|
setData(data: any, option?: ISourceCFG): ILayer;
|
||||||
fitBounds(fitBoundsOptions?: unknown): ILayer;
|
fitBounds(fitBoundsOptions?: unknown): ILayer;
|
||||||
|
|
@ -352,13 +449,6 @@ export interface ILayer {
|
||||||
setEarthTime(time: number): void;
|
setEarthTime(time: number): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ILayerGroup extends ILayer {
|
|
||||||
addChild(layer: ILayer): void;
|
|
||||||
removeChild(layer: ILayer): void;
|
|
||||||
clearChild(): void;
|
|
||||||
hasChild(layer: ILayer): boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Layer 插件
|
* Layer 插件
|
||||||
*/
|
*/
|
||||||
|
|
@ -488,7 +578,7 @@ export interface ILayerService {
|
||||||
getRenderList(): ILayer[];
|
getRenderList(): ILayer[];
|
||||||
getLayer(id: string): ILayer | undefined;
|
getLayer(id: string): ILayer | undefined;
|
||||||
getLayerByName(name: 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;
|
remove(layer: ILayer, parentLayer?: ILayer): void;
|
||||||
removeAllLayers(): void;
|
removeAllLayers(): void;
|
||||||
updateLayerRenderList(): void;
|
updateLayerRenderList(): void;
|
||||||
|
|
|
||||||
|
|
@ -144,6 +144,12 @@ export interface IStyleAttributeInitializationOptions {
|
||||||
descriptor: IVertexAttributeDescriptor;
|
descriptor: IVertexAttributeDescriptor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IScaleValue {
|
||||||
|
field: StyleAttributeField | undefined;
|
||||||
|
values: unknown[] | string | undefined;
|
||||||
|
callback?: (...args: any[]) => [] | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
export interface IFeatureRange {
|
export interface IFeatureRange {
|
||||||
startIndex: number;
|
startIndex: number;
|
||||||
endIndex: number;
|
endIndex: number;
|
||||||
|
|
|
||||||
|
|
@ -86,21 +86,15 @@ export default class LayerService implements ILayerService {
|
||||||
return this.layers.find((layer) => layer.name === name);
|
return this.layers.find((layer) => layer.name === name);
|
||||||
}
|
}
|
||||||
|
|
||||||
public cleanRemove(layer: ILayer, parentLayer?: ILayer) {
|
public cleanRemove(layer: ILayer, refresh = true) {
|
||||||
// Tip: layer.layerChildren 当 layer 存在子图层的情况
|
const layerIndex = this.layers.indexOf(layer);
|
||||||
if (parentLayer) {
|
if (layerIndex > -1) {
|
||||||
const layerIndex = parentLayer.layerChildren.indexOf(layer);
|
this.layers.splice(layerIndex, 1);
|
||||||
if (layerIndex > -1) {
|
}
|
||||||
parentLayer.layerChildren.splice(layerIndex, 1);
|
if (refresh) {
|
||||||
}
|
this.updateLayerRenderList();
|
||||||
} else {
|
this.renderLayers();
|
||||||
const layerIndex = this.layers.indexOf(layer);
|
|
||||||
if (layerIndex > -1) {
|
|
||||||
this.layers.splice(layerIndex, 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
this.updateLayerRenderList();
|
|
||||||
this.renderLayers();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public remove(layer: ILayer, parentLayer?: ILayer): void {
|
public remove(layer: ILayer, parentLayer?: ILayer): void {
|
||||||
|
|
@ -140,8 +134,7 @@ export default class LayerService implements ILayerService {
|
||||||
layer.hooks.beforeRenderData.call();
|
layer.hooks.beforeRenderData.call();
|
||||||
layer.hooks.beforeRender.call();
|
layer.hooks.beforeRender.call();
|
||||||
|
|
||||||
// layerGroup 不支持 Mask
|
if (layer.masks.length > 0) {
|
||||||
if (!layer.isLayerGroup && layer.masks.length > 0) {
|
|
||||||
// 清除上一次的模版缓存
|
// 清除上一次的模版缓存
|
||||||
this.renderService.clear({
|
this.renderService.clear({
|
||||||
stencil: 0,
|
stencil: 0,
|
||||||
|
|
@ -185,23 +178,7 @@ export default class LayerService implements ILayerService {
|
||||||
return pre.zIndex - next.zIndex;
|
return pre.zIndex - next.zIndex;
|
||||||
})
|
})
|
||||||
.forEach((layer) => {
|
.forEach((layer) => {
|
||||||
if (layer.isLayerGroup) {
|
this.layerList.push(layer);
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,7 @@ export interface ITexture2DInitializationOptions {
|
||||||
| undefined
|
| undefined
|
||||||
| HTMLCanvasElement
|
| HTMLCanvasElement
|
||||||
| HTMLImageElement
|
| HTMLImageElement
|
||||||
|
| ImageBitmap
|
||||||
| number[]
|
| number[]
|
||||||
| number[][]
|
| number[][]
|
||||||
| Uint8Array
|
| Uint8Array
|
||||||
|
|
|
||||||
|
|
@ -80,6 +80,23 @@ vec3 reverse_offset_normal(vec3 vector) {
|
||||||
return 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) {
|
vec4 project_position(vec4 position) {
|
||||||
float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;
|
float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;
|
||||||
float b = COORDINATE_SYSTEM_P20_OFFSET;
|
float b = COORDINATE_SYSTEM_P20_OFFSET;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@antv/l7",
|
"name": "@antv/l7",
|
||||||
"version": "2.8.47",
|
"version": "2.9.8",
|
||||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "es/index.js",
|
"module": "es/index.js",
|
||||||
|
|
@ -25,13 +25,13 @@
|
||||||
"author": "antv",
|
"author": "antv",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-component": "2.8.47",
|
"@antv/l7-component": "2.9.8",
|
||||||
"@antv/l7-core": "2.8.47",
|
"@antv/l7-core": "2.9.8",
|
||||||
"@antv/l7-layers": "2.8.47",
|
"@antv/l7-layers": "2.9.8",
|
||||||
"@antv/l7-maps": "2.8.47",
|
"@antv/l7-maps": "2.9.8",
|
||||||
"@antv/l7-scene": "2.8.47",
|
"@antv/l7-scene": "2.9.8",
|
||||||
"@antv/l7-source": "2.8.47",
|
"@antv/l7-source": "2.9.8",
|
||||||
"@antv/l7-utils": "2.8.47",
|
"@antv/l7-utils": "2.9.8",
|
||||||
"@babel/runtime": "^7.7.7"
|
"@babel/runtime": "^7.7.7"
|
||||||
},
|
},
|
||||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
const version = '2.8.47';
|
const version = '2.9.8';
|
||||||
export { version };
|
export { version };
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@antv/l7-layers",
|
"name": "@antv/l7-layers",
|
||||||
"version": "2.8.47",
|
"version": "2.9.8",
|
||||||
"description": "L7's collection of built-in layers",
|
"description": "L7's collection of built-in layers",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "es/index.js",
|
"module": "es/index.js",
|
||||||
|
|
@ -25,12 +25,14 @@
|
||||||
"author": "xiaoiver",
|
"author": "xiaoiver",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-core": "2.8.47",
|
"@antv/l7-core": "2.9.8",
|
||||||
"@antv/l7-source": "2.8.47",
|
"@antv/l7-source": "2.9.8",
|
||||||
"@antv/l7-utils": "2.8.47",
|
"@antv/l7-utils": "2.9.8",
|
||||||
"@babel/runtime": "^7.7.7",
|
"@babel/runtime": "^7.7.7",
|
||||||
"@mapbox/martini": "^0.2.0",
|
"@mapbox/martini": "^0.2.0",
|
||||||
|
"@turf/helpers": "^6.1.4",
|
||||||
"@turf/meta": "^6.0.2",
|
"@turf/meta": "^6.0.2",
|
||||||
|
"@turf/union": "^6.5.0",
|
||||||
"d3-array": "1",
|
"d3-array": "1",
|
||||||
"d3-color": "^1.4.0",
|
"d3-color": "^1.4.0",
|
||||||
"d3-interpolate": "1.4.0",
|
"d3-interpolate": "1.4.0",
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
public rendering: boolean;
|
public rendering: boolean;
|
||||||
public clusterZoom: number = 0; // 聚合等级标记
|
public clusterZoom: number = 0; // 聚合等级标记
|
||||||
public layerType?: string | undefined;
|
public layerType?: string | undefined;
|
||||||
public isLayerGroup: boolean = false;
|
|
||||||
public triangulation?: Triangulation | undefined;
|
public triangulation?: Triangulation | undefined;
|
||||||
|
|
||||||
public dataState: IDataState = {
|
public dataState: IDataState = {
|
||||||
|
|
@ -135,9 +134,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
|
|
||||||
// TODO: 记录 sceneContainer 供创建子图层的时候使用 如 imageTileLayer
|
// TODO: 记录 sceneContainer 供创建子图层的时候使用 如 imageTileLayer
|
||||||
public sceneContainer: Container | undefined;
|
public sceneContainer: Container | undefined;
|
||||||
|
public tileLayer: any | undefined;
|
||||||
// TODO: 用于保存子图层对象
|
// TODO: 用于保存子图层对象
|
||||||
public layerChildren: ILayer[] = [];
|
public layerChildren: ILayer[] = [];
|
||||||
public masks: ILayer[] = [];
|
public masks: ILayer[] = [];
|
||||||
|
// Tip: 用于标识矢量图层
|
||||||
|
public isVector: boolean = false;
|
||||||
|
|
||||||
@lazyInject(TYPES.IGlobalConfigService)
|
@lazyInject(TYPES.IGlobalConfigService)
|
||||||
protected readonly configService: IGlobalConfigService;
|
protected readonly configService: IGlobalConfigService;
|
||||||
|
|
@ -233,6 +235,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
maskLayer.destroy();
|
maskLayer.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public getAttribute(name: string) {
|
||||||
|
return this.styleAttributeService.getLayerStyleAttribute(name);
|
||||||
|
}
|
||||||
|
|
||||||
public getLayerConfig() {
|
public getLayerConfig() {
|
||||||
return this.configService.getLayerConfig<ChildLayerStyleOptions>(this.id);
|
return this.configService.getLayerConfig<ChildLayerStyleOptions>(this.id);
|
||||||
}
|
}
|
||||||
|
|
@ -395,7 +401,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
// this.pickingPassRender = this.normalPassFactory('pixelPicking');
|
// this.pickingPassRender = this.normalPassFactory('pixelPicking');
|
||||||
// this.pickingPassRender.init(this);
|
// this.pickingPassRender.init(this);
|
||||||
this.hooks.afterInit.call();
|
this.hooks.afterInit.call();
|
||||||
|
|
||||||
// 触发初始化完成事件;
|
// 触发初始化完成事件;
|
||||||
this.emit('inited', {
|
this.emit('inited', {
|
||||||
target: this,
|
target: this,
|
||||||
|
|
@ -541,7 +546,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
};
|
};
|
||||||
this.updateStyleAttribute('shape', field, values, updateOptions);
|
this.updateStyleAttribute('shape', field, values, updateOptions);
|
||||||
// TODO: 根据 shape 判断是否需要更新 model
|
// TODO: 根据 shape 判断是否需要更新 model
|
||||||
updateShape(this, lastShape, currentShape);
|
if (!this.tileLayer) {
|
||||||
|
updateShape(this, lastShape, currentShape);
|
||||||
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
public label(
|
public label(
|
||||||
|
|
@ -668,6 +675,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): ILayer {
|
public render(): ILayer {
|
||||||
|
if (this.tileLayer !== undefined) {
|
||||||
|
// 瓦片图层执行单独的 render 渲染队列
|
||||||
|
this.tileLayer.render();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
// TODO: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
|
// TODO: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
|
||||||
if (this.getEncodedData().length !== 0) {
|
if (this.getEncodedData().length !== 0) {
|
||||||
this.renderModels();
|
this.renderModels();
|
||||||
|
|
@ -949,7 +961,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
public destroy() {
|
public destroy(refresh = true) {
|
||||||
if (this.isDestroied) {
|
if (this.isDestroied) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -980,7 +992,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
||||||
|
|
||||||
this.models = [];
|
this.models = [];
|
||||||
|
|
||||||
this.layerService.cleanRemove(this);
|
this.layerService.cleanRemove(this, refresh);
|
||||||
|
|
||||||
this.emit('remove', {
|
this.emit('remove', {
|
||||||
target: this,
|
target: this,
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@ import {
|
||||||
IMapService,
|
IMapService,
|
||||||
IModel,
|
IModel,
|
||||||
IModelUniform,
|
IModelUniform,
|
||||||
|
IPickingService,
|
||||||
IRendererService,
|
IRendererService,
|
||||||
IShaderModuleService,
|
IShaderModuleService,
|
||||||
IStyleAttributeService,
|
IStyleAttributeService,
|
||||||
|
|
@ -110,6 +111,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
|
||||||
protected mapService: IMapService;
|
protected mapService: IMapService;
|
||||||
protected cameraService: ICameraService;
|
protected cameraService: ICameraService;
|
||||||
protected layerService: ILayerService;
|
protected layerService: ILayerService;
|
||||||
|
protected pickingService: IPickingService;
|
||||||
|
|
||||||
// style texture data mapping
|
// style texture data mapping
|
||||||
|
|
||||||
|
|
@ -118,6 +120,10 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
|
||||||
this.rendererService = layer
|
this.rendererService = layer
|
||||||
.getContainer()
|
.getContainer()
|
||||||
.get<IRendererService>(TYPES.IRendererService);
|
.get<IRendererService>(TYPES.IRendererService);
|
||||||
|
this.pickingService = layer
|
||||||
|
.getContainer()
|
||||||
|
.get<IPickingService>(TYPES.IPickingService);
|
||||||
|
|
||||||
this.shaderModuleService = layer
|
this.shaderModuleService = layer
|
||||||
.getContainer()
|
.getContainer()
|
||||||
.get<IShaderModuleService>(TYPES.IShaderModuleService);
|
.get<IShaderModuleService>(TYPES.IShaderModuleService);
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue