echarts 自定义3D城市地图_echats 3d 城市地图

环境依赖

        "echarts": "^5.4.3",

        "echarts-gl": "^2.0.9"

城市边界信息

        DataV.GeoAtlas地理小工具系列

 这个需求第一方案想到的是使用高德地图JS API中”区域掩模“加上”立面体“实现，最后没有采用高德地图实现的原因是，高德地图无法实现透明天空，角度变换时，天空颜色无法去掉，不纠结天空的可以采用，省时省力并且自定义空间很大，最终采用echarts来实现。

echarts方案中遇到两个问题
        1、geo3D配合scatter3D，geo3D的regionHeight过高，会盖住scatter3D，解决方案是降低regionHeight值，5以内貌似没有问题，另一个是降低itemStyle的透明度，opacity设置低透明度

        2、geo3D配合scatter3D，scatter3D的坐标标注位置有偏差，感觉位置不准，幸亏项目需求是根据每个区域进行标注，并不需要根据坐标标注。

最后采用的两个map3D叠加实现，底层map3D用于展示城市面板，上层map3D用于展示标注。

 
    import * as echarts from "echarts";
    // 引入城市边界信息
    import Linyi from '@/api/linyi.json'
    // 引入echarts-gl，用于实现echarts 3D功能
    import 'echarts-gl'
 
    // 注册自定义城市边界信息
    echarts.registerMap('Linyi', Linyi);
 
    // 标注点背景图
    import scatter3dPoint from "@/assets/images/point.png"
 
 
    // 图表实例
    let chart = echarts.init(document.querySelector('.chart'));
 
    // map3D视角控制参数
    let viewControl = {
        beta: 35,
        alpha: 45,
        distance: 120,
        // zoomSensitivity: 0, // 是否允许放大
        // rotateSensitivity: 0,// 是否允许旋转
    };
 
    // 标注点数据
    // 这里的name需要和城市边界信息中的name对应才能显示出来，因为没有坐标信息，name是唯一可以对应起来的
    let pointData = [
        {name: '兰山区', value: 10},
        {name: '河东区', value: 20}
    ]
 
    let label = {
        show: true,
        formatter(params) {
            if (params.value) {
                return `{radiusBg|${params.value}}`
            } else {
                return null;
            }
        },
        rich: {
            radiusBg: {
                color: "#fff",
                align: 'center',
                width: 50,
                height: 50,
                fontSize: 22,
            },
        },
        textStyle: {
            width: 50,
            height: 64,
            backgroundColor: {
                image: scatter3dPoint
            }
        }
    };
 
    chart.setOption({
        series: [
            {
                zlevel: 10,
                viewControl,
                map: 'Linyi',
                type: "map3D",
                regionHeight: 10,
                label: {
                    show: true,
                    color: '#fff',
                    fontWeight: 'bold',
                    fontSize: 14,
                    textShadowBlur: 2,
                    textShadowOffsetY: 2,
                    textShadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                itemStyle: {
                    opacity: 1,
                    borderWidth: 2,
                    color: '#428BF4',
                    borderColor: '#61CFF8',
                },
                emphasis: {
                    label: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    itemStyle: {
                        color: '#007EE8',
                        borderWidth: 10,
                        borderColor: '#6BECF5'
                    }
                },
                light: {
                    ambient: {
                        color: '#fff',
                        intensity: 0.4
                    }
                },
            },
            {
                zlevel: 20,
                viewControl,
                map: 'Linyi',
                type: "map3D",
                regionHeight: 10,
                itemStyle: {
                    color: 'transparent'
                },
                emphasis: {
                    itemStyle: {
                        color: 'transparent'
                    }
                },
                data: pointData.map(v => {
                    v.label = label;
                    v.emphasis = {
                        label
                    }
                    return v
                })
            }
        ]
    });