前端动态旋转地球背景

效果图

贴下源码

<template>
	<div class="map-bg">
		<div class="canvas" id="canvs"></div>
		<canvas class="canvasxk" id="canv"></canvas>
	</div>
</template>

<script setup name="mapBg">
	import * as echarts from "echarts"
	import {stars_nest} from '@/xk.js'
	const initCanvBg = () => {
		let myEcharts = echarts.init(document.getElementById("canvs"));
		fetch('/dq.json')
			.then(response => response.json())
			.then(data => {
				data = data.filter(function(dataItem) {
						return dataItem[2] > 0;
					})
					.map(function(dataItem) {
						return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
					});
				myEcharts.setOption({

					globe: {
						show: false,
						globeOuterRadius: 100,
						shading: 'color',
						displacementScale: 0.1,
						displacementQuality: 'high',
						realisticMaterial: {
							// 纹理贴图相关
							roughness: 0.7, // 材质的粗糙度  越粗糙反光度越低
							metalness: 0.5, // 金属质感 0为金属  1为非金属, 在这之间设置
						},
						viewControl: {
							autoRotate: true,
							distance: 138,
							targetCoord: [123.38, 6]
						},
						light: {
							// main: {
							//     intensity: 5,
							//     shadow: false
							// },
							ambient: {
								intensity: 2,
							},
							// ambientCubemap: {
							//     texture: 'data-gl/asset/pisa.hdr',
							//     diffuseIntensity: 5
							// }
						},
					},
					series: [{
						type: 'scatter3D',
						coordinateSystem: 'globe',
						blendMode: 'lighter',
						symbolSize: 1,
						silent: true,
						itemStyle: {
							color: '#00aaff',
							opacity: 1,
						},
						data: data,
					}, ],
				});
			})
		window.onresize = function() {
			//自适应大小
			myEcharts.resize();
		};
	};
	onMounted(() => {
		initCanvBg();
		stars_nest();
	})
</script>

<style lang="scss" scoped>
	.map-bg {
		width: 100%;
		height: 100%;
		position: relative;
		.canvas{
			width: 100%;
			height: 80%;
			position: absolute;
			top: 8%;
			z-index: 2;
		}
		.canvasxk{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			z-index: 1;
			top: 0;
			opacity: .2;
		}
	}
</style>