260Echarts - 3D 路径图(Flights)
3D 路径
2023-09-11 14:15:41 时间
效果图
源代码
$.getJSON('./data-gl/asset/data/flights.json', function (data) {
var airports = data.airports.map(function (item) {
return {
coord: [item[3], item[4]]
}
});
function getAirportCoord(idx) {
return [data.airports[idx][3], data.airports[idx][4]];
}
// Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
var routesGroupByAirline = {};
data.routes.forEach(function (route) {
var airline = data.airlines[route[0]];
var airlineName = airline[0];
if (!routesGroupByAirline[airlineName]) {
routesGroupByAirline[airlineName] = [];
}
routesGroupByAirline[airlineName].push(route);
});
var pointsData = [];
data.routes.forEach(function (airline) {
pointsData.push(getAirportCoord(airline[1]));
pointsData.push(getAirportCoord(airline[2]));
});
var series = data.airlines.map(function (airline) {
var airlineName = airline[0];
var routes = routesGroupByAirline[airlineName];
if (!routes) {
return null;
}
return {
type: 'lines3D',
name: airlineName,
effect: {
show: true,
trailWidth: 2,
trailLength: 0.15,
trailOpacity: 1,
trailColor: 'rgb(30, 30, 60)'
},
lineStyle: {
width: 1,
color: 'rgb(50, 50, 150)',
// color: 'rgb(118, 233, 241)',
opacity: 0.1
},
blendMode: 'lighter',
data: routes.map(function (item) {
return [airports[item[1]].coord, airports[item[2]].coord];
})
};
}).filter(function (series) {
return !!series;
});
series.push({
type: 'scatter3D',
coordinateSystem: 'globe',
blendMode: 'lighter',
symbolSize: 2,
itemStyle: {
color: 'rgb(50, 50, 150)',
opacity: 0.2
},
data: pointsData
});
myChart.setOption({
legend: {
selectedMode: 'single',
left: 'left',
data: Object.keys(routesGroupByAirline),
orient: 'vertical',
textStyle: {
color: '#fff'
}
},
globe: {
environment: 'data-gl/asset/starfield.jpg',
heightTexture: 'data-gl/asset/bathymetry_bw_composite_4k.jpg',
displacementScale: 0.1,
displacementQuality: 'high',
baseColor: '#000',
shading: 'realistic',
realisticMaterial: {
roughness: 0.2,
metalness: 0
},
postEffect: {
enable: true,
depthOfField: {
enable: false,
focalDistance: 150
}
},
temporalSuperSampling: {
enable: true
},
light: {
ambient: {
intensity: 0
},
main: {
intensity: 0.1,
shadow: false
},
ambientCubemap: {
texture: 'data-gl/asset/lake.hdr',
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2
}
},
viewControl: {
autoRotate: false
},
silent: true
},
series: series
});
window.addEventListener('keydown', function () {
series.forEach(function (series, idx) {
myChart.dispatchAction({
type: 'lines3DToggleEffect',
seriesIndex: idx
});
})
});
});
相关文章
- [web前端] css3 transition属性实现3d动画效果
- 基于 HTML5 结合互联网+ 的 3D 隧道
- A Baseline for 3D Multi-odject Tracking:多目标跟踪方法
- PCL 3D-SIFT关键点检测(RGB颜色特征约束)
- 3D卷积的GEMM+IM2COL实现
- Three.js 3D打印数据模型文件(.STL)载入中
- SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!
- 3D游戏从入门到精通-31
- 3D游戏从入门到精通-14
- 3D游戏从入门到精通-16
- 在Vue项目中引入 ECharts 3D 路径图 Flights GL(需安装echarts、echarts-gl、jQuery依赖,已踩坑)
- 3D点云重建0-05:MVSNet-源码解析(1)-数据集了解,预处理详解
- 【三】3D匹配Matching之可变形曲面匹配Deformable Surface—get_deformable_surface_model_param()算子
- 【三】3D匹配Matching之曲面匹配Surface—Based——find_surface_model()算子
- 【三】3D匹配Matching之外形匹配Shape—Based——create_cam_pose_look_at_point()算子
- 【三】3D匹配Matching之外形匹配Shape—Based——clear_shape_model_3d()/clear_all_shape_model_3d()算子