<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>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 src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts-gl.js" type="text/javascript" charset="utf-8"></script>
<script src="js/china.js" type="text/javascript" charset="utf-8"></script>
<script src="js/world.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data-1499132667476-ry7ZXuu4Z.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
color: '#750be8',
levels: 1,
intensity: 4,
threshold: 0.01
}
var canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 1024;
context = canvas.getContext("2d");
context.lineWidth = 0.5;
context.strokeStyle = config.color;
context.fillStyle = config.color;
context.shadowColor = config.color;
$.when(
$.getScript('./js/world-gl-map/d3-contour.js'),
$.getScript('./js/world-gl-map/d3_geo.js'),
$.getScript('./js/world-gl-map/d3_timer.js')
).done(function () {
image('img/8.png').then(function(image) {
var m = image.height,
n = image.width,
values = new Array(n * m),
contours = d3.contours().size([n, m]).smooth(true),
projection = d3.geoIdentity().scale(canvas.width / n),
path = d3.geoPath(projection, context);
// StackBlur.R(image, 5);
for (var j = 0, k = 0; j < m; ++j) {
for (var i = 0; i < n; ++i, ++k) {
values[k] = image.data[(k << 2)] / 255;
}
}
var opt = {
image: canvas
}
var results = [];
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 myChart = echarts.init(document.getElementsByClassName("box")[0])
let canvas2 = document.createElement('canvas');
let mapChart = echarts.init(canvas2, null, {
width: 2048,
height: 1024
});
var contourChart = echarts.init(document.createElement('canvas'), null, {
width: 2048,
height: 1024
});
var img = new echarts.graphic.Image({
style: {
image: opt.image,
x: -1,
y: -1,
width: opt.image.width + 2,
height: opt.image.height + 2
}
});
contourChart.getZr().add(img);
opt.onupdate = function () {
img.dirty();
};
mapChart.setOption({
series: [{
type: 'map',
map: 'world',
// 绘制完整尺寸的 echarts 实例
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
]
}]
});
var canvas1 = document.createElement('canvas');
var mapChart1 = echarts.init(canvas1, null, {
width: 2048,
height: 1024
});
mapChart1.setOption({
backgroundColor: 'transparent',
series: [{
type: 'map',
map: 'china',
left: 0,
top: 0,
right: 0,
bottom: 0,
// environment: '#000',
boundingCoords: [
[-180, 90],
[180, -90]
],
label: {
normal: {
show: false,
fontSize: 4,
lineHeigh: 4,
color: '#000',
}
},
itemStyle: {
normal: {
areaColor: 'transparent',
borderWidth: 1,
borderType: 'solid',
borderColor: '#a85000'
}
},
}]
});
var option = {
title: {
// text: '点击地球获取该区域地图',
textStyle: {
color: '#fff'
}
},
tooltip: {
show: true
},
// visualMap: [{
// // show: false,
// type: 'continuous',
// seriesIndex: 0,
// text: ['scatter3D'],
// textStyle: {
// color: '#fff'
// },
// calculable: true,
// max: 3000,
// inRange: {
// color: ['#87aa66', '#eba438', '#d94d4c']
// }
// }],
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,//环境光遮蔽的采样半径。半径越大效果越自�
html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷
版权申诉
10 浏览量
2023-01-14
23:37:14
上传
评论 1
收藏 7.88MB ZIP 举报
地球.zip （22个子文件） 
地球 
9daa6962ee5102bad8b0985ceedaba8c.zip 3.94MB js 
echarts-gl.js 598KB data-1499132667476-ry7ZXuu4Z.js 535KB china.js 79KB echarts.min.js 648KB jquery-1.11.0.js 276KB world.js 987KB world-gl-map echarts-gl.js 598KB mapboxgl-token.js 104B d3_timer.js 4KB data-1499132667476-ry7ZXuu4Z.js 535KB baidu-com.js 238B china.js 61KB d3-contour.js 13KB d3_geo.js 87KB lake.hdr 442KB unpkg.js 15KB mapbox-gl.js 519KB img 
charity_top.png 383KB
bathymetry_bw_composite_4k-back.jpg 1.22MB 8.png 585KB css 
index.html 13KB资源评论
water-之
- 粉丝: 1163
- 资源: 22
最新资源
- python-leetcode面试题解之第152题乘积最大子数组-题解.zip
- python-leetcode面试题解之第151题反转字符串中的单词-题解.zip
- python-leetcode面试题解之第150题逆波兰表达式求值-题解.zip
- python-leetcode面试题解之第149题直线上最多的点数-题解.zip
- python-leetcode面试题解之第148题排序链表-题解.zip
- python-leetcode面试题解之第147题对链表进行插入排序-题解.zip
- python-leetcode面试题解之第146题LRU缓存-题解.zip
- python-leetcode面试题解之第145题二叉树的后序遍历-题解.zip
- python-leetcode面试题解之第144题二叉树的前序遍历-题解.zip
- python-leetcode面试题解之第143题重排链表-题解.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
