本文介绍了一种使用L7.js实现台风路径动态可视化的方案。通过加载特定的台风数据JSON文件，可以展示不同强度等级的台风路径，并采用动画效果增强视觉体验。
源码复制成功复制失败全屏 复制 运行
台风数据可视化#map { position:absolute; top:0; bottom:0; width:100%; }
#map { position:absolute; top:0; bottom:0; width:100%; }
var scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [110.19382669582967, 40.258134],
pitch: 0,
zoom: 3
});
// 加载图层需要sceneload完成之后
scene.on('loaded', function() {
$.get('https://gw.alipayobjects.com/os/basement_prod/d9cbccb0-8acb-418b-a7e6-27a342c70b7b.json', function(data) {
scene.LineLayer({
zIndex: 2
}).source(data).shape('line').size('Grade', [1, 2]).color('Grade', ['rgb(215,48,39)', 'rgb(244,109,67)', 'rgb(253,174,97)', 'rgb(254,224,144)', 'rgb(224,243,248)', 'rgb(171,217,233)', 'rgb(116,173,209)', 'rgb(69,117,180)'].reverse()).animate({
enable: true,
interval: 1,
duration: 1,
trailLength: 0.8
}).style({
opacity: 0.8
}).render();
});
});
台风数据可视化#map { position:absolute; top:0; bottom:0; width:100%; }
#map { position:absolute; top:0; bottom:0; width:100%; }
var scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [110.19382669582967, 40.258134],
pitch: 0,
zoom: 3
});
// 加载图层需要sceneload完成之后
scene.on('loaded', function() {
$.get('https://gw.alipayobjects.com/os/basement_prod/d9cbccb0-8acb-418b-a7e6-27a342c70b7b.json', function(data) {
scene.LineLayer({
zIndex: 2
}).source(data).shape('line').size('Grade', [1, 2]).color('Grade', ['rgb(215,48,39)', 'rgb(244,109,67)', 'rgb(253,174,97)', 'rgb(254,224,144)', 'rgb(224,243,248)', 'rgb(171,217,233)', 'rgb(116,173,209)', 'rgb(69,117,180)'].reverse()).animate({
enable: true,
interval: 1,
duration: 1,
trailLength: 0.8
}).style({
opacity: 0.8
}).render();
});
});
扫一扫
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
