前端动态旋转地球背景

效果图

贴下源码

<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>