ECharts地圖輪播

本文將從插件基礎、數據準備及處理、地圖呈現、輪播控制等方面，對ECharts地圖輪播進行詳細闡述。

一、插件基礎

ECharts官方提供了一個名為「echarts-gl」的插件，它提供了在Three.js引擎上運行的3D圖形能力，也可以在地圖中應用。因此，我們可以通過引入該插件來實現更加生動、好看的地圖效果。

在引入ECharts和jQuery庫後，只需引入echarts-gl.min.js文件即可使用其提供的3D圖形能力。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.2.1/echarts-gl.min.js"></script>

二、數據準備及處理

首先需要準備地圖的JSON文件，例如中國地圖的JSON數據文件為：「china.json」。

{"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"name": "台灣", "id": "710000"}, "geometry": {"type": "Polygon", "coordinates": [[[121.777817, 24.394273], [121.175632, 22.790857], [120.74708, 21.970571], [119.583459, 21.65272], [119.584114, 20.807318], [120.715867, 20.617599], [121.495044, 21.541819], [121.951244, 23.627525], [121.777817, 24.394273]]]}}, {"type": "Feature", "properties": {"name": "河北", "cp": [115.661434, 38.61384], "id": "130000"}, "geometry": {"type": "Polygon", "coordinates": [[[115.467839, 39.287443], [115.406297, 39.447177], [115.688579, 39.471094], [115.757916, 39.28752], [116.220194, 39.094052], [116.747283, 39.095962], [116.781531, 39.023808], [117.509217, 38.667662], [118.027928, 38.240467], [118.892108, 37.947446], [118.998756, 37.409373], [119.258465, 37.156389], [119.213662, 37.019966], [118.859457, 36.897273], [118.81103, 36.625657], [119.127667, 36.183219], [119.23, 35.817388], [119.064778, 34.908368], [120.227525, 34.360332], [120.620368, 33.37652], [121.229495, 32.460319], [121.908146, 31.692174], [121.891919, 30.949352], [121.264257, 30.676267], [121.503519, 30.142915], [122.092114, 29.83252], [121.938427, 29.018022], [121.684439, 28.225513], [121.126855, 28.135673], [120.395473, 27.053207], [119.585496, 25.740781], [118.656871, 24.547391], [117.281606, 23.624501], [115.89023, 22.782873]]]}}]}

接著，準備地圖數據，例如：北京市2020年各區域人口密度數據文件為：「beijingData.json」。

{"110117":20,"110228":40,"110229":30,"110114":60,"110115":28,"110116":80,"110111":40,"110112":15,"110113":35,"110102":70,"110101":50,"110105":90,"110106":10,"110107":80,"110108":25,"110109":45,"110111":25,"110112":90,"110113":65}

讀取以上數據文件：

$.getJSON('china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);

    $.getJSON('beijingData.json', function (data) {
        //TODO: 實現地圖輪播
    });
});

三、地圖呈現

將展示數據以熱力圖的方式呈現在地圖中，同時也要將插件基礎中引入的echarts-gl組件引入到這裡。

$.getJSON('china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);

    $.getJSON('beijingData.json', function (data) {
        echarts.registerMap('beijing', beijingJson);

        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map3d',
                map: 'china',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#ccc'
                },
                data: data,
                // 將光照與材質的參數都設為0，關閉互動式的滑鼠控制
                light: {
                    main: {
                        intensity: 0
                    },
                    ambient: {
                        intensity: 0
                    }
                },
                silent: true
            }]
        });
    });
});

四、輪播控制

我們希望在頁面上通過按鈕的點擊事件來控制地圖的輪播效果。「setOption」方法可以實現對option數據的更新，我們可以將不同時間點的數據以不同option形態存放在一個數組中，每隔幾秒鐘就通過「setOption」方法來更新option數據來實現輪播效果。

var options = [option1,option2,...,optionN];
var currentIndex = 0;

function play() {
    chart.setOption(options[currentIndex]);
    currentIndex = (currentIndex + 1) % options.length;
    setTimeout(play, 5000);
}

play();

五、總結

通過以上幾個步驟，我們可以完成ECharts地圖的輪播效果。插件基礎的引入，數據準備及處理、地圖呈現、輪播控制等關鍵點均被詳細講解，並給出了代碼示例。希望讀者們可以通過這篇文章掌握ECharts地圖輪播的實現方法。