<!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,//环境光遮蔽的采样半径。半径越大效果越自�
地球.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资源评论
