Cesium+Echarts实现统计图表——饼状图为例

Cesium 专栏收录该内容
1 篇文章 0 订阅

本文由 @小刘先森 原创,转载请注明出处。

       众所周知,Echarts支持各种统计图表,本文介绍利用Echarts绘制图表,以纹理的方式贴到Cesium的地图上,先上效果图,如下。

Cesium+Echarts饼状图示例

解决思路

在创建Primitive的时候设置图片类型的Material。获取到echarts的dom,将dom转为DataURL赋值到image上,完成图表的创建。

创建CircleGeometry

		let circle = new Cesium.CircleGeometry({
            center: Cesium.Cartesian3.fromDegrees(lon, lat),
            radius: radius
        });
        let circleGeometry = Cesium.CircleGeometry.createGeometry(circle);
        let circleGeometryInstance = new Cesium.GeometryInstance({
            geometry: circleGeometry,
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
            }
        });

创建Primitive

		let criclePrimitive = new Cesium.Primitive({
            geometryInstances: [
                circleGeometryInstance
            ],
            appearance: new Cesium.MaterialAppearance({
                material:
                    new Cesium.Material({
                        fabric: {
                            type: 'Image',
                            uniforms: {
                                image: chart.getDataURL()
                            }
                        }
                    })
            })
        })

绘制饼状图

		let canvasDom = document.createElement('canvas');
        canvasDom.width = 400;
        canvasDom.height = 400;
        let myChart = echarts.init(canvasDom);
        myChart.setOption(option);
        myChart.on('finished', () => {
            let criclePrimitive = getCriclePrimitive(myChart, { radius, lon, lat })
            viewer.scene.primitives.add(criclePrimitive)
            myChart.dispose();
            myChart = null;
            canvasDom = null;
        })

代码地址

觉得有帮助麻烦star支持一下
github地址:https://github.com/MrSmallLiu/Cesium-Echarts-Demo

关于作者

业余爱好喜欢三维相关东西
QQ: 1016817543 邮箱:1016817543@qq.com
github:https://github.com/MrSmallLiu (欢迎star)

  • 2
    点赞
  • 3
    评论
  • 4
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

小刘先森

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值