mirror of https://gitee.com/antv-l7/antv-l7
docs: add animate docs
This commit is contained in:
thinkinggis
parent
6f9fe7fe63
commit
ad3823d718
|
|
@ -64,6 +64,7 @@ module.exports = api => {
|
|||
'@babel/preset-typescript'
|
||||
],
|
||||
plugins: [
|
||||
isCDNBundle ? {} : '@babel/plugin-transform-runtime',
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||
|
|
@ -113,8 +114,6 @@ module.exports = api => {
|
|||
// isCDNBundle ? 'inline-webgl-constants' : {},
|
||||
],
|
||||
ignore: [
|
||||
/[\/\\]core-js/,
|
||||
/@babel[\/\\]runtime/,
|
||||
'node_modules',
|
||||
...!isTest ? [
|
||||
'**/*.test.tsx',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: CityBuilding
|
||||
order: 6
|
||||
---
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
---
|
||||
title: 城市建筑
|
||||
order: 6
|
||||
---
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { CityBuildingLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
### source
|
||||
|
||||
同 [PolygonLayer](./polygon_layer/extrude)
|
||||
|
||||
### size
|
||||
|
||||
同 [PolygonLayer](./polygon_layer/extrude)
|
||||
|
||||
### color
|
||||
|
||||
[PolygonLayer](./polygon_layer/extrude)
|
||||
|
||||
### animate
|
||||
开启动画效果
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
```
|
||||
### style
|
||||
- baseColor 楼房颜色,
|
||||
- windowColor: 窗户颜色,
|
||||
- brightColor: 点亮窗户颜色
|
||||
|
||||
其他style配置项同
|
||||
|
||||
[layer#style](./layer#style)
|
||||
|
||||
#### 完整代码
|
||||
|
||||
``` javascript
|
||||
|
||||
const pointLayer = new CityBuildingLayer();
|
||||
pointLayer
|
||||
.source(await response.json())
|
||||
.size('floor', [0, 500])
|
||||
.color('rgba(242,246,250,1.0)')
|
||||
.animate({
|
||||
enable: true,
|
||||
})
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
baseColor: 'rgb(16,16,16)',
|
||||
windowColor: 'rgb(30,60,89)',
|
||||
brightColor: 'rgb(255,176,38)',
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
|
@ -50,3 +50,26 @@ const layer = new LineLayer({})
|
|||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
### animate
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
layer.animate(false)
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
||||
- duration 动画时间 单位(s)秒
|
||||
- interval 轨迹间隔, 取值区间 0 - 1
|
||||
- trailLength 轨迹长度 取值区间 0 - 1
|
||||
|
||||
```javascript
|
||||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1
|
||||
|
||||
})
|
||||
```
|
||||
|
|
|
|||
|
|
@ -21,4 +21,6 @@ shape 设置成line即可绘制路线图
|
|||
|
||||
layer.size('',[])
|
||||
```
|
||||
### animate
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ order: 1
|
|||
|
||||
气泡图通过PointLayer对象实例化，
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from '@antv/l7';
|
||||
|
||||
```
|
||||
### shape
|
||||
|
||||
通常气泡图shape 设置为 **circle**
|
||||
|
|
@ -29,6 +33,24 @@ new PointLayer()
|
|||
strokeWidth: 1
|
||||
})
|
||||
```
|
||||
|
||||
### animate
|
||||
|
||||
气泡图支持水波动画效果
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true)
|
||||
layer.animate(false)
|
||||
```
|
||||
#### 水波配置项
|
||||
|
||||
- speed 水波速度
|
||||
- rings 水波环数
|
||||
|
||||
|
||||
|
||||
## tips
|
||||
|
||||
目前style的配置项只支持全局设置，不支持数据映射。
|
||||
|
|
|
|||
|
|
@ -2,3 +2,32 @@
|
|||
title: 3D填充图
|
||||
order: 1
|
||||
---
|
||||
## 使用
|
||||
```javascript
|
||||
import { PolygonLayer } from '@antv/l7'
|
||||
const layer = new PolygonLayer();
|
||||
```
|
||||
### shape
|
||||
3D Polygon 将多边形沿Z轴向上拉伸
|
||||
- extrude 常量不支持数据映射
|
||||
|
||||
```javascript
|
||||
layer.shape('extrude');
|
||||
```
|
||||
|
||||
### size
|
||||
size代表拉伸的高度，支持数据映射
|
||||
|
||||
```javascript
|
||||
layer.size(10);// 高度设置成常量
|
||||
layer.size('floor', [0,2000]); // 根据floor字段进行数据映射默认为线
|
||||
layer.size('floor', (floor) => { // 通过回调函数设置size
|
||||
return floor * 2
|
||||
})
|
||||
```
|
||||
### color
|
||||
同 [layer#color](../layer/#color)
|
||||
|
||||
### style
|
||||
同 [layer#style](../layer/#style)
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,23 @@
|
|||
title: 填充图
|
||||
order: 1
|
||||
---
|
||||
## 使用
|
||||
```javascript
|
||||
import { PolygonLayer } from '@antv/l7'
|
||||
const layer = new PolygonLayer();
|
||||
```
|
||||
### shape
|
||||
绘制填充图，shape为```fill``` 常量不支持数据映射
|
||||
|
||||
```javascript
|
||||
layer.shape('fill');
|
||||
```
|
||||
|
||||
### size
|
||||
填充图无size不需要设置size
|
||||
### color
|
||||
同 [layer#color](../layer/#color)
|
||||
|
||||
### style
|
||||
同 [layer#style](../layer/#style)
|
||||
|
||||
|
|
|
|||
|
|
@ -75,6 +75,8 @@ const scene = new Scene({
|
|||
}),
|
||||
});
|
||||
```
|
||||
[示例地址](/zh/examples/tutorial/map#amapInstance)
|
||||
[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
|
||||
|
||||
#### 传入 Mapbox 地图实例
|
||||
|
||||
|
|
|
|||
|
|
@ -117,6 +117,14 @@ module.exports = {
|
|||
},
|
||||
order: 4
|
||||
},
|
||||
{
|
||||
slug: 'api/layer/cityBuilding',
|
||||
title: {
|
||||
zh: '城市建筑',
|
||||
en: 'CityBuilding'
|
||||
},
|
||||
order: 6
|
||||
},
|
||||
{
|
||||
slug: 'api/source',
|
||||
title: {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
"@types/enzyme-adapter-react-16": "^1.0.3",
|
||||
"@types/gl": "^4.1.0",
|
||||
"@types/jest": "^24.0.18",
|
||||
"@types/node": "^12.7.3",
|
||||
"@types/node": "^12.12.22",
|
||||
"@types/storybook__react": "^4.0.2",
|
||||
"@types/supercluster": "^5.0.1",
|
||||
"awesome-typescript-loader": "^5.2.1",
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||
"core-js": "3",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
"load-styles": "^2.0.0"
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"ajv": "^6.10.2",
|
||||
"core-js": "3",
|
||||
"element-resize-event": "^3.0.3",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"gl-matrix": "^3.1.0",
|
||||
|
|
@ -36,7 +36,6 @@
|
|||
"merge-json-schemas": "^1.0.0",
|
||||
"probe.gl": "^3.1.1",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"tapable": "^2.0.0-beta.8",
|
||||
"viewport-mercator-project": "^6.2.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -76,6 +76,8 @@ export interface IAnimateOption {
|
|||
duration?: number;
|
||||
trailLength?: number;
|
||||
repeat?: number;
|
||||
speed?: number;
|
||||
rings?: number;
|
||||
}
|
||||
|
||||
export interface IEncodeFeature {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||
"@antv/l7-layers": "^2.0.0-alpha.27",
|
||||
"@antv/l7-maps": "^2.0.0-alpha.27",
|
||||
"@antv/l7-scene": "^2.0.0-alpha.27"
|
||||
"@antv/l7-scene": "^2.0.0-alpha.27",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||
"@antv/l7-source": "^2.0.0-alpha.27",
|
||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.1.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
"@types/d3-color": "^1.2.2",
|
||||
"core-js": "3",
|
||||
"d3-array": "^2.3.1",
|
||||
"d3-color": "^1.4.0",
|
||||
"d3-scale": "^3.1.0",
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
"lodash": "^4.17.15",
|
||||
"merge-json-schemas": "1.0.0",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"tapable": "^2.0.0-beta.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,9 @@ export default class FillModel extends BaseModel {
|
|||
}),
|
||||
];
|
||||
}
|
||||
|
||||
protected animateOption2Array(option: IAnimateOption): number[] {
|
||||
return [option.enable ? 0 : 1.0, option.speed || 1, option.rings || 3];
|
||||
}
|
||||
protected registerBuiltinAttributes() {
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'extrude',
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ void main() {
|
|||
|
||||
if(u_aimate.x == Animate) {
|
||||
float d = length(v_data.xy);
|
||||
float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * N_RINGS - FREQ * u_time)), 0.0, 1.0);
|
||||
float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_aimate.z - u_aimate.y * u_time)), 0.0, 1.0);
|
||||
gl_FragColor = vec4(gl_FragColor.xyz * intensity, intensity);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,11 +25,10 @@
|
|||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||
"core-js": "3",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"gl-matrix": "^3.1.0",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"viewport-mercator-project": "^6.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -26,11 +26,10 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||
"core-js": "3",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"lodash": "^4.17.15",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"regl": "^1.3.11"
|
||||
},
|
||||
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
"@antv/l7-maps": "^2.0.0-alpha.27",
|
||||
"@antv/l7-renderer": "^2.0.0-alpha.27",
|
||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||
"core-js": "3",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
"reflect-metadata": "^0.1.13"
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@
|
|||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
"@turf/invariant": "^6.1.2",
|
||||
"@turf/meta": "^6.0.2",
|
||||
"core-js": "3",
|
||||
"d3-dsv": "^1.1.1",
|
||||
"d3-hexbin": "^0.2.2",
|
||||
"eventemitter3": "^4.0.0",
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@turf/helpers": "^6.1.4",
|
||||
"core-js": "3"
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@turf/helpers": "^6.1.4"
|
||||
},
|
||||
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
"jsx": "react",
|
||||
"target": "es5",
|
||||
"lib": ["es6", "dom"],
|
||||
"types": ["reflect-metadata", "jest"],
|
||||
"types": ["reflect-metadata", "jest" ],
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue