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'`
|
**平面点: circle**
|
||||||
- 圆柱点: `shape: 'cylinder'`
|
|
||||||
|
<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` 提供了地球系统的相机系统，目前只需要传入一个空对象。
|
作为 l7-maps 的基础地图类型，`Earth` 提供了地球系统的相机系统，目前只需要传入一个空对象。
|
||||||
|
|
||||||
- args: {}
|
- args: **{}**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Scene, Earth } from '@antv/l7-maps';
|
import { Scene, Earth } from '@antv/l7-maps';
|
||||||
|
|
|
||||||
|
|
@ -5,56 +5,24 @@ order: 3
|
||||||
|
|
||||||
`markdown:docs/common/style.md`
|
`markdown:docs/common/style.md`
|
||||||
|
|
||||||
## 简介
|
|
||||||
|
|
||||||
用户在地球模式下使用飞线图层无需做额外的操作，L7 会自动识别地球模式并相关的转化
|
用户在地球模式下使用飞线图层无需做额外的操作，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
|
```javascript
|
||||||
import { Scene, EarthLayer, LineLayer } from '@antv/l7';
|
import { 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);
|
|
||||||
});
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<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`
|
`markdown:docs/common/style.md`
|
||||||
|
|
||||||
## 简介
|
|
||||||
|
|
||||||
用户在地球模式下使用点图层无需做额外的操作，L7 会自动识别地球模式并相关的转化
|
用户在地球模式下使用点图层无需做额外的操作，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
|
```javascript
|
||||||
import { Scene, PointLayer, EarthLayer } from '@antv/l7';
|
import { 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);
|
|
||||||
});
|
|
||||||
```
|
```
|
||||||
|
<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