Echarts 3d地球实现(Vue框架)_echarts 地球

最近迷上了echarts实现数据可视化了，也确实因为工作需要，目前公司需要我们来在自己的新厂房展厅把自己的产品展示出来，我所在研发部软件组，第一个想到的就是使用echarts来实现一个数据可视化的大屏了，下面就带着大家看看我这段时间使用Echarts来实现一个3D地球的过程:

1.环境准备工作

准备一个Vue的工程项目，然后导入两个配置echarts 和 echarts-gl 并引用到项目工程之中:

npm install echarts
npm install echarts-gl

2.编写代码

echarts 使用起来还是很方便的，结合echarts 官网给出的配置手册可以轻松完成数据可视化的配置工作，这边给出我的代码和实现效果，大家如果有什么不懂的可以评论在下面,看到会回复的。

<template>
    <div>
        <h1>这是3D地球的渲染界面</h1>
        <div class="myworld" ref="myworld"></div>
    </div>
</template>
 
<script>
// 引入世界地球的json文件！
import worldJson from '../../../src/static/others/json/world.json'
// 引入世界地图的图片
import earthjpg from '../../../src/static/img/earth.jpeg'
export default {
    data() {
        return {
        }
    },
    methods: {
 
    },
    mounted() {
 
 
        // 基于准备好的dom，初始化echarts实例
        var world = this.$echarts.init(this.$refs.myworld);
        // 指定图标的配置项和数据
        this.$echarts.registerMap("world", worldJson);
 
 
        // 使用 echarts 绘制世界地图的实例作为纹理
        var canvas = document.createElement('canvas');
        var mapChart = this.$echarts.init(canvas, null, {
            width: 4096, height: 2048
        });
        mapChart.setOption({
            series: [
                {
                    type: 'map',
                    map: 'world',
                    // 绘制完整尺寸的 echarts 实例
                    top: 0, left: 0,
                    right: 0, bottom: 0,
                    boundingCoords: [[-180, 90], [180, -90]]
                }
            ]
        });
 
        // 设置配置项
        let optionWorld = {
            // backgroundColor: "#013954",
            globe: {
                // 是否显示地球组件：值为布尔类型，默认就是true
                // show: true,
                // 内半径 地球的内半径
                globeRadius: 120,
                // 外半径
                globeOuterRadius: 130,
                // 配置背景颜色！
                environment: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#00aaff' // 天空颜色
                }, {
                    offset: 0.7, color: '#998866' // 地面颜色
                }, {
                    offset: 1, color: '#998866' // 地面颜色
                }], false),
                // 地球的纹理，支持图片路径的字符串，图片或者canvas的对象,如果不设置这个，地球出不来
                // baseTexture: earthjpg,
                // 也支持直接使用echarts的实例来作为纹理此时在地球上的鼠标动作会跟纹理上使用的echarts实例有联动！
                baseTexture: mapChart,
                // 地球三维图形的着色效果
                shading: "color",
                colorMaterial :{
                    detailTexture : earthjpg
                },
                // 用于鼠标的旋转、缩放等控制视角
                viewControl: {
                    // 透视投影
                    projection: 'perspective',
                    alpha: 30,
                    beta: 160,
                    // 开启球体自旋转
                    autoRotate: true,
                    // 设置地球的自转速度: 单位为 度/秒，默认值为10，也就是36秒转一圈！
                    autoRotateSpeed: 20,
                    // 在鼠标停止操纵后，球体恢复自转的事件
                    autoRotateAfterStill: 2,
                    // 默认视角距离主体的距离
                    distance: 240
                }
            },
            series: [
                // 尝试一下，实现3d的飞线效果
                {
                    type: 'lines3D',
                    coordinateSystem: 'globe',
                    globeIndex: 0,
                    // polyline: true,
                    effect: {
                        show: true,
                        period: 1,
                        trailWidth: 10
                    },
                    lineStyle: {
                        color: 'blue',
                        width: 2,
                        opacity: 0.5,
                    },
                    data: [
                        [
                            [114.519696, 36.680402, 10],
                            [-47.231034, -13.283588, 20]
                        ],
                        [
                            [114.519696, 36.680402, 10],
                            [-77.051902,38.920496, 20]
                        ],
                        [
                            [114.519696, 36.680402, 10],
                            [174.744397,-41.228444, 20]
                        ],
                        [
                            [-155.578464,19.896262,20],
                            [114.519696, 36.680402, 10]
                        ],
                        [
                            [77.080047,28.775878,20],
                            [-75.702,45.444995, 20]
                        ],
                        [
                            [28.088045,-25.518807,20],
                            [-149.861504,61.220877,30]
                        ]
                    ]
                }
            ],
        }
        world.clear()
        world.setOption(optionWorld, true);
 
    }
}
</script>
<style>
.myworld {
    width: 600px;
    height: 600px;
}
</style>

3.效果展示和总结:

 使用到的地求图片:

额外附上友情链接: Echarts官网： https://echarts.apache.org/zh/index.html