使用echarts生成漂亮的3D地圖

echarts是非常好用的圖表外掛，本文使用echarts來生成一個漂亮的3D地圖

效果

準備資料

• 第三方外掛

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"</script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
 

• 背景圖片
  

建立過程

• html

 <div class="box" style="height: 100%;width: 100%">
	 <div id="container" style="height: 100%"></div>
 </div>

• css

.box{
    background:url('bg.png');
    background-size:cover;
}

• javascript

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {}, option = null;
myChart.setOption({
        backgroundColor: 'rgba(0,0,0,0)',//canvas的背景顏色
        environment: './bg.png',//背景星空圖
        geo3D: { //地圖的具體引數
            map: 'world', //地圖範圍
            shading: 'lambert', //光照帶來的明暗
            light: { // 光照相關的設定。在 shading 為 'color' 的時候無效。
                main: { //場景主光源的設定
                    intensity: 5,//主光源的強度
                    shadow: true,//主光源是否投射陰影
                    shadowQuality: 'high',//陰影的質量
                    alpha: 30, //主光源繞 x 軸偏離的角度
                    beta:190 //主光源繞 y 軸偏離的角度
                },
                ambient: { //全域性的環境光設定。
                    intensity: 0//環境光的強度
                }
            },
            viewControl: {//用於滑鼠的旋轉，縮放等視角控制
                distance: 50,//預設視角距離主體的距離
                panMouseButton: 'left',//平移操作使用的滑鼠按鍵
                rotateMouseButton: 'right',//旋轉操作使用的滑鼠按鍵
                alpha:50 // 讓canvas在x軸有一定的傾斜角度
            },
            postEffect: {//為畫面新增高光，景深，環境光遮蔽（SSAO），調色等效果
                enable: true, //是否開啟
                SSAO: {//環境光遮蔽
                    radius: 1,//環境光遮蔽的取樣半徑。半徑越大效果越自然
                    intensity: 1,//環境光遮蔽的強度
                    enable: true
                }
            },
            temporalSuperSampling: {//分幀超取樣。在開啟 postEffect 後，WebGL 預設的 MSAA 會無法使用,分幀超取樣用來解決鋸齒的問題
                enable: true
            },
            itemStyle: {//三維圖形的視覺屬性
                color:'#2355ac',
                borderWidth:1,
                borderColor:'#000'
            },
            regionHeight: 2//區域的高度
        }
    });