slides/webgl/asset/ec-demo2/map3D.html (129 lines of code) (raw):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Airline - ECHARTS-GL</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<div id="main"></div>
<script src="../common/echarts.min.js"></script>
<script src="../common/map/js/world-simp.js"></script>
<script src="../common/jquery.min.js"></script>
<script src="../common/echarts-gl.js"></script>
<script src="../common/StageControl.js"></script>
<script src="../data/alcohol.json.js"></script>
<script src="../texture/canyon.hdr.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
var regionData = alcoholData.map(function (item) {
return {
name: item[0],
value: item[1]
};
});
var regionData2 = alcoholData.map(function (item) {
return {
name: item[0],
value: item[1],
height: Math.max(item[1] / 10, 0.1)
};
});
chart.setOption({
visualMap: {
min: 0,
max: 15,
realtime: true,
calculable : true,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
series: [{
type: 'map3D',
map: 'world-simp',
shading: 'lambert',
boxHeight: 0.1,
realisticMaterial: {
roughness: 0.2,
metalness: 0
},
postEffect: {
enable: false
},
viewControl: {
distance: 60,
alpha: 89
},
silent: true,
data: regionData
}]
});
new StageControl([
function () {
},
function () {
chart.setOption({
series: [{
debug: {
wireframe: {
show: true,
lineStyle: {
color: 'rgba(0,0,0,0.6)',
width: 0.5
}
}
}
}]
});
},
function () {
chart.setOption({
series: [{
boxHeight: 1,
data: regionData2,
viewControl: {
alpha: 30,
minDistance: 30,
distance: 30,
animationDurationUpdate: 4000,
animationDurationEasing: 'cubicInOut'
}
}]
});
},
function () {
chart.setOption({
series: [{
postEffect: {
enable: true
},
groundPlane: {
show: true
},
light: {
main: {
intensity: 2,
shadow: true,
shadowQuality: 'high',
alpha: 30
},
ambient: {
intensity: 0
},
ambientCubemap: {
texture: canyonUrl,
exposure: 1,
diffuseIntensity: 0.5
}
}
}]
});
},
]);
window.onresize = chart.resize;
</script>
</body>
</html>