cesium加载Echarts饼图

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

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

• 一、创建 canvas
• 二、渲染 Echarts 图表
• 三、创建 Primitive
• 四、将 canvas 作为材质贴到 Primitive上

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

javascript

代码解读

复制代码

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 的功能

1. 创建 Canvas 元素

   • 使用 document.createElement('canvas') 创建一个 Canvas 元素。
   • 设置 Canvas 宽高为 400 像素。

2. 初始化 ECharts 图表

   • 使用 echarts.init(canvasDom) 初始化 ECharts 图表实例。
   • 调用 myChart.setOption(options) 设置图表配置项。

3. 监听图表渲染完成事件

   • 监听 finished 事件，在图表渲染完成后执行回调函数。

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

   • 在回调函数中调用 getCriclePrimitive 函数，传入图表实例和参数 { radius, lon, lat }。
   • 获取圆形几何体 criclePrimitive。
   • 将圆形几何体添加到 Cesium 场景中：viewer.scene.primitives.add(criclePrimitive)。

5. 清理资源

   • 调用 myChart.dispose() 销毁 ECharts 实例。
   • 将 myChart 和 canvasDom 设置为 null 以释放内存。

函数 getCriclePrimitive 的功能

1. 创建圆形几何体

   • 使用 Cesium.CircleGeometry 创建一个圆形几何体，指定中心点坐标和半径。

2. 生成几何体实例

   • 调用 Cesium.CircleGeometry.createGeometry(circle) 生成几何体实例。
   • 创建 GeometryInstance，设置颜色属性为橙色。

3. 创建 Primitive 实例

   • 创建 Cesium.Primitive 实例，指定几何体实例和材质外观。
   • 设置材质类型为 Image，并将 ECharts 图表的截图作为纹理。

4. 返回圆形几何体

   • 返回创建好的 criclePrimitive 对象。

存在问题：

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

---

源码仓库

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

原文链接：https://juejin.cn/post/7418485657554993167