本文由 @小劉先森 原創(chuàng)或颊，轉(zhuǎn)載請(qǐng)注明出處。
? ? ? ?眾所周知传于，Echarts支持各種統(tǒng)計(jì)圖表囱挑，本文介紹利用Echarts繪制圖表，以紋理的方式貼到Cesium的地圖上沼溜，先上效果圖平挑，如下。
Cesium+Echarts餅狀圖示例
解決思路
在創(chuàng)建Primitive的時(shí)候設(shè)置圖片類型的Material系草。獲取到echarts的dom弹惦，將dom轉(zhuǎn)為DataURL賦值到image上否淤，完成圖表的創(chuàng)建。
創(chuàng)建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)
}
});
創(chuàng)建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;
})
代碼地址
覺得有幫助麻煩star支持一下
github地址：https://github.com/MrSmallLiu/Cesium-Echarts-Demo
