Cesium源码中的基础代码

Cesium代码块段学习

Web框架

Cesium基础操作

连接Cesium账号的token

Cesium.Ion.defaultAccessToken = 'Your Token';
               

Web界面的各个控件

//用于构建应用程序的基本小部件。
var viewer = new Cesium.Viewer('cesiumContainer', {
		//需要进行可视化的数据源的集合
		animation: false, //是否显示动画控件
		//shouldAnimate: true,
		homeButton: false, //是否显示Home按钮
		fullscreenButton: false, //是否显示全屏按钮
		baseLayerPicker: false, //是否显示图层选择控件
		geocoder: false, //是否显示地名查找控件
		timeline: false, //是否显示时间线控件
		sceneModePicker: true, //是否显示投影方式控件
		navigationHelpButton: false, //是否显示帮助信息控件
		infoBox: false, //是否显示点击要素之后显示的信息
		requestRenderMode: true, //启用请求渲染模式
		scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
		sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
		fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
	
	});

获取地球场景及地形

     //获取场景
                var scene = viewer.scene;
                //在场景中渲染的地球仪
                var globe = scene.globe;

                scene.screenSpaceCameraController.enableCollisionDetection = false;//第一个根据鼠标输入到画布修改摄像机位置和方向；第二个使相机进入地下。
            //screenSpaceCameraController获取用于摄像机输入处理的控制器;enableCollisionDetection启用或禁用相机对地形的碰撞检测。(默认为true)
                var extendGlobe = new Cesium.ExtendGlobe(viewer);
                extendGlobe.terrainTransparent = true; // or false

全球影像中文注记服务

 viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
		    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
		    layer: "tdtAnnoLayer",
		    style: "default",
		    format: "image/jpeg",
		    tileMatrixSetID: "GoogleMapsCompatible",
		    maximumLevel: 13,
			minimumLevel: 1,
		    show: false
		}));

飞行定位（运行后最初位置）

	viewer.scene.camera.flyTo({
		   destination: new Cesium.Cartesian3.fromDegrees(107.767504857,28.8597158189,10000),
		    orientation: {
	            heading : Cesium.Math.toRadians(20.0), // 方向
	            pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
	            roll : 0
	       },
	       duration:1
		});

设置相机位置以及航向角

viewer.scene.camera.setView({                //设置相机的位置，方向和变换。
  destination: new Cesium.Cartesian3(       //笛卡尔坐标类型。摄像机在WGS84（世界）坐标中的最终位置或从上向下视图中可见的矩形。
    3827058.651471591,  
    -256575.7981065622,
    5078738.238484612
  ),                                           //116.3972282409668, 39.90960456049752
  orientation: new Cesium.HeadingPitchRoll(       // //目的类型（航向角【从局部北向旋转，其中正角向东增加】、俯仰角【正俯仰角在平面上方。负俯仰角在平面下方】、距中心距离【距本地框架中心的距离】）
    1.9765540737339418,
    -0.17352018581162754,
    0.0030147639151465455
  ),
  endTransform: Cesium.Matrix4.IDENTITY,        //表示摄像机参考帧的变换矩阵
});

开启地下可见以及地表透明

var viewer = new Cesium.Viewer('cesiumContainer', {
   //开启或者关闭地下模式
 setCollisionDetection(enable) {
        this.viewer.scene.screenSpaceCameraController.enableCollisionDetection = enable
    },

    //设置透明度
    setAlpha(alpha) {
        this.viewer.scene.globe.translucency.frontFaceAlpha = alpha;
    },
  //创建世界地形
  terrainProvider : Cesium.createWorldTerrain()
});

模型

加载模型

加载gltf模型

entities方式加载gltf模型（01）

 // 添加模型
		  var position=Cesium.Cartesian3.fromDegrees(107.767504857,28.8597158189, 0);
		addFengjiModel(position);
			
		function  addFengjiModel(position){
			var hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(180), 0, 0);
		    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
		    var color=Cesium.Color.WHITE ;
		    // 添加模型
		    var model = viewer.entities.add({
		        //模型id
		       id:'model',
		        //模型位置
		        position: position,
		        //模型方向
		        orientation: orientation,
		       // 模型资源
		        model: {
		          //  模型路径
		            uri: '../no1/try1/g3.gltf',
		          //  模型最小刻度
		            minimumPixelSize: 128,
		            // 模型最大刻度
		            maximumSize: 128,
		         //   设置模型最大放大大小
		            maximumScale : 200,
		         //   模型是否可见
		            show: true,
		          //  模型轮廓颜色
		            silhouetteColor:Cesium.Color.WHITE,
		          //  模型颜色  ，这里可以设置颜色的变化
		            color: color ,
		           //   仅用于调试，显示魔仙绘制时的线框
			        debugWireframe : false,
			     //   仅用于调试。显示模型绘制时的边界球。
			        debugShowBoundingVolume : false,
			        
			        scale:10,
			        runAnimations:true                //是否运行模型中的动画效果
		        },
		       // 添加描述
		        description: '风机模型'
		    });
		   // 视角切换到模型
		    viewer.trackedEntity = model;
		}

点击模型会显示模型的注释（这里是风机模型）

entities方式加载gltf模型（02）

var position=Cesium.Cartesian3.fromDegrees(107.767504857,28.8597158189, 0);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
  url : '../no1/try1/g3.gltf',
}));

entities方式加载gltf模型（02）

var entity = viewer.entities.add({  
  position : Cesium.Cartesian3.fromDegrees(107.767504857,28.8597158189,100),  
  model : {  
 	 uri : '../no1/try1/g3.gltf'  
  }  
});  
viewer.trackedEntity = entity;

加载3DTile（json）模型（01）

   var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
       url: '../data/3dtiles/tianjie/tileset.json', //数据地址
       maximumScreenSpaceError: 2,  //最大的屏幕空间误差
       maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
       modelMatrix: m,//形状矩阵
   }));

加载3DTile（json）模型（02）

var palaceTileset = new Cesium.Cesium3DTileset({
  url: '../no1/try1/1/tileset.json',
      //控制切片视角显示的数量，可调整性能
              maximumScreenSpaceError: 2,//最大的屏幕空间误差
              maximumNumberOfLoadedTiles: 100000,//最大加载瓦片个数
      });
      viewer.scene.primitives.add(palaceTileset);//场景中添加该模型
      scene.globe.depthTestAgainstTerrain = true;
      viewer.zoomTo(palaceTileset);//相机飞至模型上空

加载3DTile（json）模型（03）

模型属性绑定

ViewModel属性设置

var originalColor = Cesium.Color.BLACK;
var originalNearDistance = 1000.0;
var originalFarDistance = 1000000.0;
var originalNearAlpha = 0.0;
var originalFarAlpha = 1.0;

var color = originalColor;

// The viewModel tracks the state of our mini application.
var viewModel = {
  enabled: true,
  nearDistance: originalNearDistance,
  farDistance: originalFarDistance,
  nearAlpha: originalNearAlpha,
  farAlpha: originalFarAlpha,
};

Cesium.knockout.track(viewModel);              把对象关联到Cesium这里用的绑定可以参考观察者模式

ViewModel与地形模型绑定且实时更新

// Bind the viewModel to the DOM elements of the UI that call for it.（绑定地形模型，且实时更新）
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);          绑定MV
for (var name in viewModel) {
  if (viewModel.hasOwnProperty(name)) {         // Object 的原型方法,定义在viewModel对象之上。用来检测一个属性是否是对象的自有属性，是返回true
    Cesium.knockout.getObservable(viewModel, name).subscribe(update);  //knockout使Cesium球体监听html控件, 从而根据控件的值实时更新一些地图属性.
  }
}

//图层切换
Sandcastle.addToolbarButton("Random color", function () {   //相机移动时，添加按钮更新图层颜色
  color = Cesium.Color.fromRandom({
    alpha: 1.0,
  });
  update();
});

Sandcastle.addToolbarButton("Clear", function () {          //相机移动时，添加按钮清除模型信息，进行更新
  color = originalColor;
  viewModel.enabled = true;
  viewModel.nearDistance = originalNearDistance;
  viewModel.farDistance = originalFarDistance;
  viewModel.nearAlpha = originalNearAlpha;
  viewModel.farAlpha = originalFarAlpha;
  update();
});

function update() {
  globe.undergroundColor = viewModel.enabled ? color : undefined;      //地下颜色为模型部分是，设置颜色

  var nearDistance = Number(viewModel.nearDistance);
  nearDistance = isNaN(nearDistance)
    ? originalNearDistance
    : nearDistance;

  var farDistance = Number(viewModel.farDistance);
  farDistance = isNaN(farDistance)
   ? originalFarDistance : farDistance;

  if (nearDistance > farDistance) {
    nearDistance = farDistance;
  }

  var nearAlpha = Number(viewModel.nearAlpha);
  nearAlpha = isNaN(nearAlpha) ? 0.0 : nearAlpha;

  var farAlpha = Number(viewModel.farAlpha);
  farAlpha = isNaN(farAlpha) ? 1.0 : farAlpha;

  globe.undergroundColorAlphaByDistance.near = nearDistance;
  globe.undergroundColorAlphaByDistance.far = farDistance;
  globe.undergroundColorAlphaByDistance.nearValue = nearAlpha;
  globe.undergroundColorAlphaByDistance.farValue = farAlpha;

}
update(); 

模型变换

模型旋转

// 设置模型旋转90度

entity.readyPromise.then(function(argument) {
  var position = Cesium.Cartesian3.fromDegrees(position);
  var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(90)));
  Cesium.Matrix4.multiply(mat, rotationX, mat);
  model.modelMatrix = mat;
})

模型矩阵变换

palaceTileset.readyPromise.then(function(argument) {
  var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
  var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);    //mat为局部坐标的z轴垂直于地表，局部坐标的y轴指向正北的4x4变换矩阵
  var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));  //rotationX为旋转加平移的3x3变换矩阵，这里按照弧度转换
  Cesium.Matrix4.multiply(mat, rotationX, mat);     //生成局部坐标的变换最终矩阵
  tileset._root.transform = mat;
  viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)});
});

添加JS文件

在网络框架最后添加