0
点赞
收藏
分享

微信扫一扫

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

90哦吼 2021-09-21 阅读 87
Cesium开源

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

解决思路

创建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;
        })

代码地址

举报

相关推荐

0 条评论