漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图

基于echarts开发的3D下钻地图

基于echarts开发的自动旋转map3D下钻和柱图地图，基本需求：

• 加载某地级市map3D地图，并实现单击下钻功能
• 自动旋转动画，提升视觉冲击力
• 增加bar3D柱图
• 源代码链接：https://download.csdn.net/download/weixin_41290949/23528787

项目分析

• map3D不支持动态散点图和自动区域板块轮播功能
• 自动旋转功能，设置viewControl对应属性
• series-bar3D，三维柱状图属性

地理数据对应映射表

/*各区县geojson地理数据对应映射表*/
var citys = {
    '渝中区': 'yuzhong',
    '万州区': 'wanzhou',
    '涪陵区': 'fulin',
    '大渡口区': 'dadukou',
    '江北区': 'jiangbei',
    '沙坪坝区': 'shapingba',
    '九龙坡区': 'jiulongpo',
    '南岸区': 'nanan',
    '北碚区': 'beibei',
    '綦江区': 'qijiang',
    '大足区': 'dazu',
    '渝北区': 'yubei',
    '巴南区': 'banan',
    '黔江区': 'qianjiang',
    '长寿区': 'changshou',
    '江津区': 'jiangjin',
    '合川区': 'hechuan',
    '永川区': 'yongchuan',
    '南川区': 'nanchuan',
    '璧山区': 'bishan',
    '铜梁区': 'tongliang',
    '潼南区': 'tongnan',
    '荣昌区': 'rongchang',
    '开州区': 'kaizhou',
    '梁平区': 'liangping',
    '武隆区': 'wulong',
    '城口县': 'chengkou',
    '丰都县': 'fengdu',
    '垫江县': 'dianjiang',
    '忠县': 'zhongxian',
    '云阳县': 'yunyang',
    '奉节县': 'fengjie',
    '巫山县': 'wushan',
    '巫溪县': 'wuxi',
    '石柱土家族自治县': 'shizhu',
    '秀山土家族苗族自治县': 'xiushan',
    '酉阳土家族苗族自治县': 'youyang',
    '彭水苗族土家族自治县': 'pengshui'
};

柱图数据源

        /*柱图数据源
        * wulong||nanan ,指对应区域映射的拼音
        * 一般通过ajax传递分类数据即可
        */
        var orData;
        switch (barData) {
            //武隆区柱图数据;
            case "wulong":
                orData = [{name: '武隆区', value: [107.771221, 29.342563, 60]}]
                break;
            //南岸区区柱图数据;
            case "nanan":
                orData = [{name: '南岸区', value: [106.673133, 29.502628, 120]}]
                break;
            //酉阳县区柱图数据;
            case "youyang":
                orData = [{name: '酉阳县', value: [108.586739, 28.98553, getNum()]}]
                break;
            //默认加载重庆市数据;
            case undefined:
                orData = [
                    {name: 'A位置', value: [106.556712, 29.536069, getNum()]},
                    {name: 'B位置', value: [107.395514, 29.706367, getNum()]},
                    {name: 'C位置', value: [107.771221, 29.342563, getNum()]},
                    {name: 'D位置', value: [106.038713, 29.863346, getNum()]},
                    {name: 'E位置', value: [107.837049, 29.730959, getNum()]},
                    {name: 'F位置', value: [108.586739, 28.98553, getNum()]},
                    {name: 'G位置', value: [108.755189, 31.8615, getNum()]},
                    {name: 'H位置', value: [109.086341, 31.152181, getNum()]},
                ]
                break;
            default:
        }

初始化绘制地图配置

//初始化绘制地图配置
var option = {
    title: {
        text: '重庆市3D下钻效果',
        left: 'center',
        textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal',
            fontFamily: "Microsoft YaHei"
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: []
};

下钻封装函数

/*下钻封装函数
 1. map,加载的地图名称;
 2. data,地图各区域，可为空
 3. barData,柱图数据
 4. */
function renderMap(map, data, barData) {
    option.title.subtext = map;
    //显示三维地理坐标系组件;
    option.geo3D =
        {
            show: false,
            type: 'map3D',
            name: 'map3D',
            map: map,//地图注册名称;
            viewControl: {
                autoRotate: true,//自动旋转
                minBeta: -3600,//每次旋转3600/360=10圈
                maxBeta: 3600//每次旋转3600/360=10圈
            },
            zlevel: -20
        };

    /*配置柱状图选项*/
    option.series = [
        {
            type: 'map3D',
            map: map,
            viewControl: {
                autoRotate: true,
                minBeta: -3600,
                maxBeta: 3600
            },
            itemStyle: {
                color: '#374151', // 地图配色
                areaColor: '#374151',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#fff', // 地图边配色
            },
            label: {
                show: false,
                textStyle: {
                    color: '#fff', //地图初始化区域字体颜色
                    fontSize: 12,
                    opacity: 1,
                    backgroundColor: 'rgba(0,23,11,0.8)'
                },
            },
            emphasis: {
                label: {
                    show: false,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                        backgroundColor: 'rgba(0,0,0,1)' //鼠标移入文字加背景
                    }
                }
            },
            shading: 'lambert',
            light: { //光照阴影
                main: {
                    color: '#fff', //光照颜色
                    intensity: 1.2, //光照强度
                    //shadowQuality: 'high', //阴影亮度
                    shadow: true, //是否显示阴影
                    alpha: 55,
                    beta: 10
                },
                ambient: {
                    intensity: 0.3
                }
            },
            data: data
        },
        {
            name: 'bar3D',
            type: "bar3D",
            coordinateSystem: 'geo3D',
            barSize: 1.5,
            shading: 'lambert',
            opacity: 1,
            bevelSize: 0.5,
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#000',
                    fontSize: 12,
                    opacity: 1,
                    backgroundColor: 'rgba(255,255,255,0.7)'
                },
                formatter: function (params) {
                    return params.name + " " + params.value[2] + "万元" //柱图顶部标签
                }
            },
            itemStyle: {
                color: '#26e5ff',
            },
            data: barData,
        }
    ];

地图点击事件

  //地图点击事件；
    chart.on('click', function (params) {
        // console.log(params);
        if (params.name in citys) {
            //返回按钮；
            $("#btn").removeClass("hidden");
            //二级地图;
            makeMap(params.name, 'map/city/' + citys[params.name] + '.json', citys[params.name]);
        } else {
            console.log("区域事件API接口;")
        }
    });

地图调用

    $("#btn").click(function () {
        $(this).addClass("hidden");
        makeMap('重庆市', 'map/chongqing.json');
    });

    //加载地图;
    makeMap('重庆市', 'map/chongqing.json');

其他说明

1. 地图运行，需要通过ajax加载map中的geojson地理数据，必须使用http协议web服务或上传至服务器访问;

2. echarts.min.js、echarts-gl.min.js官方封装库必须向对应的版本，否则会导致地图渲染的问题和区域单击事件的失效（具体根据项目需求确定版本）

3. 目录结构
   ├─index.html …默认启动页
   ├─map …geojson地理数据
   │ ├─chongqing.json …重庆市地理数据
   │ ├─city…各区县地理数据
   ├─js …JS封装库
   │ ├─app.js …下钻核心库，具体见文件注释

lockdatav Done!