Cesium——(Entity)实体与 实体中材质(material)

本文介绍了Cesium库中Entity对象的核心概念,包括其属性如位置、方向和描述的使用,以及如何添加、删除和定制实体的外观,如颜色、纹理和棋盘格效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

定义简介

Entity是Cesium中的一个重要概念,它代表了在三维场景中的实体对象。这些实体可以是地球上的点、线、面,也可以是飞机、汽车、船舶等动态物体。

属性

Entity具有丰富的属性,包括位置、方向、速度、外观等。通过设置这些属性,开发者可以精确地控制实体在三维场景中的表现形式。

关联实体

基础属性描述
id唯一标识
name可读标识
show是否显示实体
description实体的html描述
position实体位置
orientation实体方向
viewFrom查看此实体对象的建议初始偏移量
parent与此实体关联的父实体

image.png

description设置一个html弹窗

description属性被设置为包含HTML标记的字符串。这允许您以富文本的形式呈现描述,包括段落、链接等。

var viewer = new Cesium.Viewer('cesiumContainer');

var entity = viewer.entities.add({
    name: 'Example Entity',
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    description: '<p>This is a sample description for the entity.</p>'
});

// 点击实体时显示描述
viewer.selectedEntity = entity;

当Cesium Viewer中点击实体时,它将显示实体的描述信息

其表现效果和 new Cesium.SelectionIndicator 指示器部件相同

position位置信息

position位置又称为当前实体的坐标位置,常用的坐标位置有:(球坐标系和笛卡尔坐标系)

具体详情见文章:SuperMap iClient3D for WebGL ——坐标系(世界坐标、WGS84坐标系、平面直角坐标系)

orientation当前模型的方向

一般存在方向的都是一些模型(飞机、汽车等),在方向上我们最常用的是
new Cesium.HeadingPitchRoll ( heading , pitch , roll )

heading:航向
pitch:螺距
roll:滚动

官方介绍:

航向是从当地北部来的旋转正角向东增加的方向。俯仰是从本地东西向平面的旋转。正俯仰角在飞机上方。负俯仰角在平面下方。横摇是绕局部东轴应用的第一次旋转。

 const position = Cesium.Cartesian3.fromDegrees(104.1, 30.6,500); 
    const heading = 0;
    const pitch = 0;
    const roll = 0;
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    );
    const addModeEntity = window.viewer.entities.add({
        name: '测试1',
        id:"cs1",
        position: position,
        orientation: orientation,
        model: {
          uri: '/static/SampleData/gltf/客机模型/客机模型.gltf',
          scale:0.1,
          minimumPixelSize:0.1,
          maximumScale: 20,
          shadows:true,
          color:Cesium.Color.RED,
          colorBlendMode:Cesium.ColorBlendMode.MIX// Cesium.ColorBlendMode.REPLACE//
        },
      });
    window.viewer.trackedEntity = addModeEntity;
    window.viewer.flyTo(window.viewer.entities.getById("cs1")) 

image.png

相关Entity的方法实例

添加属性

viewer.entities.add()

删除指定id的实体

viewer.entities.removeById(1)
这个id就是实体entity的id

删除全部实体

viewer.entities.removeAll()

实体中材质(material)

Material在Cesium中负责定义实体的外观特性,如颜色、透明度、纹理等。

  1. ColorMaterial(颜色材质): 允许开发者定义实体的颜色,从而为实体添加生动的色彩。
entity.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED);
  1. ImageMaterial(图片材质): 允许将图片应用到实体上,以展示详细的纹理。
entity.material = new Cesium.ImageMaterialProperty({
  image: 'path/to/texture.png',
});
  1. CheckerboardMaterial(棋盘格材质): 创建一个有趣的棋盘格效果,使实体更具视觉吸引力。
entity.material = new Cesium.CheckerboardMaterialProperty({
  evenColor: Cesium.Color.WHITE,
  oddColor: Cesium.Color.BLACK,
  repeat: new Cesium.Cartesian2(8, 8),
});

相关代码示例

### Cesium 使用教程概述 Cesium 是一款用于创建三维地球和地图的开源 JavaScript 库。为了更好地理解和使用 Cesium,可以从以下几个方面入手: #### 下载安装 对于初次使用者来说,可以通过多种方式来获取并设置 Cesium 开发环境。一种常见的方法是从官方源码包中的 `build` 文件夹下获得必要的文件[^2]。 ```javascript // 引入Cesium库到HTML页面中 <script src="path/to/Cesium.js"></script> ``` #### 初始化地球视图 要快速启动一个基于 Cesium 的应用程序,需先完成基本配置工作——即初始化地球对象。这通常涉及将 Cesium Viewer 或 Scene 添加至网页容器内,并指定其样式属性等参数。 ```html <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); </script> ``` #### 数据展示操作 通过实体 (Entity) 和数据源 (DataSources),可以向场景添加各种地理要素,如点、线、面以及模型等。这些功能允许开发者轻松构建复杂的应用程序界面[^1]。 ```javascript var entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.1641, 39.9522), point : { pixelSize : 10, color : Cesium.Color.RED } }); viewer.zoomTo(entity); ``` #### 材质定制化 除了内置的支持外,还可以利用自定义材质来自由设计表面纹理效果。此特性使得渲染更加逼真美观,在视觉呈现上提供了极大的灵活性[^3]。 ```javascript const material = new Cesium.Material({ fabric : { type : 'Color', uniforms : { color : new Cesium.Color(1.0, 0.0, 0.0, 0.5) } } }); entity.polygon.material = material; ``` #### 集成现代工具链 随着前端技术的发展,越来越多的人倾向于采用 Vite 这样的新型打包器来进行项目开发。为此,专门针对此类需求推出了相应的插件支持,方便集成 Cesium 到现代化的工作流当中去[^4]。 ```bash npm install vite-plugin-cesium --save-dev ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值