p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: add animate demo

This commit is contained in:
thinkinggis 2020-01-06 11:08:12 +08:00
parent 8aa24988ff
commit 08f1f6cfa2
16 changed files with 200 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/api/component/marker.zh.md
View File

@ -11,10 +11,11 @@ Marker<br />`const Marker = new L7.Marker(option)`
#### option
- color        `string`   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32)  设置默认 marker 的颜色
- color        `string`   ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色
- element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
- extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息
## 方法
@ -50,11 +51,19 @@ Marker<br />`const Marker = new L7.Marker(option)`
获取 marker 弹出框
#### getExtData()
获取用户自定义数据
#### setExtData(data)
设置用户自定义数据
## 示例代码
#### 默认 Marker
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
`const marker = new L7.Marker({color:'blue'})`
#### 自定义 Marker
@ -84,3 +93,26 @@ new L7.Marker({
.setPopup(popup)
.addTo(scene);
```
## 事件
### 鼠标事件
- mousemove
- click
- mousedown
- mouseup
- dblclick
- contextmenu
- mouseover
- mouseout
事件返回数据
- target 事件触发源
- data extData 用户自定义数据
- lnglat marker 经纬度
```javascript
marker.on('click', (e) => {});
```

11
docs/api/layer/line_layer/linelayer.zh.md
View File

@ -68,3 +68,14 @@ order: 0
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1, 2]); // 宽度为1，高度2
```
### style
- lineType dash | solid 线类型实线和虚线
- dashArray 虚线配置项 ```[ 5, 5]```
```javascript
layer .style({
lineType: 'dash',
dashArray: [ 5, 5 ]
})
```

43
examples/gallery/basic/demo/animate.js Normal file
View File

@ -0,0 +1,43 @@
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 110.19382669582967, 40.258134 ],
pitch: 0,
zoom: 3,
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json'
)
.then(res => res.json())
.then(data => {
data.features = data.features.map(function(fe) {
if (fe.properties.saldo < 0) {
fe.geometry.coordinates = fe.geometry.coordinates.reverse();
}
return fe;
});
const layer = new LineLayer({
autoFit: true
})
.source(data)
.shape('line')
.size('saldo', [ 1, 2 ])
.color('saldo', function(v) {
return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
})
.animate({
enable: true,
interval: 0.1,
duration: 3,
trailLength: 1
})
.style({
opacity: 0.8
});
scene.addLayer(layer);
});

36
examples/gallery/basic/demo/build.js Normal file
View File

@ -0,0 +1,36 @@
import { Scene, CityBuildingLayer } 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
})
});
fetch(
'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json'
)
.then(res => res.json())
.then(data => {
const layer = new CityBuildingLayer();
layer
.source(data)
.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(layer);
});

10
examples/gallery/basic/demo/meta.json
View File

@ -4,6 +4,16 @@
"en": "Gallery"
},
"demos": [
{
"filename": "animate.js",
"title": "轨迹动画",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ"
},
{
"filename": "build.js",
"title": "点亮城市",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ"
},
{
"filename": "column_dark.js",
"title": "3D柱图深色",

5
examples/line/path/demo/meta.json
View File

@ -23,6 +23,11 @@
"filename": "road_dark.js",
"title": "路径",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ"
},
{
"filename": "road_dark_dash.js",
"title": "路径虚线",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cGw3T4LPx7YAAAAAAAAAAABkARQnAQ"
}
]
}

31
examples/line/path/demo/road_dark_dash.js Normal file
View File

@ -0,0 +1,31 @@
import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.3956, 39.9392 ],
pitch: 0,
zoom: 10,
rotation: 0,
style: 'dark'
})
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.size(1.5)
.shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])
.style({
lineType: 'dash',
dashArray: [ 5, 5 ]
})
;
scene.addLayer(layer);
});

8
examples/raster/basic/demo/light.js
View File

@ -44,13 +44,13 @@ async function addLayer() {
})
.style({
opacity: 1.0,
clampLow: false,
clampHigh: false,
clampLow: true,
clampHigh: true,
domain: [ 0, 90 ],
nodataValue: 0,
rampColors: {
colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ],
positions: [ 0, 0.25, 0.5, 0.75, 1.0 ]
colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ],
positions: [ 0, 0.1, 0.25, 0.5, 1.0 ]
}
});

5
examples/raster/basic/demo/meta.json
View File

@ -17,11 +17,12 @@
{
"filename": "dem.js",
"title": "地形图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oinmTJIlmbMAAAAAAAAAAABkARQnAQ"
},
{
"filename": "light.js",
"title": "夜光图"
"title": "夜光图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*nvP2R6ZbSSgAAAAAAAAAAABkARQnAQ"
},
{
"filename": "ndvi.js",

8
packages/component/src/marker.ts
View File

@ -133,6 +133,14 @@ export default class Marker extends EventEmitter {
return this.markerOption.draggable;
}
public getExtData() {
return this.markerOption.extData;
}
public setExtData(data: any) {
this.markerOption.extData = data;
}
private update() {
if (!this.mapsService) {
return;

1
packages/core/src/services/scene/ISceneService.ts
View File

@ -10,6 +10,7 @@ export interface ISceneService {
addLayer(layer: ILayer): void;
render(): void;
getSceneContainer(): HTMLDivElement;
ExportMap2Png(): string;
destroy(): void;
}
// scene 事件

7
packages/core/src/services/scene/SceneService.ts
View File

@ -218,6 +218,13 @@ export default class Scene extends EventEmitter implements ISceneService {
return this.$container as HTMLDivElement;
}
public ExportMap2Png(): string {
const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
this.render();
const layersPng = renderCanvas?.toDataURL() as string;
return layersPng;
}
public destroy() {
this.emit('destroy');
this.inited = false;

2
packages/layers/src/citybuliding/shaders/build_frag.glsl
View File

@ -82,7 +82,7 @@ void main() {
if(ux == targetColId){
n =0.;
}
float timeP = min(0.75, abs ( sin(u_time/6.0) ) );
float timeP = min(0.75, abs ( sin(u_time/3.0) ) );
float hot = smoothstep(1.0,0.0,timeP);
vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s);
//vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0);

3
packages/layers/src/core/BaseLayer.ts
View File

@ -300,13 +300,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// 触发 init 生命周期插件
this.hooks.init.call();
this.inited = true;
this.hooks.afterInit.call();
// 更新 model 样式
this.updateLayerConfig({
...(this.getDefaultConfig() as object),
...this.rawConfig,
});
this.hooks.afterInit.call();
// 启动动画
const { animateOption } = this.getLayerConfig();
if (animateOption?.enable) {

4
packages/layers/src/line/shaders/line_frag.glsl
View File

@ -31,8 +31,8 @@ void main() {
float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y);
alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
alpha = smoothstep(0., 1., alpha);
float alpha2 = exp(-abs(v_side));
gl_FragColor.a *= alpha * blur * alpha2;
// float alpha2 = exp(-abs(v_side));
gl_FragColor.a *= alpha * blur;
// gl_FragColor.a = fract(u_time);
}
// dash line

3
packages/scene/src/index.ts
View File

@ -99,6 +99,9 @@ class Scene
public getMapService(): IMapService<unknown> {
return this.mapService;
}
public ExportMap2Png(): string {
return this.sceneService.ExportMap2Png();
}
public get map() {
return this.mapService.map;