
Cesium viewer.entities.add() 常用属性详解在 Cesium 中viewer.entities.add()是最常用的实体添加方法之一。它用于向场景中添加点文字图片线面模型圆柱盒子路径动画等各种图形对象。一、基础使用viewer.entities.add({ name: 点位, position: Cesium.Cartesian3.fromDegrees(120, 30), point: { pixelSize: 10, color: Cesium.Color.RED, }, });二、viewer.entities.add 基本结构viewer.entities.add({ id, name, show, position, point, billboard, label, polyline, polygon, ellipse, rectangle, box, cylinder, corridor, wall, plane, model, path, orientation, description, availability, });三、基础属性1.id实体唯一标识。id: car001可以通过viewer.entities.getById(car001)获取实体。2.name实体名称。name: 车辆3.show控制是否显示。show: true4.position最重要控制实体位置。通常使用Cesium.Cartesian3.fromDegrees()进行经纬度转换。position: Cesium.Cartesian3.fromDegrees( 120, 30, 100 )参数参数含义120经度30纬度100高度四、点 Point用于绘制简单点。point: { pixelSize: 20, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, }常用属性属性说明pixelSize点大小color点颜色outlineColor边框颜色outlineWidth边框宽度show是否显示五、图片 Billboard用于显示图片图标。billboard: { image: /car.png, width: 40, height: 40, }常用属性属性说明image图片地址width宽度height高度scale缩放rotation旋转verticalOrigin垂直对齐六、文字 Label用于显示文本。label: { text: 杭州, font: 20px sans-serif, fillColor: Cesium.Color.WHITE, }常用属性属性说明text文本内容font字体fillColor文字颜色backgroundColor背景颜色showBackground是否显示背景pixelOffset偏移量七、线 Polyline用于绘制线段。polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ 120,30, 121,31 ]), width: 5, material: Cesium.Color.RED }常用属性属性说明positions点集合width线宽material材质clampToGround是否贴地八、面 Polygon用于绘制多边形。polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ 120,30, 121,30, 121,31 ]), material: Cesium.Color.RED.withAlpha(0.5), }九、圆 Ellipse用于绘制圆形区域。ellipse: { semiMinorAxis: 500, semiMajorAxis: 500, material: Cesium.Color.BLUE }常用属性属性说明semiMinorAxis短半径semiMajorAxis长半径material材质十、盒子 Box用于绘制立方体。box: { dimensions: new Cesium.Cartesian3( 100, 100, 100 ), material: Cesium.Color.GREEN }dimensions盒子尺寸长 宽 高十一、圆柱 Cylinder用于绘制圆柱体。cylinder: { length: 200, topRadius: 50, bottomRadius: 50, material: Cesium.Color.BLUE }十二、模型 Model用于加载 gltf/glb 模型。model: { uri: /car.glb, scale: 1, }常用属性属性说明uri模型地址scale缩放minimumPixelSize最小像素maximumScale最大缩放十三、路径动画 Path用于轨迹动画。path: { width: 3, material: Cesium.Color.YELLOW }十四、orientation 姿态用于控制模型朝向。orientation: Cesium.Transforms.headingPitchRollQuaternion( position, new Cesium.HeadingPitchRoll( heading, pitch, roll ) )十五、description点击实体后显示描述信息。description: 这是一个点位支持 HTMLdescription: div h1车辆信息/h1 p速度100km/h/p /div 十六、availability 时间控制控制实体在某个时间范围内显示。availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start, stop }) ])十七、综合案例viewer.entities.add({ id: car1, position: Cesium.Cartesian3.fromDegrees( 120, 30, 100 ), billboard: { image: /car.png, width: 40, height: 40, }, label: { text: 车辆1, pixelOffset: new Cesium.Cartesian2(0, -40), }, polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ 120,30, 121,31 ]), width: 2, material: Cesium.Color.YELLOW, } });十八、总结viewer.entities.add()本质上就是一个实体对象 多个图形组件例如实体 ├── 点 point ├── 图片 billboard ├── 文字 label ├── 线 polyline ├── 面 polygon └── 模型 model这些图形组件都可以同时存在于一个实体上。因此 Entity 是 Cesium 中最核心、最常用的数据组织方式之一。Cesium 中 withAlpha 与 material 详解在 Cesium 中经常会看到Cesium.Color.BLUE.withAlpha(0.4)以及material: Cesium.Color.RED很多刚接触 Cesium 的同学会疑惑withAlpha是什么意思material到底是什么为什么 point 用 color而线面用 material这篇文章详细讲解。一、Cesium.Color.BLUE.withAlpha(0.4) 是什么意思Cesium.Color.BLUE表示蓝色而.withAlpha(0.4)表示设置透明度所以Cesium.Color.BLUE.withAlpha(0.4)整体意思半透明蓝色二、Alpha 是什么Alpha 表示透明度取值范围0 ~ 1常见透明度值含义0完全透明0.2很透明0.5半透明1完全不透明三、示例1.完全不透明Cesium.Color.RED等价于Cesium.Color.RED.withAlpha(1)2.半透明Cesium.Color.RED.withAlpha(0.5)3.完全透明Cesium.Color.RED.withAlpha(0)四、material 是什么很多人会误以为material 颜色其实并不是。material 本质是材质你可以理解成物体表面怎么渲染例如纯颜色图片贴图网格流光发光水波纹动画效果这些都属于material五、point 为什么不用 material因为point 本身只是简单像素点它不像线面模型需要复杂表面渲染。所以 point 直接color即可。六、Point 点point: { pixelSize: 20, color: Cesium.Color.RED }point 常用属性属性说明pixelSize点大小color点颜色outlineColor边框颜色outlineWidth边框宽度七、Polyline 线线使用material示例polyline: { positions: [], width: 5, material: Cesium.Color.RED }八、Polygon 面polygon: { hierarchy: [], material: Cesium.Color.BLUE.withAlpha(0.5) }九、Ellipse 圆形区域ellipse: { semiMajorAxis: 1000, semiMinorAxis: 1000, material: Cesium.Color.RED.withAlpha(0.4) }十、Box 盒子box: { dimensions: new Cesium.Cartesian3( 100, 100, 100 ), material: Cesium.Color.GREEN }十一、material 最简单写法1.纯颜色material: Cesium.Color.RED2.半透明颜色material: Cesium.Color.RED.withAlpha(0.5)十二、material 还能写什么除了颜色。还能1.ImageMaterialProperty图片材质material: new Cesium.ImageMaterialProperty({ image: /xxx.png })2.ColorMaterialProperty颜色材质material: new Cesium.ColorMaterialProperty( Cesium.Color.RED )3.StripeMaterialProperty条纹material: new Cesium.StripeMaterialProperty({ evenColor: Cesium.Color.WHITE, oddColor: Cesium.Color.BLUE, repeat: 10, })4.GridMaterialProperty网格material: new Cesium.GridMaterialProperty({ color: Cesium.Color.YELLOW })5.PolylineGlowMaterialProperty发光线material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.CYAN })6.PolylineDashMaterialProperty虚线material: new Cesium.PolylineDashMaterialProperty({ color: Cesium.Color.YELLOW })十三、总结1.withAlpha 是透明度Cesium.Color.BLUE.withAlpha(0.4)意思40%透明度的蓝色2.material 本质material 材质 表面渲染方式不仅仅是颜色。3.point 和其他图形区别图形使用pointcolorpolylinematerialpolygonmaterialellipsematerialboxmaterial4.material 最常见写法material: Cesium.Color.RED或者material: Cesium.Color.RCesium 模型加载详解Entity 与 Primitive大家好这篇文章来详细讲一下 Cesium 中如何加载 3D 模型。在实际开发中数字孪生BIM智慧园区智慧城市车辆轨迹无人机这些场景都会使用到模型加载。而 Cesium 中最常见的模型格式是gltf glb其中gltfjson 贴图分离glb二进制一体化模型实际项目推荐优先使用 glb因为部署简单、体积更小。一、Cesium 中加载模型的两种方式Cesium 里面主要有两种加载模型的方式方式特点Entity简单业务开发常用Primitive / Model底层性能更强新手建议先学 Entity后面再学习 Primitive。二、最简单的模型加载Entity方式这是实际业务开发中最常见的方式。import * as Cesium from cesium const viewer new Cesium.Viewer(cesiumContainer) const entity viewer.entities.add({ name: 汽车模型, // 模型位置 position: Cesium.Cartesian3.fromDegrees( 120.15, 30.28, 0 ), // 模型配置 model: { // 模型路径 uri: /model/car.glb, // 缩放 scale: 1, // 最小像素 minimumPixelSize: 64, // 最大缩放 maximumScale: 20000 } }) // 相机飞到模型位置 viewer.flyTo(entity)效果模型会出现在对应经纬度的位置三、Cesium 最核心的坐标系统Cesium 内部使用的是Cartesian3但是我们平时使用的是经度 纬度 高度所以需要转换Cesium.Cartesian3.fromDegrees( 经度, 纬度, 高度 )例如Cesium.Cartesian3.fromDegrees( 120, 30, 100 )表示经度120 纬度30 高度100米四、模型配置详解1、uri模型路径。uri: /model/car.glb2、scale模型缩放。scale: 10很多模型真实尺寸特别小。所以实际开发经常需要放大几十倍甚至几百倍3、minimumPixelSize最小像素。minimumPixelSize: 64作用即使镜头拉远 模型也不会太小4、maximumScale最大缩放限制。maximumScale: 20000避免模型无限放大。五、模型不显示的常见原因这是新手最容易踩坑的地方。1、模型路径错误例如uri: /model/car.glb必须保证http://localhost:xxxx/model/car.glb浏览器能够访问。2、模型太小很多模型真实尺寸可能只有几厘米。解决scale: 1003、镜头没飞过去模型其实已经加载成功。只是镜头不在附近。解决viewer.flyTo(entity)4、模型被埋地下高度可能不正确。尝试Cesium.Cartesian3.fromDegrees( 120, 30, 100 )增加高度。六、模型方向控制很多时候模型朝向不正确。Cesium 中使用参数含义heading朝向pitch俯仰roll翻滚例如const hpr new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(90), 0, 0 ) entity.orientation Cesium.Transforms.headingPitchRollQuaternion( entity.position.getValue(), hpr )七、为什么 Cesium 要使用弧度Cesium 所有旋转都使用弧度所以Cesium.Math.toRadians(90)作用角度转弧度八、动态移动模型修改 position 即可。例如entity.position Cesium.Cartesian3.fromDegrees( lng, lat, height )实现动态移动let lng 120 setInterval(() { lng 0.001 entity.position Cesium.Cartesian3.fromDegrees( lng, 30, 0 ) }, 100)效果模型会持续移动九、Primitive / Model 加载方式这是更底层的方式。适合BIM数字孪生倾斜摄影大批量模型高性能场景示例const model await Cesium.Model.fromGltfAsync({ url: /model/car.glb, modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees( 120, 30 ) ), scale: 1 }) viewer.scene.primitives.add(model)十、Entity 与 Primitive 区别对比EntityPrimitive简单✅适合业务开发✅底层控制能力一般性能一般对比Primitive学习难度更高性能更强底层控制很强适合大场景✅十一、模型动画有些 glb 模型自带动画。例如人物走路飞机旋转机械运动开启方式model: { uri: /model/man.glb, runAnimations: true }十二、模型贴地模型可能会悬空。Cesium 提供heightReference: Cesium.HeightReference.CLAMP_TO_GROUND例如model: { uri: /model/car.glb, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND }效果模型会贴合地形十三、项目中的常见封装实际开发中一般都会封装addModel()例如function addModel(viewer, options) { return viewer.entities.add({ name: options.name, position: Cesium.Cartesian3.fromDegrees( options.lng, options.lat, options.height || 0 ), model: { uri: options.url, scale: options.scale || 1, minimumPixelSize: 64 } }) }使用addModel(viewer, { name: 汽车, lng: 120, lat: 30, url: /model/car.glb, scale: 10 })十四、Cesium 后续重点学习内容学习模型之后后面通常还会接触billboardlabelpolylinepolygonprimitivematerialshader粒子系统轨迹动画热力图聚合但最核心的是3D Tiles因为倾斜摄影城市模型BIM数字孪生基本都依赖它。十五、推荐学习路线建议学习顺序1. Entity 2. billboard 3. label 4. polyline 5. polygon 6. model 7. primitive 8. material 9. shader 10. 3dtiles这样会更容易理解 Cesium 的整体体系。总结Cesium 模型加载核心就两种Entity Primitive其中Entity 更适合业务开发Primitive 更适合大型项目和高性能场景而模型开发中最核心的知识点包括Cartesian3经纬度转换heading/pitch/roll模型缩放模型贴地动态移动3D Tiles掌握这些之后就可以开始真正进入数字孪生开发了。