web三维gis引擎cesium的学习笔记（包含视频融合和动态纹理）

web三维gis引擎cesium的学习笔记（包含视频融合和动态纹理）

Cesium.Viewer

• Viewer对象的部分参数及函数

Viewer
	zoomTo()
	globe
	camera
		flyToBoundingSphere()
	entities
		add()
	canvas
		setAttribute()
		focus()
	scene
		camera
		screenSpaceCameraController
		primitives	
			add()

坐标系

• 在cesium中主要有三种坐标系，分别为平面坐标系，wgs84坐标系和笛卡尔空间直角坐标系（经过旋转后我们可以发现笛卡尔空间直角坐标系其实就是右手坐标系）
• 平面坐标系：平面坐标系也就是平面直角坐标系，是一个二维笛卡尔坐标系，与Cartesian3相比少了一个z的分量，new Cesium.Cartesian2(x, y)。Cartesian2经常用来描述屏幕坐标系，比如鼠标在电脑屏幕上的点击位置，返回的就是Cartesian2，返回了鼠标点击位置的xy像素点分量
• 
  
  
  

位置方向

• 以下四种是cesium用来描述物体位置及方向的主要方式

• Cartesian3：3D笛卡尔坐标–使用地球固定框架（ECEF）时，它相对于地球中心以米为单位

• Cartographic：由距WGS84椭球面的经度，纬度（以弧度表示）和高度定义的位置

• Quaternion（四元数）：表示为4D坐标的3D旋转

• HeadingPitchRoll：一个用heading、pitch、roll三个方向的旋转角度来表达的旋转信息（以弧度为单位）,以下为英文原版，说的不是很好理解

  Cartographic : a position defined by longitude, latitude (in radians) and height from the WGS84 ellipsoid surface
  HeadingPitchRoll : A rotation (in radians) about the local axes in the East-North-Up frame. Heading is the rotation about the negative z axis. Pitch is the rotation about the negative y axis. Roll is the rotation about the positive x axis

• 三维空间的右手笛卡尔坐标如下图，这张图与英文原版描述的轴方向不太对应，但是帮助我们理解heading,pitch,roll这三个名词确是非常有用的，熟悉摄像机的朋友应该比较了解heading和pitch,由于摄像机一般都是正放的（几乎没有人把摄像机倒立放，因为这样画面也倒立了），因此不会需要roll这第三个参数，而飞机由于可以在空中进行翻转（可以理解为倒立），于是才需要roll来描述这种倒立状态
  

• 以下是官方示例代码

// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
   
    destination : initialPosition,
    orientation : {
   
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
   
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});

官方api文档及示例

• glsl api：Cesium Documentation
• js api:Index - Cesium Documentation
• demo示例：Cesium Sandcastle

Entity API

• Creating Entities | cesium.com
• 在cesium中提供了两种api,一种是Primitive API，它是属于比较低级别的，适合那些精通图像学的开发者，另一个是Entity API，它是一个比较高级别的，已经封装了常用的图形（如点，标签，圆形，椭圆，折线，立方体，矩形，柱体，墙，模型等），使用起来会比较方便，用户一般只是设置下数据就可以了

var entity = viewer.entities.add({
   //entities是EntityCollection类型，可以存放Entity类型，另外还有remove,removeAll等方法 
	id:"uniqueId",//定义一个id,可选，之后可以通过viewer.entities.getById('uniqueId')获取
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),//指定位置
  ellipse : {
    //entity api支持的几何体，有model，point,label等等
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5) //设置外观材质，可以是颜色（ColorMaterialProperty），也可以是图片（ImageMaterialProperty），图片的话直接写图片地址即可
  }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse;
ellipse.material = '/docs/tutorials/creating-entities/images/cats.jpg';//修改材质为图片，实际上创建了ImageMaterialProperty

//棋盘材质
ellipse.material = new Cesium.CheckerboardMaterialProperty({
   
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : new Cesium.Cartesian2(4, 4)
});

• entity api支持创建颜色（ColorMaterialProperty），图像（ImageMaterialProperty），棋盘（CheckerboardMaterialProperty），条纹（StripeMaterialProperty），网格（GridMaterialProperty）这几种材质
• 除了折线外每个形状都有是否填充和轮廓线的设置，如

ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

• 折线可以通过PolylineOutlineMaterialProperty和PolylineGlowMaterialProperty来设置轮廓和发光
• 多边形（polyg