mirror of https://gitee.com/antv-l7/antv-l7
docs: update demo
This commit is contained in:
parent
e835dbf075
commit
5f632878f9
|
@ -5,6 +5,7 @@ order: 10
|
||||||
|
|
||||||
## 2020.01.06 2.0 正式版
|
## 2020.01.06 2.0 正式版
|
||||||
|
|
||||||
|
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
|
||||||
###✨ Features
|
###✨ Features
|
||||||
• 新增弧线图,路径图动画功能
|
• 新增弧线图,路径图动画功能
|
||||||
• 新增气泡图水波动画功能
|
• 新增气泡图水波动画功能
|
||||||
|
|
|
@ -5,6 +5,8 @@ order: 10
|
||||||
|
|
||||||
## 2020.01.06 2.0 正式版
|
## 2020.01.06 2.0 正式版
|
||||||
|
|
||||||
|
[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
|
||||||
|
|
||||||
###✨ Features
|
###✨ Features
|
||||||
|
|
||||||
• 新增弧线图,路径图动画功能
|
• 新增弧线图,路径图动画功能
|
||||||
|
|
|
@ -20,11 +20,11 @@ fetch(
|
||||||
.source(data)
|
.source(data)
|
||||||
.size(1)
|
.size(1)
|
||||||
.shape('line')
|
.shape('line')
|
||||||
.color('#ff893a')
|
.color('#25d8b7')
|
||||||
.animate({
|
.animate({
|
||||||
interval: 0.4,
|
interval: 1, // 间隔
|
||||||
duration: 1,
|
duration: 1, // 持续时间,延时
|
||||||
trailLength: 0.8
|
trailLength: 2 // 流线长度
|
||||||
});
|
});
|
||||||
scene.addLayer(layer);
|
scene.addLayer(layer);
|
||||||
});
|
});
|
|
@ -1,36 +1,63 @@
|
||||||
import { Scene, CityBuildingLayer } from '@antv/l7';
|
import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7';
|
||||||
import { Mapbox } from '@antv/l7-maps';
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new Mapbox({
|
map: new GaodeMap({
|
||||||
style: 'dark',
|
style: 'dark',
|
||||||
center: [ 121.507674, 31.223043 ],
|
center: [ 120.173104, 30.244072 ],
|
||||||
pitch: 65.59312320916906,
|
pitch: 66.50572,
|
||||||
zoom: 15.4,
|
zoom: 15.79,
|
||||||
minZoom: 15,
|
minZoom: 10,
|
||||||
maxZoom: 18
|
maxZoom: 18
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
fetch(
|
scene.on('loaded', () => {
|
||||||
'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json'
|
fetch(
|
||||||
)
|
'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
|
||||||
.then(res => res.json())
|
)
|
||||||
.then(data => {
|
.then(res => res.json())
|
||||||
const layer = new CityBuildingLayer();
|
.then(data => {
|
||||||
layer
|
const layer = new CityBuildingLayer(
|
||||||
.source(data)
|
{
|
||||||
.size('floor', [ 0, 500 ])
|
zIndex: 0
|
||||||
.color('rgba(242,246,250,1.0)')
|
}
|
||||||
.animate({
|
);
|
||||||
enable: true
|
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({
|
.source(data)
|
||||||
opacity: 1.0,
|
.size(1)
|
||||||
baseColor: 'rgb(16,16,16)',
|
.shape('line')
|
||||||
windowColor: 'rgb(30,60,89)',
|
.color('#ff893a')
|
||||||
brightColor: 'rgb(255,176,38)'
|
.animate({
|
||||||
});
|
interval: 1, // 间隔
|
||||||
scene.addLayer(layer);
|
duration: 2, // 持续时间,延时
|
||||||
});
|
trailLength: 2 // 流线长度
|
||||||
|
});
|
||||||
|
scene.addLayer(layer);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,21 @@
|
||||||
"en": "Gallery"
|
"en": "Gallery"
|
||||||
},
|
},
|
||||||
"demos": [
|
"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",
|
"filename": "animate.js",
|
||||||
"title": "轨迹动画",
|
"title": "轨迹动画",
|
||||||
|
|
|
@ -1,12 +1,27 @@
|
||||||
/* eslint-disable no-eval */
|
/* 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';
|
import { Mapbox } from '@antv/l7-maps';
|
||||||
|
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
id: 'map',
|
id: 'map',
|
||||||
map: new Mapbox({
|
map: new Mapbox({
|
||||||
pitch: 40,
|
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 ],
|
center: [ 3.438, 40.16797 ],
|
||||||
zoom: 0.51329
|
zoom: 0.51329
|
||||||
})
|
})
|
||||||
|
@ -22,20 +37,20 @@ Promise.all([
|
||||||
const latlng2 = item.to.split(',').map(e => { return e * 1; });
|
const latlng2 = item.to.split(',').map(e => { return e * 1; });
|
||||||
return { coord: [ latlng1, latlng2 ] };
|
return { coord: [ latlng1, latlng2 ] };
|
||||||
});
|
});
|
||||||
const worldFill = new PolygonLayer()
|
// const worldFill = new PolygonLayer()
|
||||||
.source(world)
|
// .source(world)
|
||||||
.color('#98E3FA')
|
// .color('#98E3FA')
|
||||||
.shape('fill')
|
// .shape('fill')
|
||||||
.style({
|
// .style({
|
||||||
opacity: 1
|
// opacity: 1
|
||||||
});
|
// });
|
||||||
|
|
||||||
const worldLine = new LineLayer()
|
const worldLine = new LineLayer()
|
||||||
.source(world)
|
.source(world)
|
||||||
.color('#fff')
|
.color('#41fc9d')
|
||||||
.size(0.6)
|
.size(0.5)
|
||||||
.style({
|
.style({
|
||||||
opacity: 1
|
opacity: 0.4
|
||||||
});
|
});
|
||||||
const dotPoint = new PointLayer()
|
const dotPoint = new PointLayer()
|
||||||
.source(dotData, {
|
.source(dotData, {
|
||||||
|
@ -46,7 +61,7 @@ Promise.all([
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.shape('circle')
|
.shape('circle')
|
||||||
.color('red')
|
.color('#ffed11')
|
||||||
.animate(true)
|
.animate(true)
|
||||||
.size(40)
|
.size(40)
|
||||||
.style({
|
.style({
|
||||||
|
@ -59,18 +74,18 @@ Promise.all([
|
||||||
coordinates: 'coord'
|
coordinates: 'coord'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.color('#faad14')
|
.color('#ff6b34')
|
||||||
.shape('arc3d')
|
.shape('arc3d')
|
||||||
.size(2.0)
|
.size(2)
|
||||||
.animate({
|
.animate({
|
||||||
interval: 0.1,
|
interval: 2,
|
||||||
trailLength: 1.0,
|
trailLength: 2,
|
||||||
duration: 2
|
duration: 1
|
||||||
})
|
})
|
||||||
.style({
|
.style({
|
||||||
opacity: 1
|
opacity: 1
|
||||||
});
|
});
|
||||||
scene.addLayer(worldFill);
|
// scene.addLayer(worldFill);
|
||||||
scene.addLayer(worldLine);
|
scene.addLayer(worldLine);
|
||||||
scene.addLayer(dotPoint);
|
scene.addLayer(dotPoint);
|
||||||
scene.addLayer(flyLine);
|
scene.addLayer(flyLine);
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
title: Animate
|
title: Animate
|
||||||
order: 1
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
title: 动画
|
title: 动画
|
||||||
order: 1
|
order: 0
|
||||||
---
|
---
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
title: Featured
|
title: Featured
|
||||||
order: 0
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
title: 基础可视化
|
title: 基础可视化
|
||||||
order: 0
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// Data Source https://busrouter.sg/visualization/
|
// 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';
|
import { Mapbox } from '@antv/l7-maps';
|
||||||
|
|
||||||
const scene = new Scene({
|
const scene = new Scene({
|
||||||
|
@ -30,6 +30,7 @@ fetch(
|
||||||
return [ 0.8, level * 1 ];
|
return [ 0.8, level * 1 ];
|
||||||
})
|
})
|
||||||
.shape('line')
|
.shape('line')
|
||||||
|
.active(true)
|
||||||
.color(
|
.color(
|
||||||
'level',
|
'level',
|
||||||
[
|
[
|
||||||
|
@ -47,5 +48,14 @@ fetch(
|
||||||
.reverse()
|
.reverse()
|
||||||
.slice(0, 8)
|
.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);
|
scene.addLayer(layer);
|
||||||
});
|
});
|
||||||
|
|
|
@ -16,24 +16,25 @@ fetch(
|
||||||
)
|
)
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.then(data => {
|
.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({})
|
const layer = new PolygonLayer({})
|
||||||
.source(data)
|
.source(data)
|
||||||
.color(
|
.color(
|
||||||
'density', d => {
|
'density', d => {
|
||||||
return d > 1000 ? '#800026' :
|
return d > 1000 ? color[7] :
|
||||||
d > 500 ? '#BD0026' :
|
d > 500 ? color[6] :
|
||||||
d > 200 ? '#E31A1C' :
|
d > 200 ? color[5] :
|
||||||
d > 100 ? '#FC4E2A' :
|
d > 100 ? color[4] :
|
||||||
d > 50 ? '#FD8D3C' :
|
d > 50 ? color[3] :
|
||||||
d > 20 ? '#FEB24C' :
|
d > 20 ? color[2] :
|
||||||
d > 10 ? '#FED976' :
|
d > 10 ? color[1] :
|
||||||
'#FFEDA0';
|
color[0];
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
.shape('fill')
|
.shape('fill')
|
||||||
.active(true)
|
.active(true)
|
||||||
.style({
|
.style({
|
||||||
opacity: 0.8
|
opacity: 1.0
|
||||||
});
|
});
|
||||||
const layer2 = new LineLayer({
|
const layer2 = new LineLayer({
|
||||||
zIndex: 2
|
zIndex: 2
|
||||||
|
@ -52,7 +53,8 @@ fetch(
|
||||||
|
|
||||||
layer.on('mousemove', e => {
|
layer.on('mousemove', e => {
|
||||||
const popup = new Popup({
|
const popup = new Popup({
|
||||||
offsets: [ 0, 0 ]
|
offsets: [ 0, 0 ],
|
||||||
|
closeButton: false
|
||||||
})
|
})
|
||||||
.setLnglat(e.lngLat)
|
.setLnglat(e.lngLat)
|
||||||
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
|
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
|
||||||
|
|
|
@ -14,7 +14,7 @@ const scene = new Scene({
|
||||||
addLayer();
|
addLayer();
|
||||||
async function getTiffData() {
|
async function getTiffData() {
|
||||||
const response = await fetch(
|
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 arrayBuffer = await response.arrayBuffer();
|
||||||
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
||||||
|
@ -44,13 +44,13 @@ async function addLayer() {
|
||||||
})
|
})
|
||||||
.style({
|
.style({
|
||||||
opacity: 1.0,
|
opacity: 1.0,
|
||||||
clampLow: true,
|
clampLow: false,
|
||||||
clampHigh: true,
|
clampHigh: false,
|
||||||
domain: [ 0, 90 ],
|
domain: [ 0, 90 ],
|
||||||
nodataValue: 0,
|
nodataValue: 0,
|
||||||
rampColors: {
|
rampColors: {
|
||||||
colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ],
|
colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#f8501a', '#f6961f', '#f8d069', '#fffdf8' ],
|
||||||
positions: [ 0, 0.1, 0.25, 0.5, 1.0 ]
|
positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ]
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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);
|
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 = (alpha + u_aimate.w -1.0) / u_aimate.w;
|
||||||
alpha = smoothstep(0., 1., alpha);
|
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 *= alpha * blur;
|
||||||
// gl_FragColor.a = fract(u_time);
|
// gl_FragColor.a = fract(u_time);
|
||||||
}
|
}
|
||||||
|
|
|
@ -88,7 +88,7 @@ export default class TextModel extends BaseModel {
|
||||||
public getUninforms(): IModelUniform {
|
public getUninforms(): IModelUniform {
|
||||||
const {
|
const {
|
||||||
fontWeight = 800,
|
fontWeight = 800,
|
||||||
fontFamily,
|
fontFamily = 'sans-serif',
|
||||||
stroke = '#fff',
|
stroke = '#fff',
|
||||||
strokeWidth = 0,
|
strokeWidth = 0,
|
||||||
} = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
|
} = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
|
||||||
|
|
|
@ -38,7 +38,7 @@ export default class RasterModel extends BaseModel {
|
||||||
noDataValue = -9999999,
|
noDataValue = -9999999,
|
||||||
domain = [0, 1],
|
domain = [0, 1],
|
||||||
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
|
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
|
||||||
|
this.updateColorTexure();
|
||||||
return {
|
return {
|
||||||
u_opacity: opacity || 1,
|
u_opacity: opacity || 1,
|
||||||
u_texture: this.texture,
|
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,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,16 +33,15 @@ export default class LineDemo extends React.Component {
|
||||||
.shape('line')
|
.shape('line')
|
||||||
.color('color', (v) => {
|
.color('color', (v) => {
|
||||||
return `rgb(${v[0]})`;
|
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.addLayer(lineLayer);
|
||||||
scene.render();
|
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -44,38 +44,6 @@ export default class Point3D extends React.Component {
|
||||||
strokeWidth: 1,
|
strokeWidth: 1,
|
||||||
});
|
});
|
||||||
scene.addLayer(pointLayer);
|
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;
|
this.scene = scene;
|
||||||
// });
|
// });
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@ import * as dat from 'dat.gui';
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
|
import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { colorScales } from '../lib/colorscales';
|
||||||
export default class ImageLayerDemo extends React.Component {
|
export default class ImageLayerDemo extends React.Component {
|
||||||
private scene: Scene;
|
private scene: Scene;
|
||||||
private gui: dat.GUI;
|
private gui: dat.GUI;
|
||||||
|
@ -28,35 +28,36 @@ export default class ImageLayerDemo extends React.Component {
|
||||||
});
|
});
|
||||||
const tiffdata = await this.getTiffData();
|
const tiffdata = await this.getTiffData();
|
||||||
const layer = new RasterLayer({});
|
const layer = new RasterLayer({});
|
||||||
|
const mindata = -5000;
|
||||||
|
const maxdata = 10000;
|
||||||
layer
|
layer
|
||||||
.source(tiffdata.data, {
|
.source(tiffdata.data, {
|
||||||
parser: {
|
parser: {
|
||||||
type: 'raster',
|
type: 'raster',
|
||||||
width: tiffdata.width,
|
width: tiffdata.width,
|
||||||
height: tiffdata.height,
|
height: tiffdata.height,
|
||||||
min: 0,
|
// extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||||
max: 8000,
|
extent: [
|
||||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
73.4766000000000048,
|
||||||
|
18.1054999999999993,
|
||||||
|
135.1066187,
|
||||||
|
57.630046,
|
||||||
|
],
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.style({
|
.style({
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
domain: [100, 4000],
|
domain: [mindata, maxdata],
|
||||||
clampLow: true,
|
clampLow: true,
|
||||||
rampColors: {
|
rampColors: {
|
||||||
colors: [
|
colors: [
|
||||||
'#002466',
|
'rgb(166,97,26)',
|
||||||
'#0D408C',
|
'rgb(223,194,125)',
|
||||||
'#105CB3',
|
'rgb(245,245,245)',
|
||||||
'#1A76C7',
|
'rgb(128,205,193)',
|
||||||
'#2894E0',
|
'rgb(1,133,113)',
|
||||||
'#3CB4F0',
|
|
||||||
'#65CEF7',
|
|
||||||
'#98E3FA',
|
|
||||||
'#CFF6FF',
|
|
||||||
'#E8FCFF',
|
|
||||||
],
|
],
|
||||||
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);
|
scene.addLayer(layer);
|
||||||
|
@ -69,8 +70,9 @@ export default class ImageLayerDemo extends React.Component {
|
||||||
clampLow: true,
|
clampLow: true,
|
||||||
clampHigh: true,
|
clampHigh: true,
|
||||||
noDataValue: -9999999,
|
noDataValue: -9999999,
|
||||||
min: 100,
|
min: mindata,
|
||||||
max: 4000,
|
max: maxdata,
|
||||||
|
colorScales: 'jet',
|
||||||
};
|
};
|
||||||
const rasterFolder = gui.addFolder('栅格可视化');
|
const rasterFolder = gui.addFolder('栅格可视化');
|
||||||
rasterFolder.add(styleOptions, 'clampLow').onChange((clampLow: boolean) => {
|
rasterFolder.add(styleOptions, 'clampLow').onChange((clampLow: boolean) => {
|
||||||
|
@ -87,18 +89,31 @@ export default class ImageLayerDemo extends React.Component {
|
||||||
});
|
});
|
||||||
scene.render();
|
scene.render();
|
||||||
});
|
});
|
||||||
rasterFolder.add(styleOptions, 'min', 0, 9000).onChange((min: number) => {
|
rasterFolder
|
||||||
layer.style({
|
.add(styleOptions, 'min', mindata, maxdata)
|
||||||
domain: [min, styleOptions.max],
|
.onChange((min: number) => {
|
||||||
|
layer.style({
|
||||||
|
domain: [min, styleOptions.max],
|
||||||
|
});
|
||||||
|
scene.render();
|
||||||
});
|
});
|
||||||
scene.render();
|
rasterFolder
|
||||||
});
|
.add(styleOptions, 'max', mindata, maxdata)
|
||||||
rasterFolder.add(styleOptions, 'max', 0, 9000).onChange((max: number) => {
|
.onChange((max: number) => {
|
||||||
layer.style({
|
layer.style({
|
||||||
domain: [styleOptions.min, max],
|
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() {
|
public render() {
|
||||||
|
@ -117,7 +132,8 @@ export default class ImageLayerDemo extends React.Component {
|
||||||
}
|
}
|
||||||
private async getTiffData() {
|
private async getTiffData() {
|
||||||
const response = await fetch(
|
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 arrayBuffer = await response.arrayBuffer();
|
||||||
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
||||||
|
|
|
@ -1,42 +1,21 @@
|
||||||
import { PointLayer, Scene } from '@antv/l7';
|
import { PointLayer, Scene } from '@antv/l7';
|
||||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import * as dat from 'dat.gui';
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import data from '../data/data.json';
|
import data from '../data/data.json';
|
||||||
export default class TextLayerDemo extends React.Component {
|
export default class TextLayerDemo extends React.Component {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
private scene: Scene;
|
private scene: Scene;
|
||||||
|
private gui: dat.GUI;
|
||||||
|
|
||||||
public componentWillUnmount() {
|
public componentWillUnmount() {
|
||||||
this.scene.destroy();
|
this.scene.destroy();
|
||||||
|
if (this.gui) {
|
||||||
|
this.gui.destroy();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public async componentDidMount() {
|
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(
|
const response = await fetch(
|
||||||
'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
|
'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
|
||||||
);
|
);
|
||||||
|
@ -76,6 +55,32 @@ export default class TextLayerDemo extends React.Component {
|
||||||
scene.addLayer(pointLayer);
|
scene.addLayer(pointLayer);
|
||||||
|
|
||||||
this.scene = scene;
|
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();
|
||||||
|
});
|
||||||
// });
|
// });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue