0
点赞
收藏
分享

微信扫一扫

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

90哦吼 2021-09-21 阅读 85
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 条评论