《面向三维GIS的Cesium开发与应用》读书笔记-阿里云开发者社区

《面向三维GIS的Cesium开发与应用》读书笔记

2023-06-21 390

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 《面向三维GIS的Cesium开发与应用》读书笔记

内容来源于李军、赵学胜、李晶编著的《面向三维GIS的Cesium开发与应用》，以下为读书笔记，仅供学习

可以参考读书笔记的内容进行入门和了解cesium，更详细的学习内容请看官网：https://cesium.com/learn/cesiumjs-learn/

书中有些代码应该是旧版本的，有些错误，我根据官网地址进行了纠正。

1.开源GIS三维可视化平台

Cesium
Three.js
MapBox
Echarts
DECK GL
MapTalks
World Wind
OpenSceneGraph

2.开发实践

(1)安装 cesium

npm
```
npm install cesium
```

CDN

<script src="https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Cesium.js"></script>
<link
href="https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>

(2)简单示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script>
  <link href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
  const viewer = new Cesium.Viewer('cesiumContainer');
    viewer.camera.setView({
    
    
    //广州大学城上方
      destination : Cesium.Cartesian3.fromDegrees(113.392987,23.051086, 10000),
      orientation: {
    
    
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: 0.0
  }
    });
  </script>
 </div>
</body>
</html>

滚动鼠标滚轮放缩，就可以看到一个完整的地球

注意：Cesium默认使用的是Bing地图，

(3)Viewer 地图展示窗口

new Cesium.Viewer('cesiumContainer', options);

options 设置空间和基础图层属性
对应官方 API 地址：https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html

3.Cesium 坐标系统

屏幕坐标系，二维笛卡尔坐标系（Cartesian2）
笛卡尔空间指教坐标系（Cartesian3）
WGS-84 地理坐标：x 经度 lng 向东为正，向西为负，y 纬度 lat 向北为正，向南为负，z 高度 height,弧度坐标值

Cesium 坐标转换

角度与弧度转换

Cesium.Math 官方 API 地址：https://cesium.com/learn/cesiumjs/ref-doc/Math.html

var radians = Cesium.Math.toRadians(degrees);
var degrees = Cesium.Math.toDegrees(radians);

经纬度坐标转笛卡尔空间指教坐标系

Cartesian3 官方 API 地址：https://cesium.com/learn/cesiumjs/ref-doc/Cartesian3.html

var c3 = Cesium.Cartesian3.fromDegrees(lng, lat, height);
var coordinates = [lng, lat, lng, lat];
var c3 = Cesium.Cartesian3.fromDegreesArray(coordinates);
var coordinates = [lng, lat, h, lng, lat, h];
var c3 = Cesium.Cartesian3.fromDegreesArrayHeights(coordinates);

通过椭球体转换
Ellipsoid官方 API 地址： https://cesium.com/learn/cesiumjs/ref-doc/Ellipsoid.html

Cartographic官方 API 地址：https://cesium.com/learn/cesiumjs/ref-doc/Cartographic.html

var ellipsoid84 = Cesium.Ellipsoid.WGS84;
var position = Cesium.Cartographic.fromDegrees(lng, lat, height);
var c3 = ellipsoid84.cartographicToCartesian(position);
var c3s = ellipsoid84.cartographicArrayToCartesianArray([pos1, pos2, pos3]);

笛卡尔空间坐标转经纬度坐标

var cartographoc = Cesium.Cartographic.fromCartesian(cartesian3);
//椭球体转换
var cartographoc = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3);

var cartographocs = Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray([c1, c2, c3]);

屏幕坐标转笛卡尔空间坐标

//屏幕坐标转场景空间指教坐标，包含地形，倾斜摄影测量模型等三维模型的坐标
var cartesian3 = viewer.scene.pickPosition(cartesian2);
//屏幕坐标转地表笛卡尔空间坐标，包含地形，不包含倾斜摄影测量等三维模型的坐标
var cartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(cartesian2), viewer.scene);
//屏幕坐标转椭球面笛卡尔空间坐标，不包含地形、倾斜摄影测量等三维模型的坐标
var cartesian3 = viewer.camera.pickEllipsoid(center, viewer.scene.globe.ellipsoid)

5.笛卡尔空间坐标转屏幕坐标

var c2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(cartesian3);

4. Cesium 相机系统

Camera官方API地址：https://cesium.com/learn/cesiumjs/ref-doc/Camera.html

(1)鼠标和触摸事件与摄像头交互

左点击并拖动：移动整个地图
右点击并拖动：放缩相机
滚轮：放缩相机
点击滚轮并拖动：围绕地球表面的点旋转相机

(2)相机的方位和位置

1.右手笛卡尔坐标系

yaw:围绕 y 轴旋转，偏航角，水平旋转
pitch：围绕 x 轴旋转，俯仰角，上下旋转
roll：围绕 z 轴旋转，翻滚角，左右旋转

2.Cesium 相机

与右手笛卡尔坐标系相同，用 heading 替换 yaw

heading:偏航角,默认 0
pitch:俯仰角，默认-90
roll:翻滚角，默认 0

另一种是DirectionUp，两个都是Cartesian3类型

direction
up

3.设置视角
```js
var position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
viewer.camera.setView({
destination: position,//飞行目标点
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: 0.0
}
});

> 4.切换视角
```js
viewer.camera.flyTo({
  destination: position,//飞行目标点
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: 0.0
  },
  duration:5//持续时间
});

5.看向某个点

 lookAt(target,offset)//两个参数都是Cartesian3

target:目标位置
offset:在以目标为中心的局部东-北向上参考系中距目标的偏移。
(1)使用笛卡尔坐标偏移
```js

const center = Cesium.Cartesian3.fromDegrees(-98.0, 40.0);
viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));

（2）使用偏航角俯仰角范围偏移
```js
const center = Cesium.Cartesian3.fromDegrees(-72.0, 40.0);
const heading = Cesium.Math.toRadians(50.0);
const pitch = Cesium.Math.toRadians(-20.0);
const range = 5000.0;
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

《面向三维GIS的Cesium开发与应用》读书笔记

1.开源GIS三维可视化平台

2.开发实践

(1)安装 cesium

(2)简单示例

(3)Viewer 地图展示窗口

3.Cesium 坐标系统

Cesium 坐标转换

4. Cesium 相机系统

(1)鼠标和触摸事件与摄像头交互

(2)相机的方位和位置

相关资料

热门文章

最新文章

相关电子书