- 作者:老汪软件技巧
- 发表时间:2024-09-27 11:01
- 浏览量:
注意 注意 注意,本文全是干货,没有多余的废话,直接进入主题
直接上代码,完整代码在文末
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