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,
  });
}
相关推荐
楚轩努力变强25 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端27 分钟前
rust基础二(闭包)
前端·rust
菜鸟学Python36 分钟前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er1 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸2 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest