漏刻有时数据可视化Echarts组件开发(7)：geo地图map3D组件的定时高亮轮播的解决方案1

引入文件

<script src="js/jquery-3.2.1.js">script>
<script type="text/javascript" src="js/echarts4.0.js">script>
<script src="js/echarts-gl.min.js">script>
<script src="js/shenyang.js">script>

其中地区的geojson文件，为了实现本地化的访问，已经转化为.js文件。

构建容器

<div id="container" style="height: 100%"></div>

地图数据

    var dataList = [
        {name: '和平区', country: 62, town: 33, village: 12, wan: 12},
        {name: '沈河区', country: 62, town: 33, village: 12, wan: 12},
        {name: '大东区', country: 62, town: 33, village: 12, wan: 12},
        {name: '皇姑区', country: 62, town: 33, village: 12, wan: 12},
        {name: '铁西区', country: 62, town: 33, village: 12, wan: 12},
        {name: '苏家屯区', country: 62, town: 33, village: 12, wan: 12},
        {name: '浑南区', country: 62, town: 33, village: 12, wan: 12},
        {name: '沈北新区', country: 62, town: 33, village: 12, wan: 12},
        {name: '于洪区', country: 62, town: 33, village: 12, wan: 12},
        {name: '辽中区', country: 62, town: 33, village: 12, wan: 12},
        {name: '新民市', country: 62, town: 33, village: 12, wan: 12},
        {name: '康平县', country: 62, town: 33, village: 12, wan: 12},
        {name: '法库县', country: 62, town: 33, village: 12, wan: 12}
    ];

渲染地图

注册地图

    var myChart = echarts.init(document.getElementById("container"));
    echarts.registerMap('沈阳市', geoJson);

var option = {
        backgroundColor: "rgba(0,0,0,0.8)",
        tooltip: {
            show: true,
        },
        geo3D: {
            map: '沈阳市',
            zoom: 1,
            roam: true,
            color: '#fff',
            viewControl: {	// 用于鼠标的旋转，缩放等视角控制。
                projection: 'perspective',	// 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                autoRotate: false,	// 是否开启视角绕物体的自动旋转查看。[ default: false ]
                distance: 200,	// [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。
                center: [0, 0, 0],	// 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
            },
            itemStyle: {
                opacity: 1, // 透明度
                color: '#012a66',//地图颜色
                borderWidth: 1.5,//分界线宽度
                borderColor: "#459bca",//分界线颜色
            },
            emphasis: {
                areaColor: '#012a66',
                label: {
                    show: true,
                    color: '#fff'
                }
            },
            label: {
                show: false,//是否显示市
                textStyle: {
                    color: "#fff",//文字颜色
                    fontSize: 16,//文字大小
                    fontFamily: '微软雅黑',
                    backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景
                },
            },
            //legendHoverLink: true,
            data: dataList,
             regions: [{
                name: '和平区',
                itemStyle: {
                    color: '#0160AD',
                    opacity: 1,
                },
                label: {
                    show: true,
                    formatter: function (params) {
                        console.log(params);
                    }
                },
            }],//默认高亮区域
        },
        series: []

定时轮播

    var count = 0;
    let regions = setInterval(function () {
        option.geo3D.regions[0].name = option.geo3D.data[count].name;
        myChart.setOption(option);
        count++;
        if (count === option.geo3D.data.length) {
            count = 0;
        }
    }, 2000);

案例是通过regions属性，实现轮播的效果，但是一些数据无法通过该方法实现。map3D不支持2d的属性。

lockdatav Done ！