mirror of https://gitee.com/antv-l7/antv-l7
143 lines
2.9 KiB
Markdown
143 lines
2.9 KiB
Markdown
---
|
||
title: LineLayer
|
||
order: 2
|
||
---
|
||
`markdown:docs/common/style.md`
|
||
## 线图层
|
||
|
||
### shape
|
||
|
||
线图层支持 4 种 shape
|
||
|
||
- line 绘制路径图，
|
||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||
- arc3d 3d 弧线地图 3D 视角
|
||
|
||
⚠️ 弧线只需要设置起止点坐标即可
|
||
|
||
```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
|
||
]
|
||
]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
```
|
||
|
||
### size
|
||
|
||
线图层 可以设置高度
|
||
|
||
- size 类型为 number 则表示 line 的宽度
|
||
- size 类型为 [number , number] 分别表示宽度和高度
|
||
|
||
```javascript
|
||
lineLayer.size(1); // 线的宽度为 1
|
||
lineLayer.size([1, 2]); // 宽度为1，高度2
|
||
```
|
||
|
||
### 设置渐变色
|
||
|
||
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
|
||
|
||
|
||
```javascript
|
||
const layer = new LineLayer({})
|
||
.source(data, {
|
||
parser: {
|
||
type: 'csv',
|
||
x: 'lng1',
|
||
y: 'lat1',
|
||
x1: 'lng2',
|
||
y1: 'lat2',
|
||
},
|
||
})
|
||
.size(1)
|
||
.shape('arc')
|
||
.color('#8C1EB2')
|
||
.style({
|
||
sourceColor: '#f00', // 起点颜色
|
||
targetColor: '#0f0' // 终点颜色
|
||
});
|
||
```
|
||
|
||
### 设置顶点高度
|
||
线图层支持给每个顶点赋予高度值，同时允许用户在 style 方法中通过 vertexHeightScale 属性设置高度比例。
|
||
|
||
```javascript
|
||
const layer = new LineLayer({})
|
||
.source(data)
|
||
.size(1)
|
||
.shape('line')
|
||
.style({
|
||
vertexHeightScale: 30,
|
||
})
|
||
.color('#ccc');
|
||
|
||
scene.addLayer(layer);
|
||
```
|
||
|
||
带有高度值的数据
|
||
|
||
```javascript
|
||
{
|
||
"type": "FeatureCollection",
|
||
"name": "tw",
|
||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||
"features": [
|
||
{
|
||
"type": "Feature",
|
||
"properties": { },
|
||
"geometry": {
|
||
"type": "LineString", "coordinates":
|
||
[
|
||
[ 121.519153647, 25.288692533, 41.0 ],
|
||
[ 121.529153646999987, 25.288692533, 35.0 ],
|
||
[ 121.539153647, 25.288692533, 27.0 ],
|
||
[ 121.549153647, 25.288692533, 66.0 ],
|
||
[ 121.559153646999988, 25.288692533, 83.0 ],
|
||
[ 121.569153647, 25.288692533, 88.0 ]
|
||
]
|
||
}
|
||
},
|
||
...
|
||
}
|
||
|
||
```
|
||
[使用完整 demo](../../../examples/line/isoline#height)
|
||
|
||
`markdown:docs/common/layer/base.md`
|