Cesium 绘制饼状图（扇形）

最近有个需求就是在 Cesium 中绘制一个饼状图，用来不同类型数据量的占比。由于 Cesium 的 API 中没有提供类似饼状图扇形的绘制方法。那么这个饼状图的每一块扇形是怎么绘制的呢。

这里借助了老祖宗魏晋时期的数学家刘徽首创割圆术，利用圆心半径绘制正多边形，正多边形的边数越多越接近圆。其实最终绘制的是圆心和起始点以及终止点的连线形成的多边形。

那么问题的核心就是计算正多边形的折点，转化为数学问题就是：已知圆心，半径，角度，计算另一点的坐标，只不过是在椭球上计算。

function getPoint(olon, olat, radius, angle ){
  let clon = radius * Math.sin(angle*Math.PI/180);
  let clat = radius * Math.cos(angle*Math.PI/180);
  let ec = 6356725 + (6378137 - 6356725) * (90 - olat) / 90;
  let ed = ec * Math.cos(olat * Math.PI /180);
  let jlon = (clon/ed + olon * Math.PI/180)*180/Math.PI;
  let jlat = (clat/ec + olat * Math.PI/180)*180/Math.PI;
}

olon，olat，分别是圆心的经纬度，radius是半径，angle是角度，从正北方向顺时针开始。

这样可以计算出两个角度之间对应弧长端点的经纬度坐标。将这些坐标和圆心作为多边形连接起来，就是扇形。想要扇形绘制的细腻，那就减小角度，这样更接近圆。
整个代码如下

//饼图
let olon = 116;
let olat = 36;
let ar = [];
let ar1 = [];
let ar2 = [];
let ar3 = [];
for(let i=0; i<360;){
   i+=0.01;
   let clon = 100000 * Math.sin(i*Math.PI/180);
   let clat = 100000 * Math.cos(i*Math.PI/180);
   let ec = 6356725 + (6378137 - 6356725) * (90 - olat) / 90;
   let ed = ec * Math.cos(olat * Math.PI /180);
   let jlon = (clon/ed + olon * Math.PI/180)*180/Math.PI;
   let jlat = (clat/ec + olat * Math.PI/180)*180/Math.PI;
   console.log(jlon, jlat, i);
   ar.push(jlon, jlat, 200000);
   if(i<=30){
     ar1.push(jlon, jlat);
   }
   if(i>30 && i<=120){
     ar2.push(jlon, jlat);
   }
   if(i>120){
     ar3.push(jlon, jlat);
}
  
}
ar1.push(olon, olat);
ar2.push(olon, olat);
ar3.push(olon, olat);

var redPolygon = viewer.entities.add({
  name: "Red polygon on surface",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray(
      ar1
    ),
    material: Cesium.Color.YELLOW,
    extrudedHeight: 50000.0,
  },
});
var redPolygon2 = viewer.entities.add({
  name: "Red polygon on surface",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray(
      ar2
    ),
    material: Cesium.Color.BLUE,
    extrudedHeight: 50000.0,
  },
});
var redPolygon3 = viewer.entities.add({
  name: "Red polygon on surface",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray(
      ar3
    ),
    material: Cesium.Color.PINK,
    extrudedHeight: 50000.0,
  },
});
viewer.zoomTo(viewer.entities);

最终绘制在图上效果如下