echarts3D全球地图飞线效果

这边实现了两种渲染方式，1、图片纹理渲染。2、绘制自定义纹理

需要替换纹理直接把chartOption.globe.baseTexture 改为 '@/assets/image/bigScreen6/world.jpg'

import { ref } from 'vue';
import { graphic } from 'echarts';
import * as echarts from 'echarts';
import 'echarts-gl';
import world from '@/assets/json/world.json';
// import world from '@/assets/image/bigScreen6/world.jpg';

export default function () {
    // 纹理
    echarts.registerMap('world', world);
    let canvas = document.createElement('canvas');
    let myChart2 = echarts.init(canvas, null, {
        width: 4096,
        height: 2048
    });
    myChart2.setOption({
        backgroundColor: 'rgba(3,28,72,0.3)',
        title: {
            show: true
        },
        geo: {
            type: 'map',
            map: 'world',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            boundingCoords: [
                [-180, 90],
                [180, -90]
            ],
            zoom: 0,
            roam: false,
            itemStyle: {
                borderColor: '#000d2d',
                normal: {
                    areaColor: '#2455ad',
                    borderColor: '#000c2d'
                },
                emphasis: {
                    areaColor: '#357cf8'
                }
            },
            label: {
                fontSize: 24
            }
        },
        series: []
    });
    const baseTexture = canvas.toDataURL();

    let chartOption = ref({
        globe: {
            baseTexture: baseTexture, // 地球的纹理
            shading: 'lambert', //地球中三维图形的着色效果
            atmosphere: {
                show: true, //显示大气层
                offset: 8,
                color: '#13315E'
            },
            tooltip: {
                formatter: function (params) {
                    return `<br>攻击数`;
                }
            },
            light: {
                ambient: {
                    intensity: 1 //环境光源强度
                }, //环境光
                main: {
                    intensity: 0.3 //光源强度
                }
            },
            viewControl: {
                autoRotate: true, // 是否开启视角绕物体的自动旋转查看
                autoRotateSpeed: 3, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                autoRotateAfterStill: 2, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
                rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
                targetCoord: [116.46, 39.92] // 定位到北京
            }
        },
        series: [
            {
                type: 'lines3D',
                coordinateSystem: 'globe',
                blendMode: 'lighter',
                lineStyle: {
                    width: 2, // 增加线条宽度
                    color: 'rgb(50, 50, 150)',
                    opacity: 0.6
                },
                data: [
                    [
                        [116.46, 39.92], // 北京
                        [-99.1332, 39.8333] // 美国
                    ],
                    [
                        [116.46, 39.92], // 北京
                        [55.2708, 25.2048] // 阿联酋
                    ],
                    [
                        [116.46, 39.92], // 北京
                        [70.0, -30.0] // 澳大利亚
                    ],
                    [
                        [116.46, 39.92], // 北京
                        [70.0, -30.0] // 澳大利亚
                    ],
                    [
                        [116.46, 39.92], // 北京
                        [70.0, -30.0] // 澳大利亚
                    ]
                ]
            },
            {
                type: 'scatter3D',
                coordinateSystem: 'globe',
                zlevel: 3,
                label: {
                    show: true,
                    position: 'bottom',
                    formatter: '{b}',
                    fontSize: 16
                },
                itemStyle: {
                    color: '#fff'
                },
                data: [
                    { name: '北京', value: [116.46, 39.92] },
                    { name: '美国', value: [-99.1332, 39.8333] },
                    { name: '中国', value: [104.1954, 35.8617] },
                    { name: '阿联酋', value: [55.2708, 25.2048] },
                    { name: '澳大利亚', value: [70.0, -30.0] },
                    { name: '澳大利亚', value: [70.0, -30.0] },
                    { name: '澳大利亚', value: [70.0, -30.0] }
                ]
            }
        ]
    });

    function updateData(value) {}

    return {
        chartOption,
        updateData
    };
}