当前位置: 首页 > news >正文

Cesium 基本概念:创建实体和相机控制

基本概念

Entity

// 创建一个实体
const entity_1 = viewer.entities.add({position: new Cesium.Cartesian3(0, 0, 10000000),point: {pixelSize: 10,color: Cesium.Color.BLUE}
});
// 通过经纬度创建实体
const position = Cesium.Cartesian3.fromDegrees(180.0, 0.0);
// 创建一个恒星实体
let entity_2 = viewer.entities.add({name: 'entity_2',position: position,point: {pixelSize: 10,color: Cesium.Color.YELLOW,outlineColor: Cesium.Color.BLACK,outlineWidth: 2}
});
    // 创建PolylineVolume实体const positions = Cesium.Cartesian3.fromDegreesArrayHeights([0, 0, 11742000,20, 0, 11742000,40, 0., 11742000,60, 0, 11742000,80, 0., 11742000,100, 0, 11742000,120, 0., 11742000,]);const polyline = viewer.entities.add({polyline: {width: 4,positions: positions, // 路径点数组material: Cesium.Color.RED.withAlpha(0.5) // 设置半透明的红色材质}});

Cesium.Cartesian3代表固连在地球上的笛卡尔坐标系(大地坐标系)上的点。
大地坐标系x轴正方向为从地心指向经纬度(0,0)点方向,y轴从地心指向(90,0)方向,z轴从地心指向(0,90)方向。
Cesium提供(经度,纬度,高度)转大地坐标的方法Cesium.Cartographic.fromCartesian,和大地坐标转经纬高坐标的方法Cesium.Cartesian3.fromDegrees

DataSource

const czml = [{id: "document",name: "CZML Point",version: "1.0",clock: {"interval": "2012-03-15T10:00:00Z/2012-03-15T15:00:00Z","currentTime": "2012-03-15T10:00:00Z","multiplier": 60,"range": "LOOP_STOP","step": "SYSTEM_CLOCK_MULTIPLIER"}},{id: "point 1",name: "point",label: {fillColor: {rgba: [255, 255, 255, 255],},font: "13pt Lucida Console",horizontalOrigin: "LEFT",pixelOffset: {cartesian2: [20, 0],},style: "FILL",text: "referencing fillColor",},position: {"interpolationAlgorithm": "LAGRANGE","interpolationDegree": 5,"referenceFrame": "INERTIAL","epoch": "2012-03-15T10:00:00Z",cartographicDegrees: [0, .0, .0, 12742000,2000, 20.0, .0, 12742000,4000, 40.0, .0, 12742000,6000, 60.0, .0, 12742000,8000, 80.0, .0, 12742000,10000, 100.0, .0, 12742000,12000, 120.0, .0, 12742000,14000, 140.0, .0, 12742000,16000, 160.0, .0, 12742000,18000, 180.0, .0, 12742000,],},point: {color: {rgba: [255, 255, 255, 255],},pixelSize: 5,},path: {"show": [{"interval": "2012-03-15T10:00:00Z/2012-03-16T10:00:00Z","boolean": true}],"width": 1,"material": {"solidColor": {"color": {"rgba": [255, 255, 255, 100]}}},"resolution": 120,leadTime: 0,trailTime: 1e10}
];
const dataSourcePromise = Cesium.CzmlDataSource.load(czml)
viewer.dataSources.add(dataSourcePromise)
dataSourcePromise.then(() => {viewer.zoomTo(dataSourcePromise)
})

czml中,第一个元素为描述信息,从第二个元素开始为实体。
其中path属性表示运动轨迹,可以通过leadTimetrailTime控制前后长度。

相机控制

采用以下方式控制相机绕地球自转
center为地心向z轴偏移1个单位的点,viewer.camera.lookAt(center, offfset)offset参数为以center为原点的局部坐标系,z轴正方向为地心到center的方向。

let distance = 50000000
let height = 10000000
let a = 0
let lastTime: number | undefined = undefined
viewer.scene.preRender.addEventListener(() => {// 抵消地球自转let currentTime = viewer.clock.currentTimelet days = currentTime.dayNumber + currentTime.secondsOfDay / 24 / 3600if (lastTime != undefined) {a += (days - lastTime) * 2 * Math.PI}lastTime = daysif (viewer.scene.mode === Cesium.SceneMode.SCENE3D) {viewer.camera.lookAt(center,new Cesium.Cartesian3(distance * Math.sin(a), distance * Math.cos(a), height))}
})
http://www.lryc.cn/news/387288.html

相关文章:

  • vue使用scrollreveal和animejs实现页面滑动到指定位置后再开始执行动画效果
  • 在Ubuntu 16.04上安装和配置GitLab的方法
  • STM32的SPI通信
  • 机器学习引领教育革命:智能教育的新时代
  • 6月29日,每日信息差
  • SpringCloud中复制模块然后粘贴,文件图标缺少蓝色方块
  • JS乌龟吃鸡游戏
  • 第十节:学习ConfigurationProperties类来配置pojo实体类参数(自学Spring boot 3.x的第二天)
  • 如何学习Node.js
  • 云计算基础知识
  • 基于单片机光纤测距系统的设计与实现
  • python项目实战——人生重开模拟器
  • 小时候的子弹击中了现在的我-hive进阶:案例解析(第18天)
  • 电影票房预测管理系统设计
  • 正则表达式与Pyhton
  • Transformer常见面试题
  • Linux——vim的配置文件+异常处理
  • node mySql 实现数据的导入导出,以及导入批量插入的sql语句
  • Webpack: 底层配置逻辑
  • 数字图像处理期末复习题1
  • poi-tl 生成 word 文件(插入文字、图片、表格、图表)
  • centos上部署Ollama平台,实现语言大模型本地部署
  • Java学习 - Redis Redigo简单介绍
  • 【鸿蒙学习笔记】ArkTS组件 Blank
  • 如何使用Spring Boot进行单元测试
  • 2024steam夏促商店打不开、steam活动加载不了解决方法一览
  • IPC进程通信:QNX
  • OpenCV学习之cv2.imshow()函数
  • Oracle、MySQL、PostGreSQL、SQL Server-空值
  • python pip详解1