mirror of https://gitee.com/antv-l7/antv-l7
docs: 官网文档内容重构 (#1388)
* feat: change website docs * docs: 官网内容重构 * style: lint style * docs: 新增文档目录 * style: lint style * docs: scene docs * style: lint style * docs: 修改官网结构 * docs: 调整官网文档内容 * style: lint style * docs: 文档修改 * style: lint style * docs: 完善 size、style、shape 的写法 * style: lint style * docs: 完善 color、source 等部分内容 * style: lint style * docs: 修改 shape 文档格式 * style: lint style * docs: style 文档格式调整 * style: lint style * docs: 修改官网内容 * style: lint style * docs: add scale docs * style: lint style * docs: 完善 style 的文档内容 * style: lint style * style: lint style * style: lint style * docs: 补充 heatmap shape * style: lint style * docs: 官网文档修改 * style: lint style * docs: 修改官网文档 * style: lint style * docs: 完善官网文档 raster 部分 * style: lint style * docs: tutorial/quickstart * docs: tutorial/demo * docs: website demo replace amap2 -> amap * docs: api/scene * style: lint style * docs: tutorial * docs: tutorial/point * docs: tutorial demo * docs: tutorial point * style: lint style * docs: tutorial point * docs: toturial point * docs: toturial direct * docs: tutorial point * docs: add scene func docs * docs: api * style: lint style * docs: api tile * style: lint style * docs: tile source * style: lint style * style: lint style * style: lint style * docs: api tile source * style: lint style * docs: tutorial polygon line heatmap * docs: tutorial tile Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao
GitHub
parent
ff00a24ea2
commit
6287d71f4d
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: FAQ
|
||||
order: 16
|
||||
---
|
||||
|
||||
`markdown:docs/api/FAQ.zh.md`
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Base Layer
|
||||
order: 2
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/base.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: 图层基类
|
||||
order: 2
|
||||
title: 图层基类 BaseLayer
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
# 简介
|
||||
## 简介
|
||||
|
||||
L7 Layer 接口设计遵循图形语法，所有图层都继承于基类（baseLayer）。
|
||||
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
---
|
||||
title: ChangeLog
|
||||
order: 15
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 2020.03.12 2.1 正式版
|
||||
|
||||
###✨ Features
|
||||
|
||||
- 新增 l7-react 版本
|
||||
- 可自定义样式的聚合图 MakerLayer
|
||||
- 新增 quantile、quantize 度量
|
||||
- 地图导出功能
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
- IE 11 支持
|
||||
- 更新拾取机制，拾取更高效
|
||||
- 优化依赖包减少包体积
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
- setData 更新机制
|
||||
- color,size,shape 更新重绘问题
|
||||
|
||||
## 2020.01.06 2.0 正式版
|
||||
|
||||
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
|
||||
|
||||
###✨ Features
|
||||
|
||||
• 新增弧线图，路径图动画功能
|
||||
|
||||
• 新增气泡图水波动画功能
|
||||
|
||||
• 新增聚合地图
|
||||
|
||||
• 新增文本标注，支持避让
|
||||
|
||||
• 新增城市建筑图层
|
||||
|
||||
• 新增栅格地图，支持卫星遥感数据可视化
|
||||
|
||||
• 新增图层交互事件
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
• Marker 支持事件和自定义数据
|
||||
|
||||
• 弧线支持虚线样式
|
||||
|
||||
• 面图层支持，文本标注，气泡图效果
|
||||
|
||||
• 重构了文档结构
|
||||
|
||||
• source 支持 map,join,filter 数据处理支持
|
||||
|
||||
• source 支持数据更新
|
||||
|
||||
• 支持 blend 效果配置
|
||||
|
||||
• 支持通过地图实例初始化地图
|
||||
|
||||
• 官网新增所有图表概览页面
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
• 修复容器 resize 不能正常响应
|
||||
|
||||
• 修复 babel 打包问题
|
||||
|
||||
• 修复地图组件加载报错问题
|
||||
|
||||
• 修复样式配置 strokeColor- stroke
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
---
|
||||
title: 发布日志
|
||||
order: 15
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 2022.01.17 2.7 正式版本
|
||||
|
||||
### ✨ Features
|
||||
|
||||
- 新增简单点、简单线
|
||||
- 新增墙图层
|
||||
- 新增风场图层
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
- 柱图支持生长动画
|
||||
- 柱图支持配置渐变、光照、深度
|
||||
- 点图层支持等面积模式
|
||||
- 线图层支持配置高度
|
||||
- 弧线支持动态配置弧度
|
||||
- 面图层支持配置径向渐变
|
||||
- 拾取效果支持配置混合，光照计算
|
||||
- color 增加图层保底颜色设置
|
||||
- 增加 pointLayer image mipmap 支持
|
||||
- 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
- 修复线图层在存在高度的情况下，不同地图，不同场景下的效果兼容
|
||||
- 修复 threejs 图层导致 L7 图层失效的问题
|
||||
- 修复 pointLayer meter 单个数据失效的情况
|
||||
- 修复 marker 在 cluster getMakers 失效
|
||||
- 取消在 shape 方法执行后的暴力更新
|
||||
- 修复纹理贴图在 zoom 大于 12 时存在错位的问题
|
||||
|
||||
## 2021.05.31 2.4 正式版本
|
||||
|
||||
### ✨ Features
|
||||
|
||||
- 支持高德 2.0 JSAPI
|
||||
- 支持 iconfont 字体图标功能
|
||||
- 支持 line 纹理
|
||||
- 支持图层框选
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
- 支持 arc 弧线反向
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
- 修复使用多个文字标注图层时存在的问题
|
||||
|
||||
## 2020.04.20 2.2 正式版本
|
||||
|
||||
### ✨ Features
|
||||
|
||||
#### [L7-Draw 地图绘制组件发布](../draw/start)
|
||||
|
||||
支持基础图形绘制、平移、修改、删除
|
||||
|
||||
- 绘制 UI 组件支持
|
||||
- 绘制圆形
|
||||
- 绘制矩形
|
||||
- 绘制点
|
||||
- 绘制线
|
||||
- 绘制面
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
- 要素拾取支持添加 buffer
|
||||
- 图层拾取支持冒泡机制，默认拾取最上层
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
- pointLayer 聚合支持多种数据格式化
|
||||
- 修复热力图移动端不能正常渲染
|
||||
- 修复 3D 热力图高德地图正使用
|
||||
- L7 版本锁定
|
||||
- 修复点图层描边模糊问题
|
||||
|
||||
## 2020.03.12 2.1 正式版
|
||||
|
||||
### ✨ Features
|
||||
|
||||
- 新增 l7-react 版本
|
||||
- 可自定义样式的聚合图 MakerLayer
|
||||
- 新增 quantile、quantize 度量
|
||||
- 地图导出功能
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
- IE 11 支持
|
||||
- 更新拾取机制，拾取更高效
|
||||
- 优化依赖包减少包体积
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
- setData 更新机制
|
||||
- color,size,shape 更新重绘问题
|
||||
|
||||
## 2020.01.06 2.0 正式版
|
||||
|
||||
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
|
||||
|
||||
### ✨ Features
|
||||
|
||||
• 新增弧线图，路径图动画功能
|
||||
|
||||
• 新增气泡图水波动画功能
|
||||
|
||||
• 新增聚合地图
|
||||
|
||||
• 新增文本标注，支持避让
|
||||
|
||||
• 新增城市建筑图层
|
||||
|
||||
• 新增栅格地图，支持卫星遥感数据可视化
|
||||
|
||||
• 新增图层交互事件
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
• Marker 支持事件和自定义数据
|
||||
|
||||
• 弧线支持虚线样式
|
||||
|
||||
• 面图层支持，文本标注，气泡图效果
|
||||
|
||||
• 重构了文档结构
|
||||
|
||||
• source 支持 map,join,filter 数据处理支持
|
||||
|
||||
• source 支持数据更新
|
||||
|
||||
• 支持 blend 效果配置
|
||||
|
||||
• 支持通过地图实例初始化地图
|
||||
|
||||
• 官网新增所有图表概览页面
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
• 修复容器 resize 不能正常响应
|
||||
|
||||
• 修复 babel 打包问题
|
||||
|
||||
• 修复地图组件加载报错问题
|
||||
|
||||
• 修复样式配置 strokeColor- stroke
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: CityBuild
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/cityBuilding/cityBuilding.zh.md`
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Custom Layer
|
||||
title: Canvas Layer
|
||||
order: 7
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
title: 自定义图层
|
||||
title: CanvasLayer
|
||||
order: 7
|
||||
---
|
||||
|
||||
L7 的自定义图层允许用户通过 canvas 绘制的方法自定义图层的内容和样式。相比于 Marker 通过创建实际 DOM 的方式，CanvasLayer 无疑有更佳的性能。
|
||||
CanvasLayer 允许用户通过 canvas 绘制的方法自定义图层的内容和样式。相比于 Marker 通过创建实际 DOM 的方式，CanvasLayer 无疑有更佳的性能。
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: 风场图层
|
|||
order: 7
|
||||
---
|
||||
|
||||
WindLayer 用于将存储风场信息的图片，设置其风速线采样相关参数，将采样后的风场线的走向、强度通过可视化的方式在地图上呈现出来。
|
||||
`WindLayer` 用于将存储风场信息的图片，设置其风速线采样相关参数，将采样后的风场线的走向、强度通过可视化的方式在地图上呈现出来。
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ import { WindLayer } from '@antv/l7';
|
|||
|
||||
### animate
|
||||
|
||||
开启动画效果
|
||||
开启动画效果。
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
|
|
@ -40,23 +40,47 @@ layer.animate(true);
|
|||
|
||||
### style
|
||||
|
||||
- uMin: 风速 X 轴/横向最小值
|
||||
- uMax: 风速 X 轴/横向最大值
|
||||
- vMin: 风速 Y 轴/纵向最小值
|
||||
- vMax: 风速 Y 轴/纵向最大值
|
||||
- sizeScale: 风场线条粗细缩放比，0-2
|
||||
- fadeOpacity: 线条透明度，0-1
|
||||
- numParticles: 线条数量
|
||||
- rampColors: 线条填充颜色映射，例：
|
||||
{
|
||||
0.0: '#3288bd',
|
||||
0.1: '#66c2a5',
|
||||
0.2: '#abdda4',
|
||||
0.3: '#e6f598',
|
||||
0.4: '#fee08b',
|
||||
0.5: '#fdae61',
|
||||
0.6: '#f46d43',
|
||||
1.0: '#d53e4f'
|
||||
}
|
||||
- `uMin`: 风速 `X` 轴/横向最小值。
|
||||
- `uMax`: 风速 `X` 轴/横向最大值。
|
||||
- `vMin`: 风速 `Y` 轴/纵向最小值。
|
||||
- `vMax`: 风速 `Y` 轴/纵向最大值。
|
||||
- `sizeScale`: 风场线条粗细缩放比，`0 - 2`。
|
||||
- `fadeOpacity`: 线条透明度，`0 - 1`。
|
||||
- `numParticles`: 线条数量。
|
||||
- `rampColors`: 线条填充颜色映射。
|
||||
|
||||
```js
|
||||
const rampColors = {
|
||||
colors: [
|
||||
'#3288bd',
|
||||
'#66c2a5',
|
||||
'#abdda4',
|
||||
'#e6f598',
|
||||
'#fee08b',
|
||||
'#fdae61',
|
||||
'#f46d43',
|
||||
'#d53e4f',
|
||||
],
|
||||
positions: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 1.0],
|
||||
};
|
||||
```
|
||||
|
||||
#### rampColors
|
||||
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
配置值域映射颜色的色带，值域的范围为 `[0 - 1]`, 对应的我们需要为每一个 `position` 位置设置一个颜色值。
|
||||
|
||||
⚠️ colors, positions 的长度要相同
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
rampColors: {
|
||||
colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'],
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
[在线案例](/zh/examples/wind/basic#wind)
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: PlaneGeometry
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/api/geometry_layer/plane.zh.md`
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: SpriteGeometry
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/geometry_layer/sprite.zh.md`
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: GridHeatMapLayer
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/grid.zh.md`
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
---
|
||||
title: 网格热力图
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { HeatmapLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
### source
|
||||
|
||||
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
|
||||
|
||||
#### 设置网格聚合参数
|
||||
|
||||
布局方法 通过 source 的 tansforms 属性配置
|
||||
|
||||
- type 数据聚合类型 grid
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean 5 个统计维度
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||
|
||||
#### 2d
|
||||
|
||||
- circle,
|
||||
- triangle
|
||||
- square
|
||||
- heaxgon
|
||||
|
||||
```javascript
|
||||
layer.shape('circle');
|
||||
```
|
||||
|
||||
#### 3d
|
||||
|
||||
- cylinder
|
||||
- triangleColumn
|
||||
- hexagonColumn
|
||||
- squareColumn,
|
||||
|
||||
```javascript
|
||||
layer.shape('cylinder');
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
### 2D shape
|
||||
|
||||
不需要设置 size 方法
|
||||
|
||||
### 3D 图形
|
||||
|
||||
size 表示高度, 支持常量和数据映射
|
||||
|
||||
```javascript
|
||||
layer.size(10); // 常量
|
||||
layer.size('value', [10, 50]); // 根据value 字段映射大小
|
||||
layer.size('value', (value) => {}); // 回调函数设置高度
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
同 layer color 方法
|
||||
|
||||
### style
|
||||
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
- opacity 透明度 0 - 1.0
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
|
||||
### demo
|
||||
|
||||
```javascript
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
})
|
||||
.color('count', [
|
||||
'#0B0030',
|
||||
...
|
||||
]);
|
||||
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
||||
[在线案例](../../../examples/heatmap/grid#china)
|
||||
|
|
@ -7,44 +7,20 @@ order: 0
|
|||
|
||||
## 简介
|
||||
|
||||
热力图是常见的可视化图表，L7 提供了多种表现形式的热力图
|
||||
热力图以特殊高亮的形式显示数据在地理区域的聚集程度，L7 提供了以多种表现形式的热力图，通过切换 `shape` 参数，用户可以得到不同的热力图
|
||||
|
||||
- 经典平面热力图
|
||||
- 3D 热力图
|
||||
- 网格热力图
|
||||
- 蜂窝热力图
|
||||
|
||||
通过切换 shape 参数，用户可以得到不同的热力图
|
||||
|
||||
### demo
|
||||
<div>
|
||||
<div style="width:40%;float:right; margin-left: 16px;">
|
||||
<img width="80%" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*QstiQq4JBOIAAAAAAAAAAABkARQnAQ'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
import { HeatmapLayer } from '@antv/l7';
|
||||
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
layer
|
||||
.shape('heatmap')
|
||||
.size('mag', [0, 1.0]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
radius: 20,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#F27DEB',
|
||||
'#8C1EB2',
|
||||
'#421EB2',
|
||||
].reverse(),
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
rampColors: rampColors,
|
||||
});
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*UWhySqYeOqcAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例 经典热力 classical](../../../examples/heatmap/heatmap#heatmap)
|
||||
[在线案例 蜂窝热力 hexagon](../../../examples/heatmap/hexagon#light)
|
||||
[在线案例 网格热力 grid](/zh/examples/heatmap/grid#china)
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Hexagon HeatMap
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/hexagon.zh.md`
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
---
|
||||
title: 蜂窝热力图
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
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*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
### source
|
||||
|
||||
网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
|
||||
|
||||
#### 设置网格聚合参数
|
||||
|
||||
布局方法 通过 source 的 tansforms 属性配置
|
||||
|
||||
- type 数据聚合类型 hexagon
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean 5 个统计维度
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 15000,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
|
||||
|
||||
#### 2d
|
||||
|
||||
- circle,
|
||||
- triangle
|
||||
- square
|
||||
- heaxgon
|
||||
|
||||
```javascript
|
||||
layer.shape('circle');
|
||||
```
|
||||
|
||||
#### 3d
|
||||
|
||||
- cylinder
|
||||
- triangleColumn
|
||||
- hexagonColumn
|
||||
- squareColumn,
|
||||
|
||||
```javascript
|
||||
layer.shape('cylinder');
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
### 2D shape
|
||||
|
||||
不需要设置 size 方法
|
||||
|
||||
### 3D 图形
|
||||
|
||||
size 表示高度, 支持常量和数据映射
|
||||
|
||||
```javascript
|
||||
layer.size(10); // 常量
|
||||
layer.size('value', [10, 50]); // 根据value 字段映射大小
|
||||
layer.size('value', (value) => {}); // 回调函数设置高度
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
同 layer color 方法
|
||||
|
||||
### style
|
||||
|
||||
- coverage 网格覆盖度 0 - 1
|
||||
- angle 网格旋转角度 0 - 360
|
||||
- opacity 透明度 0 - 1.0
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
|
||||
### 完整代码
|
||||
|
||||
```javascript
|
||||
const layer = new HeatmapLayer({
|
||||
zIndex: 2,
|
||||
})
|
||||
.souce(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: lng,
|
||||
y: lat,
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 1500,
|
||||
field: 'count',
|
||||
operation: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('hexagon')
|
||||
.color('sum')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
[在线案例](../../../examples/heatmap/hexagon#light)
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: normal
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/normal.zh.md`
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
---
|
||||
title: 经典热力图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
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*QstiQq4JBOIAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
### shape
|
||||
|
||||
常量 heatmap
|
||||
|
||||
```javascript
|
||||
layer.shape('heatmap');
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
- field: 热力图权重字段
|
||||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||
|
||||
```javascript
|
||||
layer.size('weight', [0, 1]);
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
heatmap 需要设置 color 方法，样式通过 style 设置
|
||||
|
||||
### style
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- rampColors 色带参数
|
||||
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
⚠️ color, position 的长度要相同
|
||||
|
||||
### demo
|
||||
|
||||
```javascript
|
||||
heatmapLayer()
|
||||
.source(data)
|
||||
.size('mag', [0, 1]) // weight映射通道
|
||||
.style({
|
||||
intensity: 3,
|
||||
radius: 20,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'rgba(33,102,172,0.0)',
|
||||
...
|
||||
],
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
[在线案例](../../../examples/heatmap/heatmap#heatmap)
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/options.zh.md`
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/options.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Scale
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/scale.zh.md`
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Scale
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/scale.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Shape
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/shape.zh.md`
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
title: Shape
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`shape` 方法用于指定热力图层绘制热力的类型，现在支持经典热力、蜂窝热力、网格热力三种类型。
|
||||
|
||||
### shape('heatmap')
|
||||
|
||||
`shape` 为 `heatmap` 热力图层用于绘制 2D 经典热力。
|
||||
|
||||
### shape('heatmap3D')
|
||||
|
||||
`shape` 为 `heatmap3D` 热力图层用于绘制 3D 热力。
|
||||
|
||||
### transforms
|
||||
|
||||
网格热力和蜂窝热力的实现依赖配置 `transforms` 的参数，[具体说明使用](/zh/docs/api/source/source/#transforms)。
|
||||
|
||||
```js
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 100,
|
||||
field: 'h12',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('sum', [0, 600])
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/source.zh.md`
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/source.md`
|
||||
|
||||
🌟 热力图的数据使用和点图层保持一致。
|
||||
|
||||
### GeoJSON
|
||||
|
||||
```js
|
||||
// 传入 GeoJSON 类型数据 *** L7 默认支持，不需要 parser 解析
|
||||
var data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[120, 30],
|
||||
...
|
||||
]
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
var layer = new HeatmapLayer()
|
||||
.source(data)
|
||||
```
|
||||
|
||||
### CSV
|
||||
|
||||
```js
|
||||
// 传入 txt 类型数据
|
||||
var data = `from,to,value,type,lng1,lat1,lng2,lat2
|
||||
鎷夎惃,娴疯タ,6.91,move_out,91.111891,29.662557,97.342625,37.373799
|
||||
鎷夎惃,鎴愰兘,4.79,move_out,91.111891,29.662557,104.067923,30.679943
|
||||
鎷夎惃,閲嶅簡,2.41,move_out,91.111891,29.662557,106.530635,29.544606
|
||||
鎷夎惃,鍖椾含,2.05,move_out,91.111891,29.662557,116.395645,39.929986
|
||||
...`;
|
||||
|
||||
var layer = new HeatmapLayer().source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### JSON
|
||||
|
||||
```js
|
||||
// 传入 JSON 类型的数据
|
||||
var data = [
|
||||
{
|
||||
lng: 120,
|
||||
lat: 30
|
||||
},
|
||||
...
|
||||
]
|
||||
|
||||
var layer = new HeatmapLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
}
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/style.zh.md`
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`style` 方法用于配制图层的样式，相同图层拥有不同的 `shape` 图形，不同 `shape` 的图层 `style` 方法接受不同的参数。
|
||||
|
||||
🌟 蜂窝热力图和网格热力图的 `style` 样式可以参考实际绘制的图层。
|
||||
|
||||
```js
|
||||
layer.style({
|
||||
opacity: 0.5,
|
||||
});
|
||||
```
|
||||
|
||||
### common
|
||||
|
||||
通用 `style` 参数，所有图形都支持的参数。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------- | -------- | ------------ | ------ |
|
||||
| opacity | `number` | 图形的透明度 | `1` |
|
||||
|
||||
### heatmap
|
||||
|
||||
`shape` 为 `heatmap`、`heatmap3D` 类型的时候，绘制经典热力图。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ---------- | -------- | ------------ | ------ |
|
||||
| intensity | `number` | 热力的强度 | `10` |
|
||||
| radius | `number` | 热力点的半径 | `10` |
|
||||
| rampColors | `number` | 热力的色值 | `1` |
|
||||
|
||||
#### rampColors
|
||||
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
配置值域映射颜色的色带，值域的范围为 `[0 - 1]`, 对应的我们需要为每一个 `position` 位置设置一个颜色值。
|
||||
|
||||
⚠️ colors, positions 的长度要相同
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
rampColors: {
|
||||
colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'],
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### hexagon
|
||||
|
||||
绘制蜂窝热力图。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| -------- | -------- | ------------ | ------ |
|
||||
| angle | `number` | 图形旋转角度 | `0` |
|
||||
| coverage | `number` | 图形覆盖比率 | `0.9` |
|
||||
|
||||
### grid
|
||||
|
||||
绘制网格热力图。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| -------- | -------- | ------------ | ------ |
|
||||
| coverage | `number` | 图形覆盖比率 | `1` |
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: ImageLayer
|
||||
order: 5
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/api/imagelayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
---
|
||||
title: 图片图层
|
||||
order: 5
|
||||
title: ImageLayer
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
将图片添加到地图上，需要指定图片的经纬度范围
|
||||
将图片添加到地图上，同时需要指定图片的经纬度范围和数据解析类型。
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { ImageLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
### 代码示例
|
||||
<div>
|
||||
<div style="width:40%;float:right; margin-left: 16px;">
|
||||
<img width="80%" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*8MtWSIGTN8UAAAAAAAAAAAAAARQnAQ'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const layer = new ImageLayer({});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/imageLayer/options.zh.md`
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/options.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/imageLayer/source.zh.md`
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`imagelayer` 通过提供在线图片的 `url` 指定数据，通过 `extent` 指定图片在地图上的位置。
|
||||
|
||||
```js
|
||||
layer.source(
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [121.168, 30.2828, 121.384, 30.4219],
|
||||
},
|
||||
},
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/imageLayer/style.zh.md`
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`imagelayer` 的 `style` 参数只支持 `opacity`。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------- | -------- | ------------ | ------ |
|
||||
| opacity | `number` | 图形的透明度 | `1` |
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Animate
|
||||
order: 7
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/animate.zh.md`
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: Animate
|
||||
order: 7
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
线图层图层在开启 `animate` 方法后会得到沿线方向的线动画。
|
||||
|
||||
<div>
|
||||
<div style="width:40%;float:left; margin: 10px;">
|
||||
<img width="80%" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mo_7Q6sTqOIAAAAAAAAAAAAAARQnAQ'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### animate(boolean | IAnimateOption)
|
||||
|
||||
`animate` 方法支持布尔值和对象传值。
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
|
||||
layer.animate({
|
||||
enable: true,
|
||||
});
|
||||
```
|
||||
|
||||
### IAnimateOption
|
||||
|
||||
```javascript
|
||||
interface IAnimateOption {
|
||||
enable: boolean;
|
||||
speed: number;
|
||||
rings: number;
|
||||
}
|
||||
```
|
||||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: ArcLayer
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/arc.zh.md`
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
title: 弧线图
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { LineLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*dUk8RbtjUDIAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/line/animate#wind)
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 arc 即可
|
||||
|
||||
### source
|
||||
|
||||
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
### style
|
||||
|
||||
`markdown:docs/api/line_layer/features/segmentNumber.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/thetaOffset.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/linear.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/dash.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Arc 3D Layer
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/arc3d.zh.md`
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
---
|
||||
title: 3D弧线图
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { LineLayer } from '@antv/l7';
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/line/arc#trip_arc)
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 arc3d 即可
|
||||
|
||||
### source
|
||||
|
||||
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
### style
|
||||
|
||||
`markdown:docs/api/line_layer/features/linear.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/dash.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Color
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/color.zh.md`
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Color
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/color.md`
|
||||
|
|
@ -1,15 +1,8 @@
|
|||
#### texture
|
||||
|
||||
线图层支持纹理贴图，同时支持用户选择多种纹理表现形式
|
||||
|
||||
线纹理使用通过 scene.addImage 方法添加到全局的纹理资源，同时使用 texture 方法指定贴图
|
||||
线图层支持纹理贴图和多种表现形式，通过 `scene.addImage` 方法添加到全局的资源，使用 `texture` 方法指定贴图。
|
||||
|
||||
```javascript
|
||||
scene.addImage('02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg');
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer()
|
||||
const layer = new LineLayer()
|
||||
.source(data)
|
||||
.size(4)
|
||||
.shape('line')
|
||||
|
|
@ -19,26 +12,27 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785
|
|||
interval: 1, // 间隔
|
||||
duration: 1, // 持续时间，延时
|
||||
trailLength: 2 // 流线长度
|
||||
})
|
||||
.style({
|
||||
}).style({
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 20 // 设置贴图纹理的间距
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
```
|
||||
|
||||
<div>
|
||||
<div style="width:40%;float:right; margin-left: 10px;">
|
||||
<img width="80%" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
- lineTexture 指定是否开启纹理贴图能力
|
||||
- iconStep 指定贴图在线图层上面排布的间隔
|
||||
|
||||
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/gallery/animate#animate_path_texture)
|
||||
[在线案例](/zh/examples/gallery/animate/#animate_path_texture)
|
||||
|
||||
#### texture advance
|
||||
|
||||
✨ animate
|
||||
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关
|
||||
当线图层 (`shape` 为 `arc`/`arc3d`) 开启动画模式的时候，纹理在线图层上的分布还会和 `animate` 的参数相关.
|
||||
|
||||
线图层上排列的纹理的数量大致为 duration/interval
|
||||
|
||||
|
|
@ -67,5 +61,5 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785
|
|||
|
||||
```
|
||||
|
||||
[在线案例](../../../examples/line/animate#plane_animate2)
|
||||
[在线案例](zh/examples/line/animate#plane_animate2)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Great Arc Layer
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/greatLine.zh.md`
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
---
|
||||
title: 大圆航线
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
把地球看做一个球体，通过地面上任意两点和地心做一平面，平面与地球表面相交看到的圆周就是大圆。两点之间的大圆劣弧线是两点在地面上的最短距离。沿着这一段大圆弧线航行时的航线称为大圆航线。
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { LineLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/line/arc#arcCircle)
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 greatcircle 即可
|
||||
|
||||
### source
|
||||
|
||||
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
### style
|
||||
|
||||
`markdown:docs/api/line_layer/features/linear.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/dash.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
|
@ -7,88 +7,23 @@ order: 0
|
|||
|
||||
## 简介
|
||||
|
||||
L7 支持各种类型的线图层，包括平面路径、平面弧线、平面虚线、平面动画、3D 弧线等等。用户通过切换 shape 的参数，以及配置对应 shape 的线图层支持的 style 样式，可以得到各种类型的线。
|
||||
线图层通过一组经纬度数据组来描述地图上的一条或者多条路径。通过路径的类型，将其区分为路径、弧线、3D 弧线以及其他的类型。
|
||||
用户可以通过配置 `shape` 参数来选择点的类型，同时通过 `style`、`size`、`color` 方法调整点的样式。
|
||||
|
||||
✨ 不同的 lineLayer 会支持不同的相关特性，具体的使用可以请查看详细的文档
|
||||
<div>
|
||||
<div style="width:40%;float:right; margin-left: 16px;">
|
||||
<img width="80%" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MxnRTrzcawcAAAAAAAAAAAAAARQnAQ'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MxnRTrzcawcAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
### shape
|
||||
|
||||
线图层支持 5 种 shape
|
||||
|
||||
- line 绘制路径图，
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
- wall 基于线图层的一种特殊形式
|
||||
|
||||
⚠️ 弧线只需要设置起止点坐标即可
|
||||
|
||||
```javascript
|
||||
new LineLayer().source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
|
||||
```javascript
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[
|
||||
106.5234375,
|
||||
57.51582286553883
|
||||
],
|
||||
[
|
||||
136.40625,
|
||||
61.77312286453146
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```js
|
||||
const layer = new LineLayer()
|
||||
.source([{lng: 120, lat: 30, lng1: 125,lat1: 30 }], {
|
||||
parser: {
|
||||
type: 'json', x: 'lng', y: 'lat', x1: 'lng1', y1: 'lat1'
|
||||
}})
|
||||
.shape('line')
|
||||
.size(2)
|
||||
.color('#f00);
|
||||
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
线图层 不仅可以设置宽度，还可以设置线的高度
|
||||
|
||||
- size 类型为 number 则表示 line 的宽度
|
||||
- size 类型为 [number , number] 分别表示宽度和高度
|
||||
|
||||
```javascript
|
||||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1, 2]); // 宽度为1，高度2
|
||||
```
|
||||
|
||||
### texture
|
||||
|
||||
线图层支持了纹理贴图的能力，不同 shape 的图层对 texturte 的支持情况会存在细微的差别，详细使用请查看相关图层的文档
|
||||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
### style
|
||||
|
||||
`markdown:docs/api/line_layer/features/linear.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/dash.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/options.zh.md`
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/options.md`
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Path
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/path.zh.md`
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
---
|
||||
title: 路径图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { LineLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KEupSZ_p0pYAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/gallery/animate#animate_path)
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 line 即可绘制路线图
|
||||
|
||||
- line
|
||||
|
||||
### size
|
||||
|
||||
路径图线的 size 支持两个维度
|
||||
|
||||
- width 宽度
|
||||
- height 高度
|
||||
|
||||
```javascript
|
||||
layer.size([2, 10]); // 绘制宽度为2，高度为10的路径
|
||||
|
||||
layer.size('height', []);
|
||||
```
|
||||
|
||||
🌟 通过设置第二个参数我们可以得到等高线图
|
||||
|
||||
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*p6LsTp3M144AAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/line/isoline#ele)
|
||||
|
||||
✨ 当用户在传入数据的第三个值可以用于表示当前点的高度，通过在 source 中传入的第三个参数我们可以的高度不等的线图层
|
||||
|
||||
### style
|
||||
|
||||
#### raisingHeight: number
|
||||
|
||||
线图层的抬升高度，高度值和地图缩放层级无关。
|
||||
|
||||
[在线案例](/zh/examples/polygon/3d#floatMap)
|
||||
|
||||
#### heightfixed: boolean
|
||||
|
||||
线图层的高度是否和地图缩放层级无关，默认为 false。
|
||||
|
||||
[在线案例](/zh/examples/line/isoline#ele)
|
||||
|
||||
#### arrow: IArrowOption
|
||||
|
||||
线图层支持配置箭头
|
||||
|
||||
```javascript
|
||||
// 配置箭头 IArrowOption
|
||||
layer.style({
|
||||
arrow: {
|
||||
enable: true, // 是否开启箭头、默认为 false
|
||||
arrowWidth: 2, // 箭头的宽度、默认值为 2、与线的 size 相关
|
||||
arrowHeight: 3, // 箭头的高度、默认值为 3、与线的 size 相关
|
||||
tailWidth: 1, // 配置箭头的时候支持设置线尾部的宽度
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
[在线案例](/zh/examples/line/path#arrow)
|
||||
|
||||
<img width="40%" style="display: block;margin: 0 auto;" alt="参数" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Muz8TLM2a0kAAAAAAAAAAAAAARQnAQ'/>
|
||||
|
||||
为了构造箭头，我们会在处理数据的时候插入多余的节点用于构造节点（为了不增加额外的消耗，普通线不会进行插入操作）。
|
||||
|
||||
<img width="40%" style="display: block;margin: 0 auto;" alt="原理" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FL4mT4RCfIgAAAAAAAAAAAAAARQnAQ'/>
|
||||
|
||||
如上图所示，对于配置箭头的线，我们插入额外的顶点用于构建箭头，同时我们会在顶点着色器中对新插入的顶点以及原有的顶点进行一定的偏移，让构建我们需要的箭头形状。
|
||||
|
||||
✨ 由于线图层在配置箭头/不配置箭头的这两种情况对顶点的处理不同，因此我们在切换这两种情况的时候需要重构线图层对象。
|
||||
|
||||
`markdown:docs/api/line_layer/features/vertexHeight.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/border.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Scale
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/scale.zh.md`
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Scale
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/scale.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Shape
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/shape.zh.md`
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
title: Shape
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`shape` 方法用于指定线图层绘制什么样的线。
|
||||
|
||||
### shape('line')
|
||||
|
||||
绘制路径图。
|
||||
|
||||
`line` 路径是最普通的线图层，支持配置宽度和高度，支持配置纹理和动画。
|
||||
|
||||
```js
|
||||
layer.shape('line');
|
||||
```
|
||||
|
||||
### shape('arc')
|
||||
|
||||
`arc` 弧线通过贝塞尔曲线算法计算出弧线的的路径，支持配置纹理和动画。
|
||||
|
||||
```js
|
||||
layer.shape('arc');
|
||||
```
|
||||
|
||||
### shape('arc3d')
|
||||
|
||||
`arc3d` 3d 弧线是在垂直地图两点之间的弧线，具有高度，支持配置纹理和动画。
|
||||
|
||||
```js
|
||||
layer.shape('arc3d');
|
||||
```
|
||||
|
||||
### shape('greatcircle')
|
||||
|
||||
`greatcircle` 大圆航线是地图两个点最近距离的连线，支持配置纹理和动画。
|
||||
|
||||
```js
|
||||
layer.shape('greatcircle');
|
||||
```
|
||||
|
||||
### shape('wall')
|
||||
|
||||
`wall` 是垂直地图的围墙，支持配置高度，纹理和动画。
|
||||
|
||||
```js
|
||||
layer.shape('wall');
|
||||
```
|
||||
|
||||
### shape('simple')
|
||||
|
||||
`simple` 线图层，宽度始终为 `1px`。
|
||||
|
||||
```js
|
||||
layer.shape('simple');
|
||||
```
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Simple Line Layer
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/simple.zh.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Size
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/size.zh.md`
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
title: Size
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
线图层的 `size` 方法可以设置线的宽度和高度。
|
||||
|
||||
### ILineSize: number | [number, number]
|
||||
|
||||
- size 类型为 number 则表示 line 的宽度
|
||||
- size 类型为 [number , number] 分别表示宽度和高度
|
||||
|
||||
```javascript
|
||||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1, 2]); // 宽度为1，高度2
|
||||
```
|
||||
|
||||
### size(width: ILineSize)
|
||||
|
||||
线图层可以直接设置宽度值。图层中所有的线使用一个宽度。
|
||||
|
||||
```js
|
||||
layer.size(2);
|
||||
```
|
||||
|
||||
### size(field: string)
|
||||
|
||||
线图层的宽度可以根据图层接受的数据值进行映射，接受传入数据的字段作为参数。
|
||||
|
||||
```js
|
||||
layer.source({
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
lineSize: 2,
|
||||
},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[119.988511, 30.269614],
|
||||
[119.9851, 30.269323],
|
||||
[119.99271, 30.22088],
|
||||
],
|
||||
},
|
||||
});
|
||||
layer.size('lineSize');
|
||||
```
|
||||
|
||||
### size(field: string, domain: ILineSize[])
|
||||
|
||||
`size` 方法支持简单的值映射，将根据 `field` 从传入图层的数据中提取的值映射到 `domain` 值域中。
|
||||
|
||||
```js
|
||||
layer.size('type', [1, 2, 3]);
|
||||
```
|
||||
|
||||
### size(field: string, callback: () => ILineSize )
|
||||
|
||||
`size` 方法支持回调函数的写法，将根据 `field` 作为 `callback` 方法的参数，`callback` 方法的返回值作为线图层实际的宽高。
|
||||
|
||||
```js
|
||||
layer.size('type', (value) => {
|
||||
switch (value) {
|
||||
case 'path':
|
||||
return 1;
|
||||
case 'road':
|
||||
return 2;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/source.zh.md`
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/source.md`
|
||||
|
||||
### GeoJSON
|
||||
|
||||
```js
|
||||
// 传入 GeoJSON 类型数据 *** L7 默认支持，不需要 parser 解析
|
||||
var data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: [
|
||||
[106.5234375, 57.51582286553883],
|
||||
[136.40625, 61.77312286453146],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
var layer = new PointLayer().source(data);
|
||||
```
|
||||
|
||||
### CSV
|
||||
|
||||
```js
|
||||
// 传入 txt 类型数据
|
||||
var data = `from,to,value,type,lng1,lat1,lng2,lat2
|
||||
鎷夎惃,娴疯タ,6.91,move_out,91.111891,29.662557,97.342625,37.373799
|
||||
鎷夎惃,鎴愰兘,4.79,move_out,91.111891,29.662557,104.067923,30.679943
|
||||
鎷夎惃,閲嶅簡,2.41,move_out,91.111891,29.662557,106.530635,29.544606
|
||||
鎷夎惃,鍖椾含,2.05,move_out,91.111891,29.662557,116.395645,39.929986
|
||||
...`;
|
||||
|
||||
new LineLayer().source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### JSON
|
||||
|
||||
```js
|
||||
// 传入 JSON 类型的数据
|
||||
var data = [
|
||||
{
|
||||
lng: 120,
|
||||
lat: 30,
|
||||
lng1: 125,
|
||||
lat1: 30
|
||||
},
|
||||
...
|
||||
]
|
||||
|
||||
var layer = new LineLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
x1: 'lng1',
|
||||
y1: 'lat1'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/style.zh.md`
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`style` 方法用于配制图层的样式，相同图层拥有不同的 `shape` 图形，不同 `shape` 的图层 `style` 方法接受不同的参数。
|
||||
|
||||
```js
|
||||
layer.style({
|
||||
opacity: 0.5,
|
||||
});
|
||||
```
|
||||
|
||||
### common
|
||||
|
||||
通用 `style` 参数，所有图形都支持的参数。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------- | -------- | ------------ | ------ |
|
||||
| opacity | `number` | 图形的透明度 | `1` |
|
||||
|
||||
### line
|
||||
|
||||
`shape` 为 `line` 的普通线图层。
|
||||
|
||||
- [line](/zh/docs/api/line_layer/shape#shapeline)
|
||||
- [支持渐变](/zh/docs/api/line_layer/style#linear)
|
||||
- [支持纹理](/zh/docs/api/line_layer/style#texture)
|
||||
- [支持虚线](/zh/docs/api/line_layer/style#dash)
|
||||
- [支持箭头](/zh/docs/api/line_layer/style#arrow)
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------------- | -------------------------- | -------------------------- | ----------- |
|
||||
| borderColor | `string` | 图形边框颜色 | `#fff` |
|
||||
| borderWidth | `number` | 图形边框半径 | `0` |
|
||||
| blur | `[number, number, number]` | 图形模糊分布 | `[1, 1, 1]` |
|
||||
| raisingHeight | `number` | 抬升高度 | `0` |
|
||||
| heightfixed | `boolean` | 抬升高度是否随 `zoom` 变化 | `false` |
|
||||
|
||||
### arc
|
||||
|
||||
`shape` 为 `arc` 平面的弧线。
|
||||
|
||||
- [arc](/zh/docs/api/line_layer/shape#shapearc)
|
||||
- [支持渐变](/zh/docs/api/line_layer/style#linear)
|
||||
- [支持纹理](/zh/docs/api/line_layer/style#texture)
|
||||
- [支持虚线](/zh/docs/api/line_layer/style#dash)
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------------- | -------- | ---------------------------------- | ------- |
|
||||
| segmentNumber | `number` | 弧线分段，分段越多越平滑，消耗越大 | `30` |
|
||||
| thetaOffset | `number` | 弧线的弧度参数 | `0.314` |
|
||||
|
||||
### arc3d
|
||||
|
||||
`shape` 为 `arc3d` 的弧线图层。
|
||||
|
||||
- [arc3d](/zh/docs/api/line_layer/shape#shapearc3d)
|
||||
- [支持渐变](/zh/docs/api/line_layer/style#linear)
|
||||
- [支持纹理](/zh/docs/api/line_layer/style#texture)
|
||||
- [支持虚线](/zh/docs/api/line_layer/style#dash)
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------------- | -------- | ---------------------------------- | ------ |
|
||||
| segmentNumber | `number` | 弧线分段，分段越多越平滑，消耗越大 | `30` |
|
||||
|
||||
### greatcircle
|
||||
|
||||
`shape` 为大圆弧线图层。
|
||||
|
||||
- [greatcircle](/zh/docs/api/line_layer/shape#shapegreatcircle)
|
||||
- [支持渐变](/zh/docs/api/line_layer/style#linear)
|
||||
- [支持纹理](/zh/docs/api/line_layer/style#texture)
|
||||
- [支持虚线](/zh/docs/api/line_layer/style#dash)
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------------- | -------- | ---------------------------------- | ------ |
|
||||
| segmentNumber | `number` | 弧线分段，分段越多越平滑，消耗越大 | `30` |
|
||||
|
||||
### wall
|
||||
|
||||
`shape` 为 `wall` 地理围栏弧线图层。
|
||||
|
||||
- [wall](/zh/docs/api/line_layer/shape#shapewall)
|
||||
- [支持渐变](/zh/docs/api/line_layer/style#linear)
|
||||
- [支持纹理](/zh/docs/api/line_layer/style#texture)
|
||||
|
||||
### simple
|
||||
|
||||
`shape` 为 `simple` 简单线图层。
|
||||
|
||||
- [simple](/zh/docs/api/line_layer/shape#shapesimple)
|
||||
- [支持渐变](/zh/docs/api/line_layer/style#linear)
|
||||
|
||||
### arrow
|
||||
|
||||
- [line](/zh/docs/api/line_layer/shape#shapeline)
|
||||
|
||||
线图层支持配置箭头，箭头有额外的样式。
|
||||
|
||||
```js
|
||||
layer.style({
|
||||
arrow: {
|
||||
enable: true,
|
||||
arrowWidth: 2,
|
||||
arrowHeight: 3,
|
||||
tailWidth: 1,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ----------- | -------------- | ------------ | ------ |
|
||||
| arrow | `IArrowOption` | 箭头的样式 | `/` |
|
||||
| arrowWidth | `number` | 箭头的宽度 | `2` |
|
||||
| arrowHeight | `number` | 箭头的长度 | `3` |
|
||||
| tailWidth | `number` | 箭头尾部宽度 | `1` |
|
||||
|
||||
### linear
|
||||
|
||||
- line、arc、arc3d、greatcircle、wall、simple
|
||||
|
||||
线图层支持配置渐变效果，在配置渐变效果后会覆盖 `layer.color` 方法设置的颜色。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ----------- | ------------ | ---------- | ---------- |
|
||||
| sourceColor | `IColor` | 线起始颜色 | `/` |
|
||||
| targetColor | `IColor` | 线结尾颜色 | `/` |
|
||||
| linearDir | `ILinearDir` | 线渐变方向 | `vertical` |
|
||||
|
||||
#### IColor
|
||||
|
||||
```js
|
||||
const color = `rgb(200, 100, 50)`;
|
||||
const color2 = '#ff0';
|
||||
```
|
||||
|
||||
#### ILinearDir
|
||||
|
||||
- vertical 纵向（沿线方向）
|
||||
- horizontal 横向
|
||||
|
||||
```js
|
||||
type ILinearDir = 'vertical' | 'horizontal';
|
||||
```
|
||||
|
||||
### texture
|
||||
|
||||
- line、arc、arc3d、greatcircle
|
||||
|
||||
线图层支持纹理以及纹理动画，纹理样式有自己的参数。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------------ | --------------- | ------------------------------ | -------- |
|
||||
| lineTexture | `boolean` | 时候开启纹理能力 | `false` |
|
||||
| textureBlend | `ITextureBlend` | 纹理混合方式 | `normal` |
|
||||
| iconStep | `number` | 纹理贴图在线图层上面排布的间隔 | `100` |
|
||||
|
||||
#### ITextureBlend
|
||||
|
||||
线图层的纹理在和线本身的颜色进行融合的时候支持两种，`normal` 和 `replace`。
|
||||
|
||||
- normal 纹理和线颜色混合
|
||||
- replace 使用纹理替换线颜色
|
||||
|
||||
```js
|
||||
type ITextureBlend = 'normal' | 'replace';
|
||||
```
|
||||
|
||||
#### texture advance
|
||||
|
||||
✨ animate
|
||||
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关
|
||||
|
||||
线图层上排列的纹理的数量大致为 duration/interval
|
||||
|
||||
```javascript
|
||||
.animate({
|
||||
duration: 1,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1
|
||||
});
|
||||
|
||||
// 此时 纹理贴图数量为 duration / interval = 5
|
||||
```
|
||||
|
||||
✨ textureBlend 参数
|
||||
通过控制 style 方法中的 textureBlend 参数，我们可以控制纹理图层和线图层的混合情况
|
||||
|
||||
- normal
|
||||
- replace
|
||||
|
||||
```javascript
|
||||
.style({
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 30, // 设置贴图纹理的间距
|
||||
textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### dash
|
||||
|
||||
- line、arc、arc3d、greatcircle
|
||||
|
||||
线图层支持配置虚线，虚线有自己额外的样式参数。
|
||||
|
||||
```js
|
||||
layer.style({
|
||||
lineType: 'dash'
|
||||
dashArray: [5, 5]
|
||||
})
|
||||
```
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| --------- | ------------ | ---------- | ------- |
|
||||
| lineType | `ILineType` | 线的类别 | `solid` |
|
||||
| dashArray | `IDashArray` | 虚线的间隔 | `/` |
|
||||
|
||||
#### ILineType
|
||||
|
||||
- solid 实线
|
||||
- dash 虚线
|
||||
|
||||
#### IDashArray
|
||||
|
||||
`dashArray` 只有在 `ILineType` 为 `solid` 的时候才会生效。
|
||||
|
||||
```js
|
||||
// len1 实线长度 len2 间隔长度
|
||||
type IDashArray = [len1: number, len2: number]
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Texture
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/texture.zh.md`
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Texture
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Wall
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/wall.zh.md`
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
---
|
||||
title: 地理围墙
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
地理围墙在原有线图层的基础上赋予了高度的概念，其他的使用和普通的线图保持一致
|
||||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { LineLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mLfxTb4mI6AAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/line/wall#hangzhou_wall)
|
||||
|
||||
### shape
|
||||
|
||||
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/texture.zh.md`
|
||||
|
||||
🌟 地理围栏支持了新的样式参数 iconStepCount
|
||||
|
||||
- 纹理间隔只有在开启纹理的时候才会生效
|
||||
- 纹理间隔支持配置纹理之间的间距
|
||||
- 纹理间隔需要和纹理间距配合使用
|
||||
|
||||
```javascript
|
||||
.style({
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 40, // 设置贴图纹理的间距
|
||||
iconStepCount: 4
|
||||
})
|
||||
```
|
||||
|
||||
<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*3f8ORIbjJmkAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
#### heightfixed
|
||||
|
||||
wall 支持了固定高度配置 heightfixed
|
||||
|
||||
```javascript
|
||||
.style({
|
||||
heightfixed: true // 默认为 false，开启后实际世界高度不变（注意调整尺寸）
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Map
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/map/map.zh.md`
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
---
|
||||
title: 地图 Map
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理
|
||||
只需要通过 Scene 传入地图配置项即可。
|
||||
|
||||
L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
目前 L7 支持两种地图底图
|
||||
|
||||
- 高德地图 国内业务场景 合规中国地图
|
||||
- MapBox 国际业务，或者内网离线部署场景
|
||||
|
||||
### import
|
||||
|
||||
```javascript
|
||||
import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德1.x
|
||||
import { GaodeMapV2 } from '@antv/l7-maps'; // 默认引入高德2.0 版本
|
||||
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
```
|
||||
|
||||
### 实例化
|
||||
|
||||
⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用
|
||||
|
||||
#### 高德地图实例化
|
||||
|
||||
高德地图 API 配置参数
|
||||
|
||||
- token
|
||||
注册高德 [API token](https://lbs.amap.com/api/javascript-api/guide/abc/prepare)
|
||||
|
||||
- plugin {array} `['AMap.ElasticMarker','AMap.CircleEditor']`
|
||||
|
||||
加载[高德地图插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins)
|
||||
|
||||
```javascript
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
token: 'xxxx - token',
|
||||
plugin: [], // 可以不设置
|
||||
});
|
||||
```
|
||||
|
||||
#### Mapbox 地图实例化
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [103.83735604457024, 1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
token: 'xxxx - token',
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
### 传入外部实例
|
||||
|
||||
为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
|
||||
|
||||
⚠️ scene id 参数需要地图的 Map 实例是同个容器。
|
||||
|
||||
⚠️ 传入地图实例需要自行引入相关地图的 API
|
||||
|
||||
⚠️ viewMode 设置为 3D 模式（GaodeMap2.0 支持 2D 模式，可以不设置）
|
||||
|
||||
#### 传入高德地图实例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
[示例地址](/zh/examples/tutorial/map#amapInstance)
|
||||
[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
|
||||
|
||||
[示例地址（ 2D ）](/zh/examples/tutorial/map#amapInstance2d)
|
||||
[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
|
||||
|
||||
#### 传入 Mapbox 地图实例
|
||||
|
||||
```javascript
|
||||
mapboxgl.accessToken = 'xxxx - token';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
## options
|
||||
|
||||
### zoom 初始化缩放等级
|
||||
|
||||
<description> _number_ </description>
|
||||
|
||||
地图初始显示级别 {number} Mapbox （0-24） 高德 （2-19）
|
||||
|
||||
### center 地图中心
|
||||
|
||||
地图初始中心经纬度 {Lnglat}
|
||||
|
||||
### pitch 地图倾角
|
||||
|
||||
地图初始俯仰角度 {number} default 0
|
||||
|
||||
### style 地图图样式
|
||||
|
||||
简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用
|
||||
|
||||
- dark
|
||||
- light
|
||||
- normal
|
||||
- blank 无底图
|
||||
|
||||
除了内置的样式，你也可以传入自定义的其他属性。
|
||||
|
||||
比如高德地图
|
||||
|
||||
⚠️ 高德地图样式 增加 `isPublic=true` 参数
|
||||
|
||||
```javascript
|
||||
{
|
||||
style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
|
||||
}
|
||||
```
|
||||
|
||||
### minZoom 最小缩放等级
|
||||
|
||||
地图最小缩放等级 {number} default 0 Mapbox 0-24） 高德 （2-19）
|
||||
|
||||
### maxZoom 最大缩放等级
|
||||
|
||||
地图最大缩放等级 {number} default 22 Mapbox（0-24） 高德 （2-19）
|
||||
|
||||
### rotateEnable 是否允许旋转
|
||||
|
||||
地图是否可旋转 {Boolean} default true
|
||||
|
||||
## 注册使用高德插件
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [116.475, 39.99],
|
||||
pitch: 0,
|
||||
zoom: 13,
|
||||
plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
|
||||
}),
|
||||
});
|
||||
// plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
|
||||
// 为了使用对应插件的能力，应该首先在 plugin 中注册对应的插件
|
||||
|
||||
// 加载的 AMap 会挂载在全局的 window 对象上
|
||||
scene.on('loaded', () => {
|
||||
window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
|
||||
// add control
|
||||
scene.map.addControl(new AMap.ToolBar());
|
||||
|
||||
var linesearch = new AMap.LineSearch({
|
||||
pageIndex: 1, //页码，默认值为1
|
||||
pageSize: 1, //单页显示结果条数，默认值为20，最大值为50
|
||||
city: '北京', //限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』
|
||||
extensions: 'all', //是否返回公交线路详细信息，默认值为『base』
|
||||
});
|
||||
|
||||
//执行公交路线关键字查询
|
||||
linesearch.search('536', function(status, result) {
|
||||
//打印状态信息status和结果信息result
|
||||
// ... do something
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ag-nSrIPPEUAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/amapPlugin/bus#busStop)
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
---
|
||||
title: Map
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。
|
||||
L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
## Map
|
||||
|
||||
### 引入 Map
|
||||
|
||||
```javascript
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
```
|
||||
|
||||
### 实例化
|
||||
|
||||
⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用
|
||||
|
||||
#### 高德地图实例化
|
||||
|
||||
高德地图 API 配置参数
|
||||
|
||||
- token
|
||||
注册高德 [API token](https://lbs.amap.com/api/javascript-api/guide/abc/prepare)
|
||||
|
||||
- plugin {array} `['AMap.ElasticMarker','AMap.CircleEditor']`
|
||||
|
||||
加载[高德地图插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins)
|
||||
|
||||
```javascript
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
token: 'xxxx - token',
|
||||
plugin: [], // 可以不设置
|
||||
});
|
||||
```
|
||||
|
||||
#### Mapbox 地图实例化
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [103.83735604457024, 1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
token: 'xxxx - token',
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
### 传入外部实例
|
||||
|
||||
为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
|
||||
|
||||
⚠️ scene id 参数需要地图的 Map 实例是同个容器。
|
||||
|
||||
⚠️ 传入地图实例需要自行引入相关地图的 API
|
||||
|
||||
⚠️ viewMode 设置为 3D 模式
|
||||
|
||||
#### 传入高德地图实例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
[示例地址](/zh/examples/tutorial/map#amapInstance)
|
||||
[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
|
||||
|
||||
#### 传入 Mapbox 地图实例
|
||||
|
||||
```javascript
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
---
|
||||
title: 地图 Map
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。
|
||||
L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
## Map
|
||||
|
||||
### 引入 Map
|
||||
|
||||
```javascript
|
||||
import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德1.x
|
||||
import { GaodeMapV2 } from '@antv/l7-maps'; // 默认引入高德2.0 版本
|
||||
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
```
|
||||
|
||||
### 实例化
|
||||
|
||||
⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用
|
||||
|
||||
#### 高德地图实例化
|
||||
|
||||
高德地图 API 配置参数
|
||||
|
||||
- token
|
||||
注册高德 [API token](https://lbs.amap.com/api/javascript-api/guide/abc/prepare)
|
||||
|
||||
- plugin {array} `['AMap.ElasticMarker','AMap.CircleEditor']`
|
||||
|
||||
加载[高德地图插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins)
|
||||
|
||||
```javascript
|
||||
const L7AMap = new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
center: [104.288144, 31.239692],
|
||||
zoom: 4.4,
|
||||
token: 'xxxx - token',
|
||||
plugin: [], // 可以不设置
|
||||
});
|
||||
```
|
||||
|
||||
#### Mapbox 地图实例化
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [103.83735604457024, 1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
token: 'xxxx - token',
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
### 传入外部实例
|
||||
|
||||
为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
|
||||
|
||||
⚠️ scene id 参数需要地图的 Map 实例是同个容器。
|
||||
|
||||
⚠️ 传入地图实例需要自行引入相关地图的 API
|
||||
|
||||
⚠️ viewMode 设置为 3D 模式（GaodeMap2.0 支持 2D 模式，可以不设置）
|
||||
|
||||
#### 传入高德地图实例
|
||||
|
||||
```javascript
|
||||
const map = new AMap.Map('map', {
|
||||
viewMode: '3D',
|
||||
resizeEnable: true, // 是否监控地图容器尺寸变化
|
||||
zoom: 11, // 初始化地图层级
|
||||
center: [116.397428, 39.90923], // 初始化地图中心点
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
[示例地址](/zh/examples/tutorial/map#amapInstance)
|
||||
[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
|
||||
|
||||
[示例地址（ 2D ）](/zh/examples/tutorial/map#amapInstance2d)
|
||||
[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
|
||||
|
||||
#### 传入 Mapbox 地图实例
|
||||
|
||||
```javascript
|
||||
mapboxgl.accessToken = 'xxxx - token';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container id
|
||||
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
|
||||
center: [-74.5, 40], // starting position [lng, lat]
|
||||
zoom: 9, // starting zoom
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
mapInstance: map,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Amap Plugin
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/amapPlugin/plugin.zh.md`
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
title: 高德插件
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
L7 在使用高德地图作为地图底图的时候能轻易的使用高德地图底图提供的插件能力
|
||||
|
||||
## 注册使用
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [116.475, 39.99],
|
||||
pitch: 0,
|
||||
zoom: 13,
|
||||
plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
|
||||
}),
|
||||
});
|
||||
// plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
|
||||
// 为了使用对应插件的能力，应该首先在 plugin 中注册对应的插件
|
||||
|
||||
// 加载的 AMap 会挂载在全局的 window 对象上
|
||||
scene.on('loaded', () => {
|
||||
window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
|
||||
// add control
|
||||
scene.map.addControl(new AMap.ToolBar());
|
||||
|
||||
var linesearch = new AMap.LineSearch({
|
||||
pageIndex: 1, //页码，默认值为1
|
||||
pageSize: 1, //单页显示结果条数，默认值为20，最大值为50
|
||||
city: '北京', //限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』
|
||||
extensions: 'all', //是否返回公交线路详细信息，默认值为『base』
|
||||
});
|
||||
|
||||
//执行公交路线关键字查询
|
||||
linesearch.search('536', function(status, result) {
|
||||
//打印状态信息status和结果信息result
|
||||
// ... do something
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ag-nSrIPPEUAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/amapPlugin/bus#busStop)
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: CityBuild
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/other/cityBuilding.zh.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: mask
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/api/other/mask.zh.md`
|
||||
|
|
@ -70,6 +70,6 @@ const scene = new Scene({
|
|||
const layer = new RasterLayer({ mask: true });
|
||||
```
|
||||
|
||||
[在线案例](../../../examples/raster/basic#dem)
|
||||
[在线案例](/zh/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">
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: PlaneGeometry
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/api/other/plane.zh.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: SpriteGeometry
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/other/sprite.zh.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Animate
|
||||
order: 7
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/animate.zh.md`
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
title: Animate
|
||||
order: 7
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
点图层在开启 `animate` 方法后根据点是 `2D` 点还是 `3D` 点支持两种不同的动画：水波点和生长动画。
|
||||
点图层在开启 `animate` 方法后会得到特殊的水波图形。图层由一圈圈向外扩散的圆环构成。
|
||||
|
||||
<div>
|
||||
<div style="width:80%;float:left; margin: 16px;">
|
||||
<img style="float:left;" width="50%" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*pcp3RKnNK1oAAAAAAAAAAAAAARQnAQ'>
|
||||
<img style="float:left;" width="50%" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*l-SUQ5nU6n8AAAAAAAAAAAAAARQnAQ'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### 水波点
|
||||
|
||||
#### animate(boolean | IAnimateOption)
|
||||
|
||||
`animate` 方法支持布尔值和对象传值。
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
|
||||
layer.animate({
|
||||
enable: true,
|
||||
});
|
||||
```
|
||||
|
||||
#### IAnimateOption
|
||||
|
||||
```javascript
|
||||
interface IAnimateOption {
|
||||
enable: boolean;
|
||||
speed: number;
|
||||
rings: number;
|
||||
}
|
||||
```
|
||||
|
||||
### 生长动画
|
||||
|
||||
#### animate(boolean | IAnimateOption)
|
||||
|
||||
`animate` 方法支持布尔值和对象传值。
|
||||
|
||||
```javascript
|
||||
animate(true)
|
||||
animate(false)
|
||||
|
||||
animate(animateOptions)
|
||||
|
||||
interface IAnimateOptions: {
|
||||
enable: boolean;
|
||||
speed?: number = 0.01;
|
||||
repeat?: number = 1;
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
#### IAnimateOptions
|
||||
|
||||
|
||||
|
||||
`animate` 方法的参数：
|
||||
|
||||
- `enable` 是否开启动画，布尔值，默认为 `false`。
|
||||
- `speed` 生长速度，数值，默认为 `0.01`。
|
||||
- `repeat` 生长动画的播放次数，数值，默认为 `1`。
|
||||
```
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Bubble Map
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/bubble.zh.md`
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
---
|
||||
title: 气泡图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
气泡图通过 PointLayer 对象实例化，
|
||||
|
||||
```javascript
|
||||
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*fNGiS7YI1tIAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
### shape
|
||||
|
||||
通常气泡图 shape 设置为 **circle**
|
||||
|
||||
### size
|
||||
|
||||
气泡图大小，需要指定数据映射字段
|
||||
|
||||
```javascript
|
||||
const bubble = new PointLayer()
|
||||
.source(data)
|
||||
.shape(circle)
|
||||
.size('mag', [0, 25])
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
### animate
|
||||
|
||||
气泡图支持水波动画效果
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 水波配置项
|
||||
|
||||
- speed 水波速度
|
||||
- rings 水波环数
|
||||
|
||||
[在线案例](../../../examples/point/bubble#point)
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Chart Map
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/chart.zh.md`
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
||||
通过自定义 Marker 实现自定义图表
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6AR6Qq0Bq-MAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/point/chart#bar)
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Cluster Map
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/cluster.zh.md`
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
---
|
||||
title: 聚合图
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
||||
目前只有点数据支持聚类方法
|
||||
|
||||
数据聚合主要从数据层数据，因此需要在 Source 方法配置 cluster 参数
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
### source
|
||||
|
||||
[source 文档](../source/source)
|
||||
|
||||
### option
|
||||
|
||||
- cluster **boolean** 是否聚合
|
||||
- clusterOption 聚合配置项
|
||||
- radius 聚合半径 **number** default 40
|
||||
- minZoom: 最小聚合缩放等级 **number** default 0
|
||||
- maxZoom: 最大聚合缩放等级 **number** default 16
|
||||
|
||||
数据聚合之后，数据会增加 point_count 属性，在可视化渲染时可以根据 point_count 进行数据映射。
|
||||
|
||||
### layer functions
|
||||
|
||||
**getClusters(zoom: number)**
|
||||
|
||||
获取指定缩放等级的聚合数据
|
||||
|
||||
- zoom 缩放等级
|
||||
|
||||
**getClustersLeaves(id: string)**
|
||||
|
||||
根据 id 获取聚合节点的数据，每个聚合节点会有一个唯一 ID
|
||||
|
||||
- id 聚合数据 id
|
||||
|
||||
```javascript
|
||||
layer.source(pointsData, {
|
||||
cluster: true,
|
||||
});
|
||||
|
||||
// 设置配置项
|
||||
layer.source(pointsData, {
|
||||
cluster: true,
|
||||
clusterOption: {
|
||||
radius: 40,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### origin data
|
||||
|
||||
获取聚合节点的原始数据,通过 Source 的 getClustersLeaves 方法
|
||||
|
||||
```javascript
|
||||
const source = layer.getSource();
|
||||
source.getClustersLeaves(id);
|
||||
layer.on('click', (e) => {
|
||||
console.log(source.getClustersLeaves(e.feature.cluster_id));
|
||||
});
|
||||
```
|
||||
|
||||
### demo
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(pointsData, {
|
||||
cluster: true,
|
||||
})
|
||||
.shape('circle')
|
||||
.scale('point_count', {
|
||||
type: 'quantile',
|
||||
})
|
||||
.size('point_count', [5, 10, 15, 20, 25])
|
||||
// .size(10)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
[在线案例](../../../examples/point/cluster#cluster)
|
||||
|
||||
### FAQ
|
||||
|
||||
PointLayer 的聚合图采用 WebGL 绘制，不支持自定义具体聚合样式，如果有自定义的需求可以使用 MarkerLayer 的聚合功能，你可以通过 Dom 完全自定义样式。
|
||||
|
||||
[MarkerLayer 聚合](../component/markerLayer)
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Color
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/color.zh.md`
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Color
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/common/layer/color.md`
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: 3D Column
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/column.zh.md`
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue