mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' of https://github.com/antvis/L7
This commit is contained in:
shihui
commit
f9aa0ef829
|
|
@ -20,12 +20,19 @@ import { Earth } from '@antv/l7-maps';
|
|||
|
||||
### 点图层
|
||||
|
||||
- 平面点: `shape: 'circle'`
|
||||
- 圆柱点: `shape: 'cylinder'`
|
||||
**平面点: circle**
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*PD6fTbs7E3gAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
**圆柱点: cylinder**
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*n6tYQKceveUAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
### 线图层
|
||||
|
||||
- 3D 弧线: `shape: 'arc3d'`
|
||||
**3D 弧线: arc3d**
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FjhGT77aCaIAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
@ -79,7 +86,7 @@ scene.on('loaded', () => {
|
|||
|
||||
作为 l7-maps 的基础地图类型，`Earth` 提供了地球系统的相机系统，目前只需要传入一个空对象。
|
||||
|
||||
- args: {}
|
||||
- args: **{}**
|
||||
|
||||
```js
|
||||
import { Scene, Earth } from '@antv/l7-maps';
|
||||
|
|
|
|||
|
|
@ -5,56 +5,24 @@ order: 3
|
|||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
用户在地球模式下使用飞线图层无需做额外的操作，L7 会自动识别地球模式并相关的转化
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4ZCnQaH_nLIAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7地球飞线图层" width="60%">
|
||||
|
||||
## 使用
|
||||
|
||||
地球飞线图通过 `LineLayer` 和 `EarthLayer` 实例化
|
||||
|
||||
```javascript
|
||||
import { Scene, EarthLayer, LineLayer } from '@antv/l7';
|
||||
import { Earth } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Earth({}),
|
||||
});
|
||||
|
||||
const flydata = [
|
||||
{
|
||||
coord: [
|
||||
[104.195397, 35.86166],
|
||||
[100.992541, 15.870032],
|
||||
],
|
||||
},
|
||||
];
|
||||
const flyLine = new LineLayer({ blend: 'normal' })
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord',
|
||||
},
|
||||
})
|
||||
.color('#b97feb')
|
||||
.shape('arc3d')
|
||||
.size(0.5);
|
||||
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
},
|
||||
},
|
||||
)
|
||||
.color('#2E8AE6')
|
||||
.shape('base');
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(earthlayer);
|
||||
scene.addLayer(flyLine);
|
||||
earthlayer.setEarthTime(4.0);
|
||||
});
|
||||
import { EarthLayer, LineLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4ZCnQaH_nLIAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7地球飞线图层" width="60%">
|
||||
|
||||
### shape
|
||||
|
||||
地球飞线图层 shape 只支持 **arc3d**
|
||||
|
||||
### 其他配置
|
||||
剩下的配置和[线图层](../line_layer/linelayer)一致
|
||||
|
||||
[在线案例](../../../examples/earth/arc3d#flyline)
|
||||
|
|
|
|||
|
|
@ -5,56 +5,17 @@ order: 3
|
|||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
||||
用户在地球模式下使用点图层无需做额外的操作，L7 会自动识别地球模式并相关的转化
|
||||
|
||||
## 示例图片
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ck1XSZ4Vw0QAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球点图层" width="60%" >
|
||||
|
||||
## 使用
|
||||
|
||||
地球点图层通过 `PointLayer` 和 `EarthLayer` 实例化
|
||||
|
||||
```javascript
|
||||
import { Scene, PointLayer, EarthLayer } from '@antv/l7';
|
||||
import { Earth } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Earth({}),
|
||||
});
|
||||
|
||||
const d = [{ lng: 121.61865234375, lat: 25.29437116258816 }];
|
||||
|
||||
const pointlayer = new PointLayer()
|
||||
.source(d, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#f00')
|
||||
.size(10)
|
||||
.active(true);
|
||||
|
||||
const earthlayer = new EarthLayer()
|
||||
.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
},
|
||||
},
|
||||
)
|
||||
.style({
|
||||
globelOtions: {
|
||||
ambientRatio: 1, // 环境光
|
||||
},
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(earthlayer);
|
||||
scene.addLayer(pointlayer);
|
||||
});
|
||||
import { PointLayer, EarthLayer } from '@antv/l7';
|
||||
```
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ck1XSZ4Vw0QAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球点图层" width="60%" >
|
||||
[在线案例](../../../examples/earth/point#point)
|
||||
|
||||
### 配置项
|
||||
和 [`PontLayer`](../point_layer/pointlayer) 一致
|
||||
Loading…
Reference in New Issue