<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>the earth</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
position: absolute;
}
#box{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<span style="color:red ;">你加载到我了,欢迎光临！我是地球</span>
<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: {//环境光遮蔽
VUE网页带视频播放器无需部署直接打开
需积分: 5 59 浏览量
2024-05-12
01:14:19
上传
评论
收藏 23.75MB ZIP 举报
jianyi.zip （56个子文件） 
jianyi 
saturn.html 3KB js v2.6.10 
vue.js 333KB vue.min.js 91KB echarts-gl.js 598KB v3.2.8 vue.global.prod.js 122KB data-1499132667476-ry7ZXuu4Z.js 535KB china.js 79KB jquery-3.3.1.min.js 85KB echarts.min.js 648KB jquery-1.11.0.js 276KB world.js 987KB canva_moving_effect.js 6KB 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 jupiter.html 6KB img 
charity_top.png 383KB
2.jpg 18KB picture 
t1.gif 367KB 2.jpg 15KB s1.gif 1.63MB 5.jpg 14KB 2.gif 2.58MB 1.gif 1.55MB h1.gif 2.15MB 3.jpg 15KB 4.jpg 9KB 6.jpg 6KB 1.jpg 14KB 1 5.webp 22KB 11.webp 21KB 3.webp 21KB 12.webp 30KB 6.webp 14KB 1.gif 1.5MB bathymetry_bw_composite_4k-back.jpg 1.22MB 5.jpg 15KB 8.png 585KB
1.mp4 9.6MB 3.jpg 45KB 4.jpg 31KB css style.css 3KB fontawesome-all.css 43KB act.css 9KB mercury.html 4KB index.html 2KB mars.html 2KB the earth.html 13KB资源评论
m0_51947845
- 粉丝: 3
- 资源: 6
最新资源
- vmware workstation pro 17 linux版
- 3479521_1710042575-1.rwmod
- 安装及环境配置UMCM-2023C-ma笔记
- (完整)数据库课程设计餐厅点餐说明书-21ab6d3c8beb172ded630b1c59eef8c75ebf952c.doc
- 2023-04-06-项目笔记 - 第一百五十四阶段 - 4.4.2.152全局变量的作用域-152 -2024.06.04
- 松哥解协议松哥解协议松哥解协议松哥解协议松哥解协议
- 618节日618节日618节日
- tensorflow-gpu-2.9.1-cp37-cp37m-win-amd64.whl
- tensorflow-gpu-2.9.0-cp37-cp37m-win-amd64.whl
- tensorflow-gpu-2.9.0-cp39-cp39-win-amd64.whl
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
