3D地球可視化

時間 2020-06-08

標籤 3d 地球可視化简体版

原文原文鏈接

一丶簡介

本次說的是前端的可視化的內容，主要就是簡單的3D地球的繪製，如今愈來愈多的插件和腳本涌入互聯網，人們開始愈來愈不用造輪子了。今天咱們就是介紹一個好用的可視化插件。echarts（百度出品）。javascript

二丶內容

我是用的python自帶的web服務寫的，廢話很少說，直接貼代碼html

```前端

def map():
    print("context-Type: text/html")
    print()
    print("""

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<script src="../static/echarts.js"></script>
<script src="../static/echarts-gl.js"></script>
<title>3D地球</title>
<style>
    *{
        margin:0px;
        padding:0px;
    }
</style>
</head>
<body>
<div id="main" style="width:100%; height:100%;"></div>
</body>
<script>
    var main = document.getElementById("main")
    var winheight = window.innerHeight;
    main.style.height = winheight+"px";
</script>
<script type="text/javascript">
    var echart = echarts.init(document.getElementById("main"));
    var option = {
            backgroundColor: '#000',
            globe: {
                baseTexture: "../static/world-map.jpg",
                heightTexture: "../static/world-map.jpg",
                displacementScale: 0.04,
                shading: 'realistic',
                environment: '../static/background.jpg',
                realisticMaterial: {
                    roughness: 0.9
                },
                postEffect: {
                    enable: true
                },
                light: {
                    main: {
                        intensity: 5,
                        shadow: true
                    },
                    ambientCubemap: {
                        diffuseIntensity: 0.2
                    }
                }
            }
        };
    echart.setOption(option)
</script>
</html>
        """)


map()
```