效果图 

贴下源码

<code><template>

<div class="map-bg">code>

<div class="canvas" id="canvs"></div>code>

<canvas class="canvasxk" id="canv"></canvas>code>

</div>

</template>

<script setup name="mapBg">code>

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

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

资料包：https://download.csdn.net/download/galaxyJING/89301854