Echarts4+EchartsGL 3D迁徙图（附源码）

最新推荐文章于 2024-02-26 14:29:58 发布

小豆子憨0622

最新推荐文章于 2024-02-26 14:29:58 发布

阅读量5.9k

点赞数 3

分类专栏：代码文章标签： echats 3D地图

本文链接：https://blog.csdn.net/qq_29773123/article/details/86541629

版权

代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近遇到些Echarts迁徙图问题，在实现二维地图的迁徙图后开始开发3D迁徙图，在网上一查，发现3D版本迁徙图资料较少，自己研究并借鉴一些资料后写了一个小demo，希望能帮大家少走些弯路，共同学习。

一、效果图
星空背景为canvas开发，此处不提供相关代码
二、准备引用文件
1、Echarts：Echarts4下载
2、Echarts GL：Echarts GL1下载
3、地图文件下载，js版本或json版本均可

三、代码（以json地图为例）
1、文件引用

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/echarts4.js"></script>
<script src="~/Scripts/echarts-gl.js"></script>

2、html代码

<body> 
	<div id="mapBox"></div>
</body

3、js代码

<script type="text/javascript">
//从json文件中取出地图信息
$.get('/guangdong.json', function (chinaJson) {
            echarts.registerMap('jiangmen', chinaJson);
            var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
            mapBoxEchart.setOption({
geo3D: {
		map: 'jiangmen',
                    type: 'map',
                    boxHeight: 2.2,
                    regionHeight: 2,
                    roam: true,
                    label: {
                        //地图上是否显示市区名称
                        normal: {
                            show: true,
                            color: "#FFF76D"
                        },
                        emphasis: {
                            show: true,
                            color: "#FFF76D"
                        }
                    },
                    itemStyle: {
                        //color: '#00287A',
                        color:"#2E55FC",
                        borderColor: '#00287A', //省份的边框颜色 330867
                        borderWidth: 1.5, //省份的边框宽度
                        opacity: 0.5
                    },
                    emphasis: {
                        color: 'rgba(10, 21, 67, 0.3)',
                        borderWidth: 1,
                        borderColor: '#3fdaff',
                        //areaColor: "#7DC3DE",
                        shadowColor: '#fff',
                        opacity: 0.5,
                        shadowBlur: 30
                    },
                    light: { //光照阴影
                        main: {
                            color: '#2F85DC', 　　　　//光照颜色
                            intensity: 2, 　　　　　　//光照强度
                            shadowQuality: 'high', 　　//阴影亮度
                            shadow: true, 　　　　　　//是否显示阴影
                            alpha: 50,
                            beta: 10
                        },
                        ambient: {
                            intensity: 0
                        }
                    },
		postEffect: {
		             enable: true,
		              bloom: {
		                   enable: true
		                        }
		                    },
		                    groundPlane: {
                        show: false
                    },
                    shading: 'realistic',
                    zoomSensitivity: 10 //缩放灵敏度
		                    }，
series: [
{
//配置路径
			type: 'lines3D',
			coordinateSystem: 'geo3D',	
			polyline: 'true',
		         blendMode: 'lighter',
                        zlevel: 102,
                        effect: {
                            show: true,
                            trailWidth: 3,
                            trailOpacity: 0.5,
                            trailLength: 0.2,
                            constantSpeed: 5
                        },
                        lineStyle: {
                            color: '#FFB728',
                            opacity: 0.8,
                            width: 1.5
                        },
	data: [
                            {
                                coords: [[113.149649, 22.617641], [112.88089,22.583612]],
                                // 数据值
                                value: 100,
                                // 数据名
                                name: '测试一',
                                // 线条样式
                                lineStyle: {}
                            }, {
                                coords: [[112.316858, 22.186088], [112.88089,22.583612]],
                                // 数据值
                                value: 100,
                                // 数据名
                                name: '测试二',
                                // 线条样式
                                lineStyle: {}
                            }
                        ]
},{
	//配置位置标记点
	  type: 'scatter3D',
            coordinateSystem: 'geo3D',
            symbol: 'circle',
            symbolSize: 15,
            blendMode: 'lighter',
            zlevel: 11,
            label: {
                show: true,
                position: 'top',
                formatter: '{b}',
                textStyle: {
                    color: '#000',
                    fontFamily: "Microsoft YaHei",
                }
            },
            itemStyle: {
                color: '#a8edea' //标记颜色
            },
            data: [{ name: '测试一', value: [113.149649, 22.617641, 100] },
                { name: '测试二', value: [112.316858, 22.186088, 100] }]
},{
	//配置攻击点
	  type: 'scatter3D',
            coordinateSystem: 'geo3D',
            symbol: 'pin', symbolSize: function (val) {
                var ret;
                if ((val[2] >= 0) && (val[2] < 1000)) {
                    ret = 50;
                } else {
                    ret = 65;
                }
                return ret;
            },
            blendMode: 'lighter',
            zlevel: 11,
            label: {
                show: true,
                position: 'top',
                //formatter: '{b}',
                formatter: function (params) {
                    var ret = params.value[2];
                    return ret;
                },
                textStyle: {
                    color: '#000',
                    fontFamily: "Microsoft YaHei",
                    fontWeight: 'bold'
                }
            },
            itemStyle: {
                show: true,
                color: '#eb4f38'
            },
            data: [{ name: '中心', value: [112.88089,22.583612, 200] }]
}
]

}）；
            }）；
</script>

4、总结
要实现Echarts 3D迁徙图主要是引用全相关文件并进行相关配置，注意使用正确的数据结构即可，希望能对大家略有帮助。

小豆子憨0622

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
9
评论
Echarts4+EchartsGL 3D迁徙图（附源码）

最近遇到些Echarts迁徙图问题，在实现二维地图的迁徙图后开始开发3D迁徙图，在网上一查，发现3D版本迁徙图资料较少，自己研究并借鉴一些资料后写了一个demo，希望能帮大家少走些弯路，共同学习。一、效果图二、准备引用文件1、Echarts：Echarts4下载2、Echarts GL：Echarts GL1下载3、地图文件下载，js版本或json版本均可三、代码1、文件引用&amp;amp;amp;l...
复制链接

扫一扫