mirror of https://gitee.com/antv-l7/antv-l7
docs: update demo
This commit is contained in:
parent
ece97bb2c6
commit
438d522f2a
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -18,7 +18,7 @@ fetch(
|
|||
.then(data => {
|
||||
const layer = new LineLayer()
|
||||
.source(data)
|
||||
.size(1)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('#25d8b7')
|
||||
.animate({
|
||||
|
|
|
@ -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', () => {
|
|||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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 ]
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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 ]
|
||||
|
|
|
@ -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);
|
||||
// }
|
|
@ -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
|
||||
})
|
||||
});
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "图库",
|
||||
"en": "Gallery"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "line.js",
|
||||
"title": "json数据"
|
||||
},
|
||||
{
|
||||
"filename": "data_update.js",
|
||||
"title": "数据更新"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Data
|
||||
order: 1
|
||||
---
|
||||
|
||||
coming soon ……
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
title: 数据
|
||||
order: 1
|
||||
---
|
||||
在路上 ……
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue