Cesium學習

Cesium學習

1.Cesium界面控件

//創建cesium Viewer
viewer = new Cesium.Viewer(‘cesiumContainer’,{

	animation:false, //是否創建動畫小器件，左下角儀表
	
	baseLayerPicker:false, //是否顯示圖層選擇器
	
	fullscreenButton:false, //是否顯示全屏按鈕
	
	geocoder:false, //是否顯示geocoder小器件，右上角查詢按鈕
	
	homeButton:false, //是否顯示Home按鈕
	
	infoBox : false, //是否顯示信息框
	
	sceneModePicker:false, //是否顯示3D/2D選擇器
	
	selectionIndicator : false , //是否顯示選取指示器組件
	
	timeline:false, //是否顯示時間軸
	
	navigationHelpButton:false, //是否顯示右上角的幫助按鈕
	
	scene3DOnly : true, //如果設置爲true，則所有幾何圖形以3D模式繪製以節約GPU資源
	
	navigationInstructionsInitiallyVisible:false,
	
	showRenderLoopErrors:false,
	
	imageryProvider : new Cesium.OpenStreetMapImageryProvider({ url : ‘//a.tile.openstreetmap.org/’ }) //加載自定義地圖瓦片需要指定一個自定義圖片服務器//URL 爲瓦片數據服務器地址
});

2.Cesium entity實體

// 
viewer.entities.removeAll();
var position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
    var heading = Cesium.Math.toRadians(yheading);
    var pitch = Cesium.Math.toRadians(xpitch);
    var roll = Cesium.Math.toRadians(zroll);
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
    //orientation爲模型的方向，由三個參數決定pitch爲繞x軸旋轉的角度，通常稱爲俯仰角
    //roll爲繞z軸旋轉，通常稱爲翻滾角，heading爲繞y軸旋轉的角度，通常稱爲橫滾角
    //這三個參數決定了我們初始看到模型時的角度
    //攝影測量裏又稱爲航向傾角，旁向傾角，相片旋角
    var entity = viewer.entities.add({
        id:id,
        name : url,
        position : position,
        orientation : orientation,
        model : {
            uri : url,
            scale : scale,
        }
    });
    viewer.trackedEntity = entity; 

//對entity的操作：添加、隱藏、修改、去除、居中顯示

ver entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(120.9677706,30.7985748,2.61),
    point: {
        color: Cesium.Color.RED,    //點位顏色
        pixelSize: 10                //像素點大小
    },
    label : {
        text : '測試名稱',
        font : '14pt Source Han Sans CN',    //字體樣式
        fillColor:Cesium.Color.BLACK,        //字體顏色
        backgroundColor:Cesium.Color.AQUA,    //背景顏色
        showBackground:true,                //是否顯示背景顏色
        style: Cesium.LabelStyle.FILL,        //label樣式
        outlineWidth : 2,                    
        verticalOrigin : Cesium.VerticalOrigin.CENTER,//垂直位置
        horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置
        pixelOffset:new Cesium.Cartesian2(10,0)            //偏移
    }
});
viewer.zoomTo(entity)；    //居中到該點

Var rainEntity=viewer.entities.add({
       id: "rain",
     name: 'RainStation',
     parent: rainLayer3D,                
     position: Cesium.Cartesian3.fromDegrees(lon, lat),
     billboard: {
        image: 'images/pointIcons/rain1.png',
        scale:0.7,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    },
    label: {
              text: rainfall,
              font: '12px SimHei ',
              Width: 3,
        	 style: Cesium.LabelStyle.FILL,
              fillColor: Cesium.Color.AQUA,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.TOP
    }
  });  //添加
viewer.entities.getById("rain").show = false;   //隱藏
viewer.entities.getById("rain").label.text= "drp";   //修改屬性
viewer.entities.removeAll();  //移除所有
viewer.zoomTo(rainEntity);   //居中顯示
//**********************
增
創建一個實體參考：
//方法一
var entity = new Entity({
    id : 'uniqueId'
});
viewer.entities.add(entity);
//方法一 簡寫
viewer.entities.add({
    id : 'uniqueId'
});
//方法二
var entity = viewer.entities.getOrCreateEntity('uniqueId');
查
查找實體的方法：
var entity = viewer.entities.getById('uniqueId');
刪
移除實體的方法：
//方法一，先查後刪
var entity = viewer.entities.getById('uniqueId');
viewer.entities.remove(entity) 
//方法二，直接刪除
viewer.entities.removeById('uniqueId')
//方法三，刪除所有
viewer.entities.removeAll()

3. 去掉entity的雙擊事件

問題所在：雙擊entity，會放大視圖，entity居中顯示，且鼠標左鍵失去移動功能，鼠標滾輪失去作用
解決問題：
viewer.screenSpaceEventHandler.setInputAction(function(){},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK );

4. 獲取當前視角高度

var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;
var height=ellipsoid.cartesianToCartographic(viewer.camera.position).height;

5. 獲取某個經緯度在屏幕上的位置

var position = Cesium.Cartesian3.fromDegrees(lon, lat);
var clickPt =Cesium.SceneTransforms.wgs84ToWindowCoordinates (viewer.scene, position);
var screenX=clickPt.x;
var screenY=clickPt.y; 

6. 獲取三維場景屏幕中心點座標

var result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2 ( viewer.canvas.clientWidth /2 , viewer.canvas.clientHeight / 2));
var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
var lon = curPosition.longitude*180/Math.PI;
var lat = curPosition.latitude*180/Math.PI;

7. 響應鼠標單擊等事件，獲取屏幕點擊座標

var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function(click){},Cesium.ScreenSpaceEventType.LEFT_CLICK);
var clickX=click.position.x;
var clickY=click.position.y;
這個LEFT_CLICK可以換成MIDDLE_CLICK、MOUSE_MOVE等就會響應滾輪點擊、鼠標移動等事件，見參考文檔中的ScreenSpaceEventType()，注意不同的事件中，function中的click會有不同的屬性，可console.log(click)，找到所需

8. 跟蹤相機視角的改變

viewer.camera.moveStart.addEventListener(function(moveStartPosition){})；
viewer.camera.moveEnd.addEventListener(function(moveEndPosition){})；
其實還有個
viewer.camera.changed.addEventListener(function(moveEndPosition){})，但我不會用，總是提示changed不存在，但是camera的參考文檔中這個changed和moveStart和moveEnd都可以addEventListener

9. 使視角到達某一地點

viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(lon, lat, height),
        orientation: {
            heading : curHeading,  //左右偏移
            pitch : curPitch,   //上下偏移
            roll : 0.0                           
        }
    });