3d地球

ゝ一纸荒年。 2023-06-06 12:21 25阅读 0赞

项目结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29MZW5nWXVlSHVu_size_16_color_FFFFFF_t_70]  
这个是3d地区旋转的源码：

<!DOCTYPE html>
    <html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript"
            src="./js/echarts/echart.min.js"></script>
    <script type="text/javascript" src="./js/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript"
            src="./js/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="./js/echarts/extension/dataTool.min.js"></script>
    <script
            type="text/javascript" src="./js/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="./js/echarts/map/js/world.js"></script>
    
    <script
            type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=VQ8nwpflfhcBIaC0yjFsgzIBIF19Zh4T&__ec_v__=20190126"></script>
    <script type="text/javascript" src="./js/echarts/extension/bmap.min.js"></script>
    <script
            type="text/javascript" src="./js/simplex.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var ROOT_PATH = "";
        option = null;
        option = {
            backgroundColor: '#000',
            globe: {
                baseTexture: 'img/earth.jpg',
                heightTexture:'img/bathymetry_bw_composite_4k.jpg',
                displacementScale: 0.1,
                shading: 'lambert',
                environment: 'img/starfield.jpg',
    
                light: {
                    ambient: {
                        intensity: 0.1
                    },
                    main: {
                        intensity: 1.5
                    }
                },
    
                layers: [{
                    type: 'blend',
                    blendTo: 'emission',
                    texture: 'img/night.jpg'
                }, {
                    type: 'overlay',
                    texture: 'img/clouds.png',
                    shading: 'lambert',
                    distance: 500
                }]
            },
            series: []
        }
        ;
        if (option && typeof option === "object") {
    
            myChart.setOption(option, true);
        }
    </script>
    </body>
    </html>

3d立体影像js，其他与上面相同：

我自己凑出的3d影像旋转：

3D柱状图：

图片在https://download.csdn.net/download/olengyuehun/11852838

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29MZW5nWXVlSHVu_size_16_color_FFFFFF_t_70]: /images/20230601/7217facfe9fa4e3e942a49d4a1c84afc.png