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

docs: update demo

This commit is contained in:
thinkinggis 2020-01-08 17:54:23 +08:00
parent f9e06a63e3
commit 39258c5999
21 changed files with 337 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/api/changelog.en.md
View File

@ -5,6 +5,7 @@ order: 10
## 2020.01.06 2.0 正式版
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
###✨ Features
• 新增弧线图，路径图动画功能
• 新增气泡图水波动画功能

2
docs/api/changelog.zh.md
View File

@ -5,6 +5,8 @@ order: 10
## 2020.01.06 2.0 正式版
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
###✨ Features
• 新增弧线图，路径图动画功能

8
examples/line/path/demo/animate.js → examples/gallery/animate/demo/animate_path.js
View File

@ -20,11 +20,11 @@ fetch(
.source(data)
.size(1)
.shape('line')
.color('#ff893a')
.color('#25d8b7')
.animate({
interval: 0.4,
duration: 1,
trailLength: 0.8
interval: 1, // 间隔
duration: 1, // 持续时间，延时
trailLength: 2 // 流线长度
});
scene.addLayer(layer);
});

81
examples/gallery/animate/demo/build.js
View File

@ -1,36 +1,63 @@
import { Scene, CityBuildingLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new GaodeMap({
style: 'dark',
center: [ 121.507674, 31.223043 ],
pitch: 65.59312320916906,
zoom: 15.4,
minZoom: 15,
center: [ 120.173104, 30.244072 ],
pitch: 66.50572,
zoom: 15.79,
minZoom: 10,
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
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
)
.then(res => res.json())
.then(data => {
const layer = new CityBuildingLayer(
{
zIndex: 0
}
);
layer
.source(data)
.size('floor', [ 100, 3000 ])
.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);
});
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({
zIndex: 0
})
.style({
opacity: 1.0,
baseColor: 'rgb(16,16,16)',
windowColor: 'rgb(30,60,89)',
brightColor: 'rgb(255,176,38)'
});
scene.addLayer(layer);
});
.source(data)
.size(1)
.shape('line')
.color('#ff893a')
.animate({
interval: 1, // 间隔
duration: 2, // 持续时间，延时
trailLength: 2 // 流线长度
});
scene.addLayer(layer);
});
});

15
examples/gallery/animate/demo/meta.json
View File

@ -4,6 +4,21 @@
"en": "Gallery"
},
"demos": [
{
"filename": "animate_path.js",
"title": "路径动画",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "world.js",
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Sbx4S4w7nL8AAAAAAAAAAABkARQnAQ"
},
{
"filename": "world2.js",
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
},
{
"filename": "animate.js",
"title": "轨迹动画",

53
examples/gallery/animate/demo/world.js
View File

@ -1,12 +1,27 @@
/* eslint-disable no-eval */
import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7';
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 40,
style: 'blank',
style: {
version: 8,
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
glyphs:
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#2b2b3a'
}
}
]
},
center: [ 3.438, 40.16797 ],
zoom: 0.51329
})
@ -22,20 +37,20 @@ Promise.all([
const latlng2 = item.to.split(',').map(e => { return e * 1; });
return { coord: [ latlng1, latlng2 ] };
});
const worldFill = new PolygonLayer()
.source(world)
.color('#98E3FA')
.shape('fill')
.style({
opacity: 1
});
// const worldFill = new PolygonLayer()
// .source(world)
// .color('#98E3FA')
// .shape('fill')
// .style({
// opacity: 1
// });
const worldLine = new LineLayer()
.source(world)
.color('#fff')
.size(0.6)
.color('#41fc9d')
.size(0.5)
.style({
opacity: 1
opacity: 0.4
});
const dotPoint = new PointLayer()
.source(dotData, {
@ -46,7 +61,7 @@ Promise.all([
}
})
.shape('circle')
.color('red')
.color('#ffed11')
.animate(true)
.size(40)
.style({
@ -59,18 +74,18 @@ Promise.all([
coordinates: 'coord'
}
})
.color('#faad14')
.color('#ff6b34')
.shape('arc3d')
.size(2.0)
.size(2)
.animate({
interval: 0.1,
trailLength: 1.0,
duration: 2
interval: 2,
trailLength: 2,
duration: 1
})
.style({
opacity: 1
});
scene.addLayer(worldFill);
// scene.addLayer(worldFill);
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine);

96
examples/gallery/animate/demo/world2.js Normal file
View File

@ -0,0 +1,96 @@
/* eslint-disable no-eval */
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 40,
style: {
version: 8,
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
glyphs:
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#2b2b3a'
}
}
]
},
center: [ 3.438, 40.16797 ],
zoom: 0.51329
})
});
Promise.all([
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
const flydata = eval(flyline).map(item => {
const latlng1 = item.from.split(',').map(e => { return e * 1; });
const latlng2 = item.to.split(',').map(e => { return e * 1; });
return { coord: [ latlng1, latlng2 ] };
});
// const worldFill = new PolygonLayer()
// .source(world)
// .color('#98E3FA')
// .shape('fill')
// .style({
// opacity: 1
// });
const worldLine = new LineLayer()
.source(world)
.color('#495e96')
.size(0.6)
.style({
opacity: 0.2
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#abc7e9')
.animate({
speed: 0.8
}
)
.size(30)
.style({
opacity: 1.0
});
const flyLine = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#b97feb')
.shape('arc3d')
.size(2)
.animate({
interval: 2,
trailLength: 2,
duration: 1
})
.style({
opacity: 1
});
// scene.addLayer(worldFill);
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine);
});

2
examples/gallery/animate/index.en.md
View File

@ -1,4 +1,4 @@
---
title: Animate
order: 1
order: 0
---

2
examples/gallery/animate/index.zh.md
View File

@ -1,4 +1,4 @@
---
title: 动画
order: 1
order: 0
---

2
examples/gallery/basic/index.en.md
View File

@ -1,4 +1,4 @@
---
title: Featured
order: 0
order: 1
---

2
examples/gallery/basic/index.zh.md
View File

@ -1,4 +1,4 @@
---
title: 基础可视化
order: 0
order: 1
---

12
examples/line/path/demo/bus_light.js
View File

@ -1,6 +1,6 @@
// Data Source https://busrouter.sg/visualization/
import { Scene, LineLayer } from '@antv/l7';
import { Scene, LineLayer, Popup } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
@ -30,6 +30,7 @@ fetch(
return [ 0.8, level * 1 ];
})
.shape('line')
.active(true)
.color(
'level',
[
@ -47,5 +48,14 @@ fetch(
.reverse()
.slice(0, 8)
);
layer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>车次: ${e.feature.number}</span>`);
scene.addPopup(popup);
});
scene.addLayer(layer);
});

22
examples/polygon/fill/demo/usa.js
View File

@ -16,24 +16,25 @@ fetch(
)
.then(res => res.json())
.then(data => {
const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
const layer = new PolygonLayer({})
.source(data)
.color(
'density', d => {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
return d > 1000 ? color[7] :
d > 500 ? color[6] :
d > 200 ? color[5] :
d > 100 ? color[4] :
d > 50 ? color[3] :
d > 20 ? color[2] :
d > 10 ? color[1] :
color[0];
}
)
.shape('fill')
.active(true)
.style({
opacity: 0.8
opacity: 1.0
});
const layer2 = new LineLayer({
zIndex: 2
@ -52,7 +53,8 @@ fetch(
layer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ]
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);

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

@ -14,7 +14,7 @@ const scene = new Scene({
addLayer();
async function getTiffData() {
const response = await fetch(
'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF141999.tiff'
'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'
);
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
@ -44,13 +44,13 @@ async function addLayer() {
})
.style({
opacity: 1.0,
clampLow: true,
clampHigh: true,
clampLow: false,
clampHigh: false,
domain: [ 0, 90 ],
nodataValue: 0,
rampColors: {
colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ],
positions: [ 0, 0.1, 0.25, 0.5, 1.0 ]
colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#f8501a', '#f6961f', '#f8d069', '#fffdf8' ],
positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ]
}
});

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

@ -31,7 +31,7 @@ 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));
float alpha2 = exp(-abs(v_side));
gl_FragColor.a *= alpha * blur;
// gl_FragColor.a = fract(u_time);
}

2
packages/layers/src/point/models/text.ts
View File

@ -88,7 +88,7 @@ export default class TextModel extends BaseModel {
public getUninforms(): IModelUniform {
const {
fontWeight = 800,
fontFamily,
fontFamily = 'sans-serif',
stroke = '#fff',
strokeWidth = 0,
} = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;

16
packages/layers/src/raster/models/raster.ts
View File

@ -38,7 +38,7 @@ export default class RasterModel extends BaseModel {
noDataValue = -9999999,
domain = [0, 1],
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
this.updateColorTexure();
return {
u_opacity: opacity || 1,
u_texture: this.texture,
@ -110,4 +110,18 @@ export default class RasterModel extends BaseModel {
},
});
}
private updateColorTexure() {
const { createTexture2D } = this.rendererService;
const {
rampColors,
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
const imageData = generateColorRamp(rampColors as IColorRamp);
this.colorTexture = createTexture2D({
data: imageData.data,
width: imageData.width,
height: imageData.height,
flipY: true,
});
}
}

13
stories/Layers/components/Line.tsx
View File

@ -33,16 +33,15 @@ export default class LineDemo extends React.Component {
.shape('line')
.color('color', (v) => {
return `rgb(${v[0]})`;
})
.animate({
enable: true,
interval: 0.5,
trailLength: 0.4,
duration: 4,
});
// .animate({
// enable: false,
// interval: 0.5,
// trailLength: 0.4,
// duration: 4,
// })
scene.addLayer(lineLayer);
scene.render();
this.scene = scene;
}

32
stories/Layers/components/Point.tsx
View File

@ -44,38 +44,6 @@ export default class Point3D extends React.Component {
strokeWidth: 1,
});
scene.addLayer(pointLayer);
pointLayer.on('mousemove', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('mousedown', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('mouseup', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('click', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('contextmenu', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
pointLayer.on('unpick', (e) => {
const id = e.featureId;
console.log(e.type);
pointLayer.setActive(id);
});
this.scene = scene;
// });
}

74
stories/Layers/components/RasterLayer.tsx
View File

@ -4,7 +4,7 @@ import * as dat from 'dat.gui';
// @ts-ignore
import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
import * as React from 'react';
import { colorScales } from '../lib/colorscales';
export default class ImageLayerDemo extends React.Component {
private scene: Scene;
private gui: dat.GUI;
@ -28,35 +28,36 @@ export default class ImageLayerDemo extends React.Component {
});
const tiffdata = await this.getTiffData();
const layer = new RasterLayer({});
const mindata = -5000;
const maxdata = 10000;
layer
.source(tiffdata.data, {
parser: {
type: 'raster',
width: tiffdata.width,
height: tiffdata.height,
min: 0,
max: 8000,
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
// extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
extent: [
73.4766000000000048,
18.1054999999999993,
135.1066187,
57.630046,
],
},
})
.style({
opacity: 0.8,
domain: [100, 4000],
domain: [mindata, maxdata],
clampLow: true,
rampColors: {
colors: [
'#002466',
'#0D408C',
'#105CB3',
'#1A76C7',
'#2894E0',
'#3CB4F0',
'#65CEF7',
'#98E3FA',
'#CFF6FF',
'#E8FCFF',
'rgb(166,97,26)',
'rgb(223,194,125)',
'rgb(245,245,245)',
'rgb(128,205,193)',
'rgb(1,133,113)',
],
positions: [0, 0.02, 0.05, 0.1, 0.2, 0.3, 0.5, 0.6, 0.8, 1.0],
positions: [0, 0.25, 0.5, 0.75, 1.0],
},
});
scene.addLayer(layer);
@ -69,8 +70,9 @@ export default class ImageLayerDemo extends React.Component {
clampLow: true,
clampHigh: true,
noDataValue: -9999999,
min: 100,
max: 4000,
min: mindata,
max: maxdata,
colorScales: 'jet',
};
const rasterFolder = gui.addFolder('栅格可视化');
rasterFolder.add(styleOptions, 'clampLow').onChange((clampLow: boolean) => {
@ -87,18 +89,31 @@ export default class ImageLayerDemo extends React.Component {
});
scene.render();
});
rasterFolder.add(styleOptions, 'min', 0, 9000).onChange((min: number) => {
layer.style({
domain: [min, styleOptions.max],
rasterFolder
.add(styleOptions, 'min', mindata, maxdata)
.onChange((min: number) => {
layer.style({
domain: [min, styleOptions.max],
});
scene.render();
});
scene.render();
});
rasterFolder.add(styleOptions, 'max', 0, 9000).onChange((max: number) => {
layer.style({
domain: [styleOptions.min, max],
rasterFolder
.add(styleOptions, 'max', mindata, maxdata)
.onChange((max: number) => {
layer.style({
domain: [styleOptions.min, max],
});
scene.render();
});
rasterFolder
.add(styleOptions, 'colorScales', Object.keys(colorScales))
.onChange((color: string) => {
colorScales[color].colors = colorScales[color].colors.reverse();
layer.style({
rampColors: colorScales[color],
});
scene.render();
});
scene.render();
});
}
public render() {
@ -117,7 +132,8 @@ export default class ImageLayerDemo extends React.Component {
}
private async getTiffData() {
const response = await fetch(
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
// 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
);
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);

57
stories/Layers/components/Text.tsx
View File

@ -1,42 +1,21 @@
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
import * as dat from 'dat.gui';
// @ts-ignore
import data from '../data/data.json';
export default class TextLayerDemo extends React.Component {
// @ts-ignore
private scene: Scene;
private gui: dat.GUI;
public componentWillUnmount() {
this.scene.destroy();
if (this.gui) {
this.gui.destroy();
}
}
public async componentDidMount() {
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
name: '中华人民共和国',
},
geometry: {
type: 'Point',
coordinates: [103.0078125, 36.03133177633187],
},
},
{
type: 'Feature',
properties: {
name: '中华人民共和国',
},
geometry: {
type: 'Point',
coordinates: [122.6953125, 10.833305983642491],
},
},
],
};
const response = await fetch(
'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
);
@ -76,6 +55,32 @@ export default class TextLayerDemo extends React.Component {
scene.addLayer(pointLayer);
this.scene = scene;
const gui = new dat.GUI();
this.gui = gui;
const styleOptions = {
textAnchor: 'center',
strokeWidth: 1,
};
const rasterFolder = gui.addFolder('栅格可视化');
rasterFolder
.add(styleOptions, 'textAnchor', [
'center',
'left',
'right',
'top',
'bottom',
'top-left',
'bottom-right',
'bottom-left',
'top-right',
])
.onChange((anchor: string) => {
pointLayer.style({
textAnchor: anchor,
});
scene.render();
});
// });
}