学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~，谢谢大家⭐️⭐️⭐️~
🌏 实现3D地球步骤如下：
1、从官网上下载echarts.min.js、echarts-gl.min.js、d3.js文件，引入到html 页面中
<script src="../../js/incubator-echarts-4.9.0/echarts.min.js"></script>
<script src="../../js/echarts-gl/echarts-gl.js"></script>
<script src="../../js/d3/d3.js"></script>
2、为地球创建一个id为showC的div容器
<div id="showC"></div>
3、现在创建地球进行绘制，代码如下全部附上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3地球</title>
<script src="../../js/incubator-echarts-4.9.0/echarts.min.js"></script>
<script src="../../js/echarts-gl/echarts-gl.js"></script>
<script src="../../js/d3/d3.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#showC {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="showC"></div>
</body>
<script>
var baseImg = "../../img/data-1571295640429-3Co5rpLX.png"; // 背景纹理贴图
var scanImg = "../../img/data-1571295559348-whnsd6fi.jpg"; // 扫描光影效果
var myChart = echarts.init(document.getElementById("showC"));
var config = {
// 扫描线条配置
lineWidth: 0.5, // 扫描线条宽度
color: '#01CADE', // 线条颜色
levels: 1,
intensity: 3, // 强度
threshold: 0.01
}
var canvas = document.createElement('canvas');
canvas.width = 4096;
canvas.height = 2048;
context = canvas.getContext("2d");
context.lineWidth = config.lineWidth;
context.strokeStyle = config.color;
context.fillStyle = config.color;
context.shadowColor = config.color;
image(scanImg).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 contourChart = echarts.init(document.createElement('canvas'), null, {
width: 4096,
height: 2048
});
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();
};
myChart.setOption({
globe: {
top: '5%',
globeRadius: 130,
baseTexture: baseImg,
displacementScale: 0.05,
displacementQuality: 'high',
shading: 'realistic',
realisticMaterial: {
roughness: 0.2,
metalness: 0
},
postEffect: {
enable: true,
depthOfField: {
// enable: true
}
},
light: {
ambient: {
intensity: 1
},
main: {
// 主光源
intensity: 0,
shadow: false
},
/*ambientCubemap: {
texture: ROOT_PATH + 'data-gl/asset/lake.hdr',
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2
}*/
},
viewControl: {
center: [0, 0, 0],
alpha: 30,
beta: 160,
autoRotate: true,
autoRotateAfterStill: 10,
distance: 240,
autoRotateSpeed: 4,
targetCoord: [100.405051, 30.912916]
},
layers: [{
type: 'blend',
blendTo: 'emission',
texture: contourChart,
intensity: config.intensity,
}],
},
series: [{
// 点
type: 'scatter3D',
// type: 'scatter',
coordinateSystem: 'globe',
blendMode: 'source-over',
showEffectOn: 'render',
zlevel: 10,
effectType: 'ripple',
// symbol:"path://data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAllBMVEX8xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38v0v7sSX7rx/7sSYAAACsGEOsAAAALHRSTlMAAiJCWWRhViBYZiEBN22Wsr+xlYS8wr1bwSRuy+v8JUT7RVpjvlfMA8CwO6U37FgAAAABYktHRDHZ2x1yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH5QUYCTchBK9bdAAAAMxJREFUGNNtkdsSgjAMREMFLyuKoAZFQQXvVvT/v84UOoCO+9Se6c4mWyIjR/Vcrz/oKYcaDUewGo0t8ifoaOJX0LBpMAvDaD411DAlh8WSK8ULuSjJWAlbs9Va6MqhBNjEzNs0y9KtvN0AO9oDc2EHLToIDYCcCiBiTvWzLJ86ZZ4BBR2BkDnT5etV6ow5BDzq/8CTgefG/q7skbHXQZc66GKD/o70Z/irXTP+XrMp5Ha6t4WQ/+hW9/Bto+O2ZNVW7yS563luntTf8QEebBqPN9S75gAAAABJRU5ErkJggg==",
symbolSize: 15,
rippleEffect: {
period: 4,
scale: 4,
brushType: 'fill'
},
hoverAnimation: true,
itemStyle: {
normal: {
label: {
show: true,
formatter: function (params) {
return params.data[3] + '\n' + params.data[4] + '\n' + params.data[5];
},
distance: 10
},
},
emphasis: {
label: {
show: true,
formatter: function (params) {
return params.data[3] + '\n' + params.data[4] + '\n' + params.data[5];
},
distance: 10
},
}
},
data: [
[116.405051, 39.912916,1,"1","北京市","啦啦啦啦啦啦a"],
[104.071388, 30.639088,2,"2","四川省","啦啦啦啦啦啦b"],
[121.493628, 31.241707,3,"3","上海市","啦啦啦啦啦啦c"],
]
// data:data,
}]
});
myChart.dispatchAction({
type: 'showTip', // 根据 tooltip 的配置项显示提示框。
seriesIndex: 0,
// dataIndex: 0
});
}
</script>
</html>
效果图展示：
由于文章放不了视频只能以动图的格式展示效果了，动图做的不太好请谅解😊，主要就是想让大家看到整体效果
~，大家也可以直接复制代码到自己本地操作看也是可以滴😜~ 欢迎大家阅读~~~⭐️⭐️⭐️
