mirror of https://gitee.com/antv-l7/antv-l7
docs: add animate docs
This commit is contained in:
parent
72e4eda004
commit
de3f2f6dff
|
@ -64,6 +64,7 @@ module.exports = api => {
|
||||||
'@babel/preset-typescript'
|
'@babel/preset-typescript'
|
||||||
],
|
],
|
||||||
plugins: [
|
plugins: [
|
||||||
|
isCDNBundle ? {} : '@babel/plugin-transform-runtime',
|
||||||
'@babel/plugin-proposal-object-rest-spread',
|
'@babel/plugin-proposal-object-rest-spread',
|
||||||
'@babel/plugin-proposal-optional-chaining',
|
'@babel/plugin-proposal-optional-chaining',
|
||||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||||
|
@ -113,8 +114,6 @@ module.exports = api => {
|
||||||
// isCDNBundle ? 'inline-webgl-constants' : {},
|
// isCDNBundle ? 'inline-webgl-constants' : {},
|
||||||
],
|
],
|
||||||
ignore: [
|
ignore: [
|
||||||
/[\/\\]core-js/,
|
|
||||||
/@babel[\/\\]runtime/,
|
|
||||||
'node_modules',
|
'node_modules',
|
||||||
...!isTest ? [
|
...!isTest ? [
|
||||||
'**/*.test.tsx',
|
'**/*.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,
|
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('',[])
|
layer.size('',[])
|
||||||
```
|
```
|
||||||
|
### animate
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -8,6 +8,10 @@ order: 1
|
||||||
|
|
||||||
气泡图通过PointLayer对象实例化,
|
气泡图通过PointLayer对象实例化,
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { PointLayer } from '@antv/l7';
|
||||||
|
|
||||||
|
```
|
||||||
### shape
|
### shape
|
||||||
|
|
||||||
通常气泡图shape 设置为 **circle**
|
通常气泡图shape 设置为 **circle**
|
||||||
|
@ -29,6 +33,24 @@ new PointLayer()
|
||||||
strokeWidth: 1
|
strokeWidth: 1
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### animate
|
||||||
|
|
||||||
|
气泡图支持水波动画效果
|
||||||
|
|
||||||
|
#### 开启关闭动画
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
layer.animate(true)
|
||||||
|
layer.animate(false)
|
||||||
|
```
|
||||||
|
#### 水波配置项
|
||||||
|
|
||||||
|
- speed 水波速度
|
||||||
|
- rings 水波环数
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## tips
|
## tips
|
||||||
|
|
||||||
目前style的配置项只支持全局设置,不支持数据映射。
|
目前style的配置项只支持全局设置,不支持数据映射。
|
||||||
|
|
|
@ -2,3 +2,32 @@
|
||||||
title: 3D填充图
|
title: 3D填充图
|
||||||
order: 1
|
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: 填充图
|
title: 填充图
|
||||||
order: 1
|
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 地图实例
|
#### 传入 Mapbox 地图实例
|
||||||
|
|
||||||
|
|
|
@ -117,6 +117,14 @@ module.exports = {
|
||||||
},
|
},
|
||||||
order: 4
|
order: 4
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
slug: 'api/layer/cityBuilding',
|
||||||
|
title: {
|
||||||
|
zh: '城市建筑',
|
||||||
|
en: 'CityBuilding'
|
||||||
|
},
|
||||||
|
order: 6
|
||||||
|
},
|
||||||
{
|
{
|
||||||
slug: 'api/source',
|
slug: 'api/source',
|
||||||
title: {
|
title: {
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
"@types/enzyme-adapter-react-16": "^1.0.3",
|
"@types/enzyme-adapter-react-16": "^1.0.3",
|
||||||
"@types/gl": "^4.1.0",
|
"@types/gl": "^4.1.0",
|
||||||
"@types/jest": "^24.0.18",
|
"@types/jest": "^24.0.18",
|
||||||
"@types/node": "^12.7.3",
|
"@types/node": "^12.12.22",
|
||||||
"@types/storybook__react": "^4.0.2",
|
"@types/storybook__react": "^4.0.2",
|
||||||
"@types/supercluster": "^5.0.1",
|
"@types/supercluster": "^5.0.1",
|
||||||
"awesome-typescript-loader": "^5.2.1",
|
"awesome-typescript-loader": "^5.2.1",
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-utils": "^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",
|
"eventemitter3": "^4.0.0",
|
||||||
"inversify": "^5.0.1",
|
"inversify": "^5.0.1",
|
||||||
"load-styles": "^2.0.0"
|
"load-styles": "^2.0.0"
|
||||||
|
|
|
@ -23,9 +23,9 @@
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||||
|
"@babel/runtime": "^7.7.7",
|
||||||
"@mapbox/tiny-sdf": "^1.1.1",
|
"@mapbox/tiny-sdf": "^1.1.1",
|
||||||
"ajv": "^6.10.2",
|
"ajv": "^6.10.2",
|
||||||
"core-js": "3",
|
|
||||||
"element-resize-event": "^3.0.3",
|
"element-resize-event": "^3.0.3",
|
||||||
"eventemitter3": "^4.0.0",
|
"eventemitter3": "^4.0.0",
|
||||||
"gl-matrix": "^3.1.0",
|
"gl-matrix": "^3.1.0",
|
||||||
|
@ -36,7 +36,6 @@
|
||||||
"merge-json-schemas": "^1.0.0",
|
"merge-json-schemas": "^1.0.0",
|
||||||
"probe.gl": "^3.1.1",
|
"probe.gl": "^3.1.1",
|
||||||
"reflect-metadata": "^0.1.13",
|
"reflect-metadata": "^0.1.13",
|
||||||
"regenerator-runtime": "^0.13.3",
|
|
||||||
"tapable": "^2.0.0-beta.8",
|
"tapable": "^2.0.0-beta.8",
|
||||||
"viewport-mercator-project": "^6.2.1"
|
"viewport-mercator-project": "^6.2.1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -76,6 +76,8 @@ export interface IAnimateOption {
|
||||||
duration?: number;
|
duration?: number;
|
||||||
trailLength?: number;
|
trailLength?: number;
|
||||||
repeat?: number;
|
repeat?: number;
|
||||||
|
speed?: number;
|
||||||
|
rings?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IEncodeFeature {
|
export interface IEncodeFeature {
|
||||||
|
|
|
@ -28,7 +28,8 @@
|
||||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-layers": "^2.0.0-alpha.27",
|
"@antv/l7-layers": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-maps": "^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",
|
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
|
|
|
@ -25,10 +25,10 @@
|
||||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-source": "^2.0.0-alpha.27",
|
"@antv/l7-source": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||||
|
"@babel/runtime": "^7.7.7",
|
||||||
"@mapbox/martini": "^0.1.0",
|
"@mapbox/martini": "^0.1.0",
|
||||||
"@turf/meta": "^6.0.2",
|
"@turf/meta": "^6.0.2",
|
||||||
"@types/d3-color": "^1.2.2",
|
"@types/d3-color": "^1.2.2",
|
||||||
"core-js": "3",
|
|
||||||
"d3-array": "^2.3.1",
|
"d3-array": "^2.3.1",
|
||||||
"d3-color": "^1.4.0",
|
"d3-color": "^1.4.0",
|
||||||
"d3-scale": "^3.1.0",
|
"d3-scale": "^3.1.0",
|
||||||
|
@ -40,7 +40,6 @@
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
"merge-json-schemas": "1.0.0",
|
"merge-json-schemas": "1.0.0",
|
||||||
"reflect-metadata": "^0.1.13",
|
"reflect-metadata": "^0.1.13",
|
||||||
"regenerator-runtime": "^0.13.3",
|
|
||||||
"tapable": "^2.0.0-beta.8"
|
"tapable": "^2.0.0-beta.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"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() {
|
protected registerBuiltinAttributes() {
|
||||||
this.styleAttributeService.registerStyleAttribute({
|
this.styleAttributeService.registerStyleAttribute({
|
||||||
name: 'extrude',
|
name: 'extrude',
|
||||||
|
|
|
@ -75,7 +75,7 @@ void main() {
|
||||||
|
|
||||||
if(u_aimate.x == Animate) {
|
if(u_aimate.x == Animate) {
|
||||||
float d = length(v_data.xy);
|
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);
|
gl_FragColor = vec4(gl_FragColor.xyz * intensity, intensity);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,11 +25,10 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-utils": "^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",
|
"gl-matrix": "^3.1.0",
|
||||||
"inversify": "^5.0.1",
|
"inversify": "^5.0.1",
|
||||||
"mapbox-gl": "^1.2.1",
|
"mapbox-gl": "^1.2.1",
|
||||||
"regenerator-runtime": "^0.13.3",
|
|
||||||
"viewport-mercator-project": "^6.2.1"
|
"viewport-mercator-project": "^6.2.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -26,11 +26,10 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||||
"core-js": "3",
|
"@babel/runtime": "^7.7.7",
|
||||||
"inversify": "^5.0.1",
|
"inversify": "^5.0.1",
|
||||||
"lodash": "^4.17.15",
|
"lodash": "^4.17.15",
|
||||||
"reflect-metadata": "^0.1.13",
|
"reflect-metadata": "^0.1.13",
|
||||||
"regenerator-runtime": "^0.13.3",
|
|
||||||
"regl": "^1.3.11"
|
"regl": "^1.3.11"
|
||||||
},
|
},
|
||||||
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
"@antv/l7-maps": "^2.0.0-alpha.27",
|
"@antv/l7-maps": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-renderer": "^2.0.0-alpha.27",
|
"@antv/l7-renderer": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-utils": "^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",
|
"inversify": "^5.0.1",
|
||||||
"mapbox-gl": "^1.2.1",
|
"mapbox-gl": "^1.2.1",
|
||||||
"reflect-metadata": "^0.1.13"
|
"reflect-metadata": "^0.1.13"
|
||||||
|
|
|
@ -26,11 +26,11 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/l7-core": "^2.0.0-alpha.27",
|
"@antv/l7-core": "^2.0.0-alpha.27",
|
||||||
"@antv/l7-utils": "^2.0.0-alpha.27",
|
"@antv/l7-utils": "^2.0.0-alpha.27",
|
||||||
|
"@babel/runtime": "^7.7.7",
|
||||||
"@mapbox/geojson-rewind": "^0.4.0",
|
"@mapbox/geojson-rewind": "^0.4.0",
|
||||||
"@turf/helpers": "^6.1.4",
|
"@turf/helpers": "^6.1.4",
|
||||||
"@turf/invariant": "^6.1.2",
|
"@turf/invariant": "^6.1.2",
|
||||||
"@turf/meta": "^6.0.2",
|
"@turf/meta": "^6.0.2",
|
||||||
"core-js": "3",
|
|
||||||
"d3-dsv": "^1.1.1",
|
"d3-dsv": "^1.1.1",
|
||||||
"d3-hexbin": "^0.2.2",
|
"d3-hexbin": "^0.2.2",
|
||||||
"eventemitter3": "^4.0.0",
|
"eventemitter3": "^4.0.0",
|
||||||
|
|
|
@ -22,8 +22,8 @@
|
||||||
"author": "lzxue",
|
"author": "lzxue",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@turf/helpers": "^6.1.4",
|
"@babel/runtime": "^7.7.7",
|
||||||
"core-js": "3"
|
"@turf/helpers": "^6.1.4"
|
||||||
},
|
},
|
||||||
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
"gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"lib": ["es6", "dom"],
|
"lib": ["es6", "dom"],
|
||||||
"types": ["reflect-metadata", "jest"],
|
"types": ["reflect-metadata", "jest" ],
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
|
|
Loading…
Reference in New Issue