• 作者:老汪软件技巧
  • 发表时间:2024-09-27 11:01
  • 浏览量:

注意 注意 注意,本文全是干货,没有多余的废话,直接进入主题

把一个Echarts饼图添加到cesium地球上只要四步

直接上代码,完整代码在文末

import * as Cesium from "cesium";
import * as echarts from "echarts"
const pieOption = {
    ... 
    想要啥样的自己定样式
}
const drawPie = (options, { radius = 100000.0, lon, lat }) => {
    let canvasDom = document.createElement('canvas');
    canvasDom.width = 400;
    canvasDom.height = 400;
    let myChart = echarts.init(canvasDom);
    myChart.setOption(options);
    myChart.on('finished', () => {
        let criclePrimitive = getCriclePrimitive(myChart, { radius, lon, lat })
        viewer.scene.primitives.add(criclePrimitive)
        myChart.dispose();
        myChart = null;
        canvasDom = null;
    })
}
const getCriclePrimitive = (chart, { radius = 100000.0, lon, lat }) => {
    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)
        }
    });
    let criclePrimitive = new Cesium.Primitive({
        geometryInstances: [
            circleGeometryInstance
        ],
        asynchronous: false,
        appearance: new Cesium.MaterialAppearance({
            material:
                new Cesium.Material({
                    fabric: {
                        type: 'Image',
                        uniforms: {
                            image: chart.getDataURL()
                        }
                    }
                })
        })
    })
    return criclePrimitive;
}
drawPie(pieOption, { lon: 116, lat: 39 })

函数drawPie的功能

创建 Canvas 元素

初始化 ECharts 图表

监听图表渲染完成事件

获取圆形几何体并添加到 Cesium 场景

清理资源

函数getCriclePrimitive的功能

创建圆形几何体

生成几何体实例

创建 Primitive 实例

返回圆形几何体

存在问题:

这只是一种比较取巧的办法,这样加载的方式失去了Echarts的灵魂,没有任何交互可言,只是加载了图片,如果大神们有好的想法和方案欢迎一起交流和学习。

源码仓库

完整源码和使用案例请看这里,里面还有其他一些我写案例东西,可以的话请给个star