❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画
❉ 效果演示
二、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
三、❉ 源码获取
`html5基于echarts.js制作3D炫酷世界地图地球仪动画，业务迁移热点显示动画，地图勾起动画，非常炫酷。ps：涉及跨域，本地上传服务器查看演示。
❉ 文章目录
❉ 效果演示
基于Echarts实现可视化数据大屏展示(150套)——制作深蓝色科技感物流云数据看板页面模板
❉ 1.动态效果
❉ 2.静态效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>echarts 3D地球代码世界地图 </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
position: absolute;
}
#box {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="box" class="box"> </div>
<script type="text/javascript">
var canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 1024;
function update(threshold, levels) {
context.clearRect(0, 0, canvas.width, canvas.height);
var thresholds = [];
for (var i = 0; i < levels; i++) {
thresholds.push((threshold + 1 / levels * i) % 1);
}
results = contours.thresholds(thresholds)(values);
redraw();
}
function redraw() {
results.forEach(function(d, idx) {
context.beginPath();
path(d);
context.globalAlpha = 1;
context.stroke();
if (idx > config.levels / 5 * 3) {
context.globalAlpha = 0.01;
context.fill();
}
});
opt.onupdate();
}
d3.timer(function(t) {
var threshold = (t % 10000) / 10000;
update(threshold, 1);
});
initCharts(opt);
update(config.threshold, config.levels);
});
function image(url) {
return new Promise(function(resolve) {
var image = new Image();
image.src = url;
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width / 8;
canvas.height = image.height / 8;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, canvas.width, canvas.height);
resolve(context.getImageData(0, 0, canvas.width, canvas.height));
};
});
}
function initCharts(opt) {
var option = {
title: {
// text: '点击地球获取该区域地图',
textStyle: {
color: '#fff'
}
},
tooltip: {
show: true
},
globe: {
// baseTexture: mapChart,
// environment:'none',//背景
environment: 'img/charity_top.png',
heightTexture: 'img/bathymetry_bw_composite_4k-back.jpg',
baseTexture: 'img/8.png',
shading: 'lambert',
light: { // 光照阴影
main: {
color: 'blue', // 光照颜色
intensity: 14.2, // 光照强度
shadowQuality: 'ultra', //阴影亮度
shadow: true, // 是否显示阴影
alpha: 40,
beta: -30
},
ambient: {
intensity: 4.6
}
},
viewControl: {
alpha: 30,
beta: 160,
// targetCoord: [116.46, 39.92],
autoRotate: true,
autoRotateAfterStill: 10,
distance: 240,
autoRotateSpeed: 4
},
postEffect: { //为画面添加高光，景深，环境光遮蔽(SSAO)，调色等效果
enable: true, //是否开启
SSAO: { //环境光遮蔽
radius: 1, //环境光遮蔽的采样半径。半径越大效果越自然
intensity: 1, //环境光遮蔽的强度
enable: true
}
},
layers: [{
type: 'blend',
blendTo: 'emission',
texture: contourChart,
intensity: config.intensity
}]
},
series: [{
name: 'lines3D',
type: 'lines3D',
coordinateSystem: 'globe',
effect: {
show: true,
period: 2,
trailWidth: 3,
trailLength: 0.5,
trailOpacity: 1,
trailColor: '#0087f4'
},
blendMode: 'lighter',
lineStyle: {
width: 1,
color: '#0087f4',
opacity: 0.2
},
data: [],
silent: false
}, { //点
name: '景区',
// type: 'effectScatter',
// coordinateSystem: 'bmap',
type: 'scatter3D',
blendMode: 'lighter',
coordinateSystem: 'globe',
showEffectOn: 'render',
zlevel: 2,
effectType: "ripple",
symbolSize: 15,
rippleEffect: {
period: 4,
scale: 4,
brushType: 'fill'
},
// showEffectOn: 'hover',
hoverAnimation: true,
label: {
normal: {
show: true,
position: 'right',
// formatter: '{b}',
formatter: function(params) {
if (params.dataIndex == 1) {
return '南京'
} else if (params.dataIndex == 2) {
return '沈阳'
} else if (params.dataIndex == 3) {
return '太原'
} else if (params.dataIndex == 4) {
return '日本'
} else if (params.dataIndex == 5) {
return '雅加达'
} else if (params.dataIndex == 0) {
return '徐州'
} else if (params.dataIndex == 6) {
return '昆明'
}
},
textStyle: {
fontSize: 18,
color: '#f5d909',
fontWeight: 'bold',
backgroundColor: 'transparent'
}
}
},
itemStyle: {
normal: {
color: 'rgb(29,183,255)'
}
},
data: [
[117.11, 34.15],
[118.58, 32.01],
[123.38, 41.8],
[112.01, 38.01],
[139.46, 35.42],
[116.58, 6.10],
[102.90, 25.31]
]
}]
}
// 随机数据
option.series[0].data = [{
coords: [
[117.11, 34.15],
[118.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords: [
[123.38, 41.8],
[118.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords: [
[112.01, 38.01],
[118.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords: [
[139.46, 35.42],
[118.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords: [
[116.58, 6.10],
[118.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords: [
[102.90, 25.31],
[118.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
}
]
for (let i = 0; i < 10; i++) {
option.series[0].data = option.series[0].data.concat(rodamData())
}
function rodamData() {
let name = '随机点' + Math.random().toFixed(5) * 100000
// let longitude = Math.random() * 62 + 73
let longitude = 118.58
let longitude2 = Math.random() * 360 - 180
// let latitude = Math.random() * 50 + 3.52
let latitude = 32.01
let latitude2 = Math.random() * 180 - 90
return {
coords: [
[longitude2, latitude2],
[longitude, latitude]
],
value: (Math.random() * 3000).toFixed(2)
}
}
myChart.setOption(option)
}
})
</script>
</body>
</html>
二、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
三、❉ 源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉ 3.以上内容技术相关问题可以相互学习，可关注↓公众号 获取更多源码 !
8090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
