Cesium 3D地图图元圆柱图片实现

Primitive 和 Entity 是 Cesium 中用于创建和管理3D图形对象的主要API。

Primitive是Cesium中的底层渲染对象，提供了直接与WebGL交互的能力，Primitive提供了极大的灵活性，可以实现高度自定义的可视化效果，包括编写自己的着色器代码。它适合用于需要高效渲染大量静态或复杂几何体的场景，能够直接操作GPU，减少中间层的开销‌。

Entity是对Primitive的封装‌，提供了一个更高级、更易于使用的接口。Entity适用于普通的开发人员，即使没有图形开发技术，也能快速在场景中绘制各种几何形状。Entity的调用更加便捷，封装完美，使得开发者可以更容易地实现数据驱动的可视化。Entity底层使用了Primitive API，但在使用时不需要直接操作底层的WebGL代码，从而简化了开发过程‌。

下面使用图元（Primitive）方式在3D地球上增加几何图形和图片。

ts 复制代码

let viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: `/map/L{_z}/{_y}/{_x}.png`, //服务地址
    }),
  });
  
let billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());//广告牌集合

地球上添加圆柱和图片函数。

ts 复制代码

export function addPrimitive(properties) {

  let m = Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(properties.longitude, properties.latitude)),
    new Cesium.Cartesian3(0, 0, 0),
    new Cesium.Matrix4());

 // 创建一个圆柱体几何体
  let cylinderGeometry = new Cesium.CylinderGeometry({
      length : 200000,
      topRadius : 6000,
      bottomRadius : 6000,
  });
 
  // 创建一个圆柱体实体
  let cylinder = viewer.scene.primitives.add(new Cesium.Primitive({
      geometryInstances : new Cesium.GeometryInstance({
          geometry : cylinderGeometry,
          modelMatrix: m
      }),
      appearance :  new Cesium.MaterialAppearance({
        material: new Cesium.Material({
          fabric: {
            type: 'Color',
            uniforms: {
              color: Cesium.Color.fromBytes(20, 200, 212, 200),//rgba
            }
          }
        }),
        faceForward: true
      }),
  }));
  
  //增加图片
  billboards.add({
    name: 'image',
    color: Cesium.Color.fromCssColorString(properties.color),
    scale: 0.6,
    position: Cesium.Cartesian3.fromDegrees(
      properties.longitude,//经度
      properties.latitude,//维度
      100000,//高度
    ),
    image:
      properties.type === 'plus'
        ? plusImage
        : properties.type === 'minus'
          ? minusImage
          : circleImage,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
  });
}

Cesium 3D地图 图元 圆柱 图片实现

Cesium 3D地图图元圆柱图片实现