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

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

       众所周知，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