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 22:42:43 +08:00
parent c19ecd4b3f
commit 7aa7fc782d
18 changed files with 180 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
demos/demo/bike.js Normal file
View File

@ -0,0 +1,110 @@
/* 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: 'dark',
center: [ 3.438, 40.16797 ],
zoom: 0.51329
})
});
Promise.all(
[ fetch('https://gw.alipayobjects.com/os/basement_prod/9acd4831-5655-41a5-b0a0-831603e0092d.json').then(function(d) {
return d.text();
}).then(JSON.parse), fetch('https://gw.alipayobjects.com/os/basement_prod/dbe4e40b-3fbf-4a20-b36b-7a8bd3b8aef2.csv').then(function(d) {
return d.text();
}), fetch('https://gw.alipayobjects.com/os/basement_prod/89d20ef7-77df-44ca-a238-6e3679ab3ae4.csv').then(function(d) {
return d.text();
}) ]).then(function onLoad([ coordinates, trips, stations ]) {
const stationArray = parseCSV(stations);
const stationObj = {};
stationArray.forEach(function(st) {
stationObj[st.station_id] = {
x: st.longitude * 1,
y: st.latitude * 1
};
});
const tripsArray = parseCSV(trips);
const triplines = [];
tripsArray.forEach(function(trip) {
if (stationObj[trip.start_station] && stationObj[trip.end_station]) {
const line = {
x: stationObj[trip.start_station].x,
y: stationObj[trip.start_station].y,
x1: stationObj[trip.end_station].x,
y1: stationObj[trip.end_station].y,
duration: trip.duration
};
triplines.push(line);
}
});
const roadlayer = new LineLayer().source(coordinates).shape('line')
.size(0.6)
.color('#eee')
.active(true)
.style({
opacity: 0.9
});
const stationLayer = new PointLayer().source(stations, {
parser: {
type: 'csv',
x: 'longitude',
y: 'latitude'
}
}).shape('circle')
.active(true)
.size(40)
.color('#fec44f')
.animate(true)
.style({
opacity: 1.0
})
.render();
const arclayer = new LineLayer().source(triplines.slice(0, 1000), {
parser: {
type: 'json',
x: 'x',
y: 'y',
x1: 'x1',
y1: 'y1'
}
})
.color('#ff6b34')
.shape('arc3d')
.size(1)
.style({
opacity: 1.0
})
.animate({
interval: 0.5,
trailLength: 0.5,
duration: 1
});
arclayer.fitBounds();
scene.addLayer(roadlayer);
scene.addLayer(stationLayer);
scene.addLayer(arclayer);
});
function parseCSV(data) {
const lines = data.split('\n');
const header = lines[0];
const columns = header.split(',');
return lines.slice(1).filter(function(l) {
return l;
}).map(function(line) {
const obj = {};
line.split(',').forEach(function(value, i) {
const name = columns[i];
obj[name] = value;
});
return obj;
});
}

43
examples/gallery/animate/demo/animate.js
View File

@ -1,43 +0,0 @@
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);
});

8
examples/gallery/animate/demo/animate_line.js
View File

@ -21,15 +21,15 @@ fetch(
coordinates: 'path'
}
})
.size(3)
.size(1.5)
.shape('line')
.color('color', v => {
return `rgb(${v[0]})`;
})
.animate({
interval: 0.1,
trailLength: 1.0,
duration: 2
interval: 0.6,
trailLength: 1.5,
duration: 6
});
scene.addLayer(lineLayer);
});

2
examples/gallery/animate/demo/animate_path.js
View File

@ -18,7 +18,7 @@ fetch(
.then(data => {
const layer = new LineLayer()
.source(data)
.size(1)
.size(1.5)
.shape('line')
.color('#25d8b7')
.animate({

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

@ -4,12 +4,12 @@ import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
style: 'amap://styles/a49ef8d081db7b85adb2e90ba7941f1e?isPublic=true',
center: [ 120.173104, 30.244072 ],
pitch: 66.50572,
zoom: 15.79,
minZoom: 10,
maxZoom: 18
pitch: 70.41138037735848,
zoom: 17.18,
rotation: 2.24, // 358.7459759480504
minZoom: 14
})
});
@ -27,15 +27,15 @@ scene.on('loaded', () => {
layer
.source(data)
.size('floor', [ 100, 3000 ])
.color('rgba(242,246,250,1.0)')
.color('rgba(242,246,250,0.5)')
.animate({
enable: true
})
.style({
opacity: 1.0,
baseColor: 'rgb(16,16,16)',
windowColor: 'rgb(30,60,89)',
brightColor: 'rgb(255,176,38)'
baseColor: 'rgba(36,16,63,0.3)',
windowColor: '#0e0220',
brightColor: '#08faee'
});
scene.addLayer(layer);
});
@ -60,4 +60,3 @@ scene.on('loaded', () => {
});
});

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

@ -19,20 +19,15 @@
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
},
{
"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"
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7XkWTYQMfPMAAAAAAAAAAABkARQnAQ"
},
{
"filename": "animate_line.js",
"title": "轨迹动画",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8cXXR5FxHgAAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jLo0RY0sDG4AAAAAAAAAAABkARQnAQ"
}
]
}

11
examples/point/column/demo/column_light.js
View File

@ -1,4 +1,4 @@
import { Scene, PointLayer } from '@antv/l7';
import { Scene, PointLayer, Popup } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
@ -32,5 +32,14 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
.style({
opacity: 1.0
});
pointLayer.on('mousemove', e => {
const popup = new Popup({
offsets: [ 0, 0 ],
closeButton: false
})
.setLnglat(e.lngLat)
.setHTML(`<span>${e.feature.s}: ${e.feature.t}℃</span>`);
scene.addPopup(popup);
});
scene.addLayer(pointLayer);
});

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

@ -49,7 +49,7 @@ async function addLayer() {
domain: [ 0, 90 ],
nodataValue: 0,
rampColors: {
colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#f8501a', '#f6961f', '#f8d069', '#fffdf8' ],
colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#fabd08', '#f1e93f', '#f1ff8f', '#fcfff7' ],
positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ]
}
});

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

@ -4,11 +4,7 @@
"en": "Gallery"
},
"demos": [
{
"filename": "image.js",
"title": "图片",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
},
{
"filename": "radar.js",
"title": "雷达图",
@ -22,12 +18,17 @@
{
"filename": "light.js",
"title": "夜光图",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*nvP2R6ZbSSgAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bUYqRb5esH4AAAAAAAAAAABkARQnAQ"
},
{
"filename": "ndvi.js",
"title": "NDVI",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6BQSTI51T_UAAAAAAAAAAABkARQnAQ"
},
{
"filename": "image.js",
"title": "图片",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
}
]
}

25
examples/raster/basic/demo/ndvi.js
View File

@ -12,9 +12,19 @@ const scene = new Scene({
})
});
addLayer();
async function getTiffData() {
// async function getAllYearData() {
// const allData = [];
// for (let i = 1; i < 13; i++) {
// const month = i < 10 ? '0' + i : i;
// const res = await getTiffData(month);
// allData.push(res);
// }
// return allData;
// }
async function getTiffData(month) {
const response = await fetch(
'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff'
'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_2019' + month + '.tiff'
);
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
@ -25,16 +35,13 @@ async function getTiffData() {
return {
data: values[0],
width,
height,
min: 0,
max: 8000
height
};
}
async function addLayer() {
const tiffdata = await getTiffData();
const layer = new RasterLayer({});
const layer = new RasterLayer();
const tiffdata = await getTiffData('06');
layer
.source(tiffdata.data, {
parser: {
@ -48,7 +55,7 @@ async function addLayer() {
opacity: 0.8,
clampLow: false,
clampHigh: false,
domain: [ -3000, 9000 ],
domain: [ -3000, 10000 ],
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 ]

46
examples/tutorial/data/demo/data_update.js
View File

@ -1,46 +0,0 @@
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
pitch: 0,
center: [ 120.19382669582967, 30.258134 ],
zoom: 5
})
});
const radius = 0.1;
function pointOnCircle(angle) {
return {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [ 120.19382669582967 + Math.cos(angle) * radius, 30.258134 + Math.sin(angle) * radius ]
}
}]
};
}
scene.on('loaded', () => {
// animateMarker(0);
});
const layer = new PointLayer()
.source(pointOnCircle(0))
.shape('circle')
.size(15) // default 1
.color('#2F54EB')
.style({
stroke: 'rgb(255,255,255)',
strokeWidth: 2,
opacity: 1
});
scene.addLayer(layer);
// function animateMarker(timestamp) {
// layer.setData(pointOnCircle(timestamp / 1000));
// requestAnimationFrame(animateMarker);
// }

11
examples/tutorial/data/demo/line.js
View File

@ -1,11 +0,0 @@
import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
pitch: 0,
center: [ 107.054293, 35.246265 ],
zoom: 4.056
})
});

16
examples/tutorial/data/demo/meta.json
View File

@ -1,16 +0,0 @@
{
"title": {
"zh": "图库",
"en": "Gallery"
},
"demos": [
{
"filename": "line.js",
"title": "json数据"
},
{
"filename": "data_update.js",
"title": "数据更新"
}
]
}

6
examples/tutorial/data/index.en.md
View File

@ -1,6 +0,0 @@
---
title: Data
order: 1
---
coming soon ……

5
examples/tutorial/data/index.zh.md
View File

@ -1,5 +0,0 @@
---
title: 数据
order: 1
---
在路上 ……

4
packages/layers/src/point/shaders/fill_frag.glsl
View File

@ -69,8 +69,8 @@ void main() {
float N_RINGS = 3.0;
float FREQ = 1.0;
// gl_FragColor = v_color * color_t;
// gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
gl_FragColor = opacity_t * mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
if(u_aimate.x == Animate) {

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

@ -29,18 +29,19 @@ export default class Point3D extends React.Component {
// scene.on('loaded', () => {
const pointLayer = new PointLayer({})
.source(pointsData, {
cluster: true,
cluster: false,
})
.shape('circle')
.scale('point_count', {
type: 'quantile',
})
.size('point_count', [5, 10, 15, 20, 25])
// .scale('point_count', {
// type: 'quantile',
// })
// .size('point_count', [5, 10, 15, 20, 25])
.size(5)
.animate(false)
.active(true)
.color('yellow')
.style({
opacity: 0.5,
opacity: 1,
strokeWidth: 1,
});
scene.addLayer(pointLayer);

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

@ -28,21 +28,21 @@ export default class ImageLayerDemo extends React.Component {
});
const tiffdata = await this.getTiffData();
const layer = new RasterLayer({});
const mindata = -5000;
const maxdata = 10000;
const mindata = -0;
const maxdata = 8000;
layer
.source(tiffdata.data, {
parser: {
type: 'raster',
width: tiffdata.width,
height: tiffdata.height,
// extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
extent: [
73.4766000000000048,
18.1054999999999993,
135.1066187,
57.630046,
],
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
// extent: [
// 73.4766000000000048,
// 18.1054999999999993,
// 135.1066187,
// 57.630046,
// ],
},
})
.style({
@ -108,7 +108,6 @@ export default class ImageLayerDemo extends React.Component {
rasterFolder
.add(styleOptions, 'colorScales', Object.keys(colorScales))
.onChange((color: string) => {
colorScales[color].colors = colorScales[color].colors.reverse();
layer.style({
rampColors: colorScales[color],
});
@ -132,8 +131,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/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
'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);