cesium billboard 方式 绘制echart

动态创建dom绘制echart

//绘制echart
function drawChart(){
  const container = document.createElement('canvas')
  container.width = 450;
  container.height = 450;
  const option ={} //按照实际情况配置
  const chart = echarts.init(container)
  chart.setOption(option);
  return chart;
}

添加billboard

//添加billboard
function  addMapChart(data, img) {
  let catesian3 = Cesium.Cartesian3.fromDegrees(
    data.x,
    data.y
    // height
  );
  let newEntity = new Cesium.Entity({
    position: catesian3,
    billboard: {
      HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      image: img,
      width: 150,
      height: 150,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
  });
  //这个需要提前初始化好
  this.mapChartDataSource.entities.add(newEntity);
}

示例

//使用示例
function demo(){
  const chart = drawChart();
  chart.on('finished', () => {
   addMapChart(data, chart.getDataURL('png'))
})
}