Cesium基础教程篇六

Cesium基础教程篇六

---

---

前言

Cesium官网：官网链接
Cesium 是一个开源的、高性能的 3D 地球和地图可视化平台，它允许开发者创建基于 Web 的、交互式的地理空间应用程序。Cesium 的核心是一个 WebGL 驱动的引擎，它能够渲染大规模的地理数据集，支持高精度的地球模型和动态数据可视化。

---

一、Cesium影像介绍

cesium中开始创建时默认会使用Cesium自带的影像服务，前面提到过会使用cesium ion上的token
，往往实际中我们需要自己的本地影像或者自己发布的切片或者百度高德腾讯等等这些地图服务。

1. 第一种通过创建viewer时传入baseLayer对象，该方式不能同时添加多个影像，通过ImageryLayer对象创建

	let viewer = new Cesium.Viewer("map3d", { 
	    baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
	        url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
	        minimumLevel: 3,
	        maximumLevel: 18
	    }))
	});

2. 第二种多个方式添加影像图层，viewer.imageryLayers属性是一个影像图层的集合，用于管理场景中的影像图层，提供了如添加、删除影像图层的方法。
   

二、坐标系介绍

1. 屏幕坐标系：canvas上显示的坐标，Cesium中屏幕坐标单位为像素值，用Cartesian2来表示。
   

2. 笛卡尔坐标系：Cesium的笛卡尔坐标系的原点位于地球的中心点，x轴指向经度为0度的位置，y轴指向经度为90度东的位置，z轴指向北极，单位为米，使用Cartesian3表示。
   

3. WGS84：ceisum默认的经纬度坐标系（4326），WGS84坐标的单位可以是度或者弧度，使用Cartographic表示弧度制的WGS84地理坐标系
   

4. cesium提供的坐标转换，我们使用的场景中大部分是通过屏幕坐标交互，所以需要转换成cesium需要的笛卡尔坐标
   a. 经纬度坐标转笛卡尔坐标

	let cartesian3 = Cesium.Cartesian3.fromDegrees(lng, lat, height);

b. 笛卡尔坐标转经纬度坐标

	//笛卡尔空间直角坐标系转为地理坐标（弧度制）
	let cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
	//地理坐标（弧度制）转化为经纬度坐标
	let lng = Cesium.Math.toDegrees(cartographic.longitude);
	let lat = Cesium.Math.toDegrees(cartographic.latitude);
	let height = cartographic.height;

c.屏幕坐标转笛卡尔坐标

	let cartesian3 = viewer.scene.pickPosition(cartesian2);

具体还有更多请参考官网API 官网坐标文档

三、相机介绍

1. Cesium中的相机类为Camera，在场景中我们无需手动创建，Cesium会为场景创建一个默认的相机，并且提供了根据鼠标操作更新相机的交互功能。Camera官网文档其中可以通过viewer.camera或者viewer.scene.camera获取到场景中默认的相机对象。
2. 常见的使用方式

• flyHome : 以动画的方式定位到初始位置

	Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 26, 150.0, 35.5);

• flyTo : 用带动画的方式定位到指定的位置（区域，比如polygon的坐标数组）

	positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));
	let rect=Cesium.Rectangle.fromCartesianArray(positions);
	viewer.camera.flyTo({
	  destination:rect
	})

• setView:没有动画定位到指定位置（单个坐标点的定位）

	var flyToOpts = {
         destination: {
            x: x,//经纬度坐标
            y: y,//经纬度坐标
            z: z,//高度
          },
          orientation: {
            heading: 0,
            pitch: -1.5, //垂直
            roll: 6.279943661313574
          }
     }
	viewer.scene.camera.setView(flyToOpts)

总结

这是第六章坐标系、相机等基础知识，更多进一步的cesium相关知识请关注我，带你更深层次了解cesium

后续更多和cesium有关的更深度的内容可以在创奇社区找我 点击进入创奇社区