echarts gl 透视地球 科技感 地球旋转

采用vue2+js实现echarts3D旋转球体的放大、缩小、拖动、旋转。
版权声明：本文为转载 修改CSDN博主「散场的拥抱&」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。如有侵权联系我
原文链接：https://blog.csdn.net/qq_44699269/article/details/134731107

参考链接：https://madeapie.com/#/chartInfo/xJsg-fjzkv

1.效果

二、代码配置：
（1）下载地图数据：将下面的链接在网页上打开并复制里面所有的东西

mapData.json:https://www.isqqw.com/asset/get/s/data-1625545136350-oWFk_ystL.json
map2.json:https://madeapie.com/asset/get/s/data-1491887968120-rJODPy9ae.json
（2）创建main.json，将复制的东西放在main.json里面，结构如下：

3）父组件index.vue

<template>
  <div class="page-con">
    <div class="main-con">
      <tmap />
    </div>
  </div>
</template>

<script>
import tmap from "./components/tmap/tmap.vue";
export default {
  components: {
    tmap
  }
}
</script>

<style lang="scss" scoped>
.page-con {
  width: 100%;
  height: 100%;
  .main-con {
    width: 75%;
    height: 73%;
  }
}
</style>

（4）子组件tmap.vue

<template>
    <div class="bar">
        <div ref="volumn" class="volume" />
    </div>
</template>

<script>
    import echarts from "echarts";
    import "echarts-gl";
    import WorldJSON from './mapData.json';
    import aa from './map2.json';
    echarts.registerMap("world", WorldJSON);
    export default {
        data() {
            return {
                myChart: null,
            };
        },
        mounted() {
            // 获取数据。
            this.$nextTick(() => {
                if (this.$refs.volumn) {
                    this.reloadChart();
                    // 自适应浏览器。
                    window.addEventListener("resize", () => {
                        this.reloadChart();
                    });
                }
            });
        },
        // 组件销毁。
        beforeDestroy() {
            this.disposeChart();
        },
        methods: {
            drawChart() {
                this.myChart = echarts.init(this.$refs.volumn);
                var baseTexture = null;
                var option = null;
                var geoJson = null;
                var bb = null

                function getGeoJsonData() {
                    geoJson = WorldJSON;
                    bb = aa.filter(function(dataItem) {
                            return dataItem[2] > 0;
                        })
                        .map(function(dataItem) {
                            return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
                        });
                    getBaseTexture();
                }

                function getBaseTexture() {
                    echarts.registerMap("world", geoJson);
                    let canvas = document.createElement("canvas");
                    baseTexture = echarts.init(canvas, null, {
                        width: 4096,
                        height: 2048,
                    });
                    baseTexture.setOption({
                        backgroundColor: "#001213",
                    });
                    drawEarth();
                }
                var self = this;

                function drawEarth() {
                    option = {
                        visualMap: {
                            show: false,
                            min: 0,
                            max: 60,
                            inRange: {
                                symbolSize: [1.0, 10.0],
                            },
                        },
                        globe: {
                            show:false,
                            globeOuterRadius: 100,
                            shading: "color",
                            environment: "#00060C",
                            light: {
                                ambient: {
                                    intensity: 1,
                                },
                            },
                        },
                        series: [{
                            type: 'scatter3D',
                            coordinateSystem: 'globe',
                            itemStyle: {
                                color: '#4ECAF1', //球上面点颜色
                                opacity: 1,
                            },
                            data: bb,
                        }, ],
                    };
                    self.myChart.clear();
                    self.myChart.setOption(option, true);
                }
                getGeoJsonData();
            },
            
            // 销毁图表。
            disposeChart() {
                if (this.myChart) {
                    this.myChart.dispose();
                }
            },
            // 重新加载图表。
            reloadChart() {
                this.disposeChart();
                this.drawChart();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .bar {
        width: 100%;
        height: 100%;

        .volume {
            width: 100%;
            height: 100%;
        }
    }
</style>