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,
  });
}
相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜052 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~3 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo5 小时前
ES6笔记2
开发语言·前端·javascript
yanlele5 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子7 小时前
React状态管理最佳实践
前端
烛阴7 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子7 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端