Cesium绘制有高度的饼状图

最新推荐文章于 2024-06-30 22:46:02 发布

阿狸狸阿狸狸呀

最新推荐文章于 2024-06-30 22:46:02 发布

阅读量149

点赞数 3

文章标签：前端 webgl

本文链接：https://blog.csdn.net/qq_25236657/article/details/135870329

版权

    let list = [0,45,90,135,180,225,270,315];
    let colorList = ['#2D8CF0','#2F6CF0','#333666','#1F8CD0','#5e6C00','#112255','#999000','#452341','#999000'];
    let radiusList = [1000,2000,1000,1000,1000,1000,1000,1000,1000,1000,1000];
    //通过改变半径来显示当前扇形的样式   
 list.map((x,k)=>{
    let pm = {
      center:[120.11794,31.267144],
      startAngle:x,
      endAngle:x+45,
      radius:radiusList[k],
      color:colorList[k]
    }
     drawCircle (pm)
    })


const drawCircle = (params) => {
  let center = Cesium.Cartesian3.fromDegrees(Number(params.center[0]), Number(params.center[1]));
  let radius = Number(params.radius);
  let color = new Cesium.Color.fromCssColorString(params.color).withAlpha(0.5);
  let positions = [];
  positions.push(center);
  for (var i = Number(params.startAngle); i <= Number(params.endAngle); i+=0.01) {
    let angle = Cesium.Math.toRadians(i);
    let position = new Cesium.Cartesian3(
      center.x + radius * Math.cos(angle),
      center.y + radius * Math.sin(angle),
      center.z
    );
    positions.push(position);
  }
  let geometry = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(positions),
    vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
    extrudedHeight: 1000
  });
  let material = new Cesium.Material.fromType(Cesium.Material.ColorType);
  material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 0.5);
  let primitive = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: geometry,
      attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(color) }
    }),
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true
    }),
    asynchronous: false
  });
  viewer.scene.primitives.add(primitive);
};