mirror of https://gitee.com/antv-l7/antv-l7
parent
b2ef5d815d
commit
294142e936
|
@ -54,14 +54,33 @@ layer.animatte({
|
||||||
time : 时间 毫秒
|
time : 时间 毫秒
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { CityBuildingLayer } from '@antv/l7';
|
import { CityBuildingLayer, Scene } from '@antv/l7';
|
||||||
|
import { Mapbox } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new Mapbox({
|
||||||
|
style: 'dark',
|
||||||
|
center: [121.507674, 31.223043],
|
||||||
|
pitch: 65.59312320916906,
|
||||||
|
zoom: 15.4,
|
||||||
|
minZoom: 15,
|
||||||
|
maxZoom: 18,
|
||||||
|
}),
|
||||||
|
});
|
||||||
const buildingLayer = new CityBuildingLayer();
|
const buildingLayer = new CityBuildingLayer();
|
||||||
buildingLayer.animate(false);
|
buildingLayer.animate(false);
|
||||||
|
|
||||||
setInterval(() => {
|
let i = 0;
|
||||||
buildingLayer.setLight(Date.now());
|
function step() {
|
||||||
}, 2000);
|
pointLayer.setLight(i++);
|
||||||
|
scene.render();
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
step();
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 完整代码
|
#### 完整代码
|
||||||
|
|
|
@ -112,7 +112,7 @@ function step() {
|
||||||
mapService.rotateY({
|
mapService.rotateY({
|
||||||
option: {
|
option: {
|
||||||
force: true,
|
force: true,
|
||||||
reg: .1,
|
reg: 0.1,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
requestAnimationFrame(step);
|
requestAnimationFrame(step);
|
||||||
|
@ -120,7 +120,7 @@ function step() {
|
||||||
|
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
scene.addLayer(earthlayer);
|
scene.addLayer(earthlayer);
|
||||||
requestAnimationFrame(step);
|
step();
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -171,7 +171,7 @@ const earthlayer = new EarthLayer()
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i_TBRZRLSuYAAAAAAAAAAAAAARQnAQ" alt="L7 地球图层" width="300" height="300">
|
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i_TBRZRLSuYAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层" width="300" height="300">
|
||||||
|
|
||||||
### 地球内发光/大气图层 atomLayer
|
### 地球内发光/大气图层 atomLayer
|
||||||
|
|
||||||
|
@ -187,7 +187,7 @@ const atomLayer = new EarthLayer()
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1MU_RZQyFTkAAAAAAAAAAAAAARQnAQ" alt="L7 地球图层大气效果" width="300" height="300" >
|
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1MU_RZQyFTkAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层大气效果" width="300" height="300" >
|
||||||
|
|
||||||
### 地球内外发光/辉光图层 bloomLayer
|
### 地球内外发光/辉光图层 bloomLayer
|
||||||
|
|
||||||
|
@ -202,4 +202,4 @@ const bloomLayer = new EarthLayer()
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FTniTZOZkNUAAAAAAAAAAAAAARQnAQ" alt="L7 地球图层辉光效果" width="300" height="300" >
|
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FTniTZOZkNUAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层辉光效果" width="300" height="300" >
|
||||||
|
|
|
@ -9,7 +9,7 @@ order: 3
|
||||||
|
|
||||||
用户在地球模式下使用飞线图层无需做额外的操作,L7 会自动识别地球模式并相关的转化
|
用户在地球模式下使用飞线图层无需做额外的操作,L7 会自动识别地球模式并相关的转化
|
||||||
|
|
||||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4ZCnQaH_nLIAAAAAAAAAAAAAARQnAQ" alt="L7地球飞线图层" width="300" height="300">
|
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4ZCnQaH_nLIAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7地球飞线图层" width="300" height="300">
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@ order: 3
|
||||||
|
|
||||||
## 示例图片
|
## 示例图片
|
||||||
|
|
||||||
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ck1XSZ4Vw0QAAAAAAAAAAAAAARQnAQ" alt="L7 地球点图层" width="300" height="300" >
|
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ck1XSZ4Vw0QAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球点图层" width="300" height="300" >
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
|
|
|
@ -5,9 +5,9 @@ order: 5
|
||||||
|
|
||||||
`markdown:docs/common/style.md`
|
`markdown:docs/common/style.md`
|
||||||
|
|
||||||
Raster 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。
|
`RasterLayer` 图层主要实现栅格数据的可视化,栅格数据主要来源是卫星遥感数据,如数字高程图,植被分布图,夜光图。
|
||||||
|
|
||||||
L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为 Source 传入。
|
L7 本身内部没有提供栅格数据格式 如 `tiff`,需要外部解析好做为 `Source` 传入。
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
|
@ -21,26 +21,21 @@ import { RasterLayer } from '@antv/l7';
|
||||||
|
|
||||||
## shape
|
## shape
|
||||||
|
|
||||||
`raster`
|
仅支持 `raster`
|
||||||
|
|
||||||
## size
|
|
||||||
|
|
||||||
无
|
|
||||||
|
|
||||||
## color
|
|
||||||
|
|
||||||
无
|
|
||||||
|
|
||||||
## style
|
## style
|
||||||
|
|
||||||
- clampLow Boolean 默认 false, 设置为 true,低于 domain 的数据将不显示
|
- `clampLow`: `Boolean` 默认 false, 设置为 true,低于 domain 的数据将不显示
|
||||||
- clampHigh Boolean 默认 false, 设置为 true,高于 domain 的数据将不显示
|
- `clampHigh`: `Boolean` 默认 false, 设置为 true,高于 domain 的数据将不显示
|
||||||
- opacity: 0.8 Number 透明度
|
- `opacity`: `Number`, 默认值为 0.8 透明度
|
||||||
- domain: [ 0, 8000 ] 数据映射区间
|
- `domain`: [ 0, 8000 ] 数据映射区间
|
||||||
- noDataValue Number noDataValue 不会显示
|
- `noDataValue` `Number` noDataValue 不会显示
|
||||||
- rampColors: {
|
- `rampColors`: {
|
||||||
colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ],
|
|
||||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
`colors`: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ],
|
||||||
|
|
||||||
|
`positions`: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||||
|
|
||||||
} // 色带
|
} // 色带
|
||||||
|
|
||||||
⚠️ color, position 的长度要相同
|
⚠️ `color`, `position` 的长度要相同
|
||||||
|
|
Loading…
Reference in New Issue