echarts 自定义3D城市地图-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts 自定义3D城市地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

echart 3d 地图,前端,echarts,vue

环境依赖

        "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
                })
            }
        ]
    });

文章来源地址https://www.toymoban.com/news/detail-844797.html

到了这里，关于echarts 自定义3D城市地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！