效果圖如下（谷歌不行，火狐可以）
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="earth" style="width: 100%; height: 600px"></div>
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./echarts.js"></script>
<script src="./echarts-gl.js"></script>
<script src="./world.js"></script>
<script>
var dom = document.getElementById("earth")
var myChart = echarts.init(dom);
$.getJSON('./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({
backgroundColor: '#000',
globe: {
baseTexture: "./world.jpg",
heightTexture: "./world.jpg",
displacementScale: 0.04,
shading: 'realistic',
environment: './starfield.jpg',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: './pisa.hdr',
diffuseIntensity: 0.2
}
}
},
series: series
});
window.addEventListener('keydown', function () {
series.forEach(function (series, idx) {
myChart.dispatchAction({
type: 'lines3DToggleEffect',
seriesIndex: idx
});
})
});
});
</script>
</body>
</html>