Cesium（四）常用代碼總結

1、陰影效果
viewer.shadows = true;

2、取消左鍵雙擊事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

3、定位飛到某處
viewer.scene.camera.flyTo({ destination: rectangle });

4、開啓燈光
scene.globe.enableLighting = true;

5、限制縮放距離
scene.screenSpaceCameraController.minimumZoomDistance = 100;

6、解決Cesium繪製幾何圖形被高程遮擋問題
viewer.scene.globe.depthTestAgainstTerrain = true;

7、point貼地
 var point = viewer.entities.add({
                position: worldPosition,
                point: {
                    pixelSize: 10,
                    color: Cesium.Color.YELLOW,
                    //控制是否貼地
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                },
            });

8、地球移動事件
camera.moveStart.addEventListener(function() {
});
 camera.moveEnd.addEventListener(function() {
});

9、取消Cesium版權信息
$(".cesium-widget-credits").remove();

10、自定義BaseLayerPicker
         var esriMap = new Cesium.ArcGisMapServerImageryProvider({
            url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
            enablePickFeatures:false
        });
        //設置ProviderViewModel：
        var esriMapModel = new Cesium.ProviderViewModel({
            name:'esri Maps',
            iconUrl:Cesium.buildModuleUrl('./Widgets/Images/ImageryProviders/esriWorldImagery.png'),
            tooltip:'ArcGIS 地圖服務',
            creationFunction:function () {
                return esriMap;
            }
        });
        //只有一個
        var providerViewModels = [];
        providerViewModels.push(esriMapModel);
        viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;

11、設置時間
// 設置時鐘和時間線
viewer.clock.shouldAnimate = true; // 當viewer開啓後，啓動動畫
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // 設置加速倍率
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode(還沒理解具體含義)
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循環播放
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // 設置時間的可見範圍

12、拾取
/**
 * 返回對應窗口位置最上面一個Entity 如果該位置沒有對象那麼返回undefined
 * @param {Cartesian2} windowPosition 窗口座標
 * @returns {Entity} 返回值
 */
function pickEntity(viewer, windowPosition) {
  var picked = viewer.scene.pick(windowPosition);
  if (defined(picked)) {
    var id = Cesium.defaultValue(picked.id, picked.primitive.id);
    if (id instanceof Cesium.Entity) {
      return id;
    }
  }
  return undefined;
};

/**
 *返回對應窗口位置所有Entity的列表 如果該位置沒有對象那麼返回undefined
 * 返回值按可視化順序從前到後存儲在數組裏
 *
 * @param {Cartesian2} windowPosition 窗口位置
 * @returns {Entity[]}  
 */
function drillPickEntities(viewer, windowPosition) {
  var i;
  var entity;
  var picked;
  var pickedPrimitives = viewer.scene.drillPick(windowPosition);
  var length = pickedPrimitives.length;
  var result = [];
  var hash = {};

  for (i = 0; i < length; i++) {
    picked = pickedPrimitives[i];
    entity = Cesium.defaultValue(picked.id, picked.primitive.id);
    if (entity instanceof Cesium.Entity &&
        !Cesium.defined(hash[entity.id])) {
      result.push(entity);
      hash[entity.id] = true;
    }
  }
  return result;
};
該代碼出自：https://www.jianshu.com/p/8ae3624347cb
13、檢測深度
//爲false時，沒有高程遮擋效果
viewer.scene.globe.depthTestAgainstTerrain = false;
//爲true時，有高程遮擋效果
viewer.scene.globe.depthTestAgainstTerrain = true;

14、加載geoserver的WMS服務

    var provider = new Cesium.WebMapServiceImageryProvider({
              url: 'http://localhost:8080/geoserver/cite/wms',
              layers: 'cite:city',
              parameters: {
              	   service : 'WMS',
                  format: 'image/png',
                  transparent: true,
              }
          });
    viewer.imageryLayers.addImageryProvider(provider);

15、自定義credit

var viewer = new Cesium.Viewer('cesiumContainer');
var credit = new Cesium.Credit('Title', '../images/facility.gif', 'http://www.cesiumjs.org');

viewer.scene.frameState.creditDisplay.addDefaultCredit(credit)

16、拾取

    Scene.pick : 返回窗口座標對應的圖元的第一個對象。
    Scene.drillPick :返回窗口座標對應的所有對象列表。
    Globe.pick : 返回一條射線和地形的相交位置點。

17、禁止縮放

viewer.scene.screenSpaceCameraController.enableZoom = false;

18、控制時鐘暫停與繼續

  pauseOrContinue (state) {
    this.viewer.clock.shouldAnimate = state
  }

19、繞點飛行

var viewer = new Cesium.Viewer('cesiumContainer');
   var options = {
           
                lng: 117.1423291616,
                 lat: 39.0645831633,
                 height: 15.8,
                 heading: 0.0,
                 pitch: 0.0,
                roll: 0.0
             };
var position = Cesium.Cartesian3.fromDegrees(options.lng, options.lat, options.height);
// 相機看點的角度，如果大於0那麼則是從地底往上看，所以要爲負值，這裏取-30度
    var pitch = Cesium.Math.toRadians(-30);
    // 給定飛行一週所需時間，比如10s, 那麼每秒轉動度數
    var angle = 360 / 30;
    // 給定相機距離點多少距離飛行，這裏取值爲5000m
    var distance = 5000;
    var startTime = Cesium.JulianDate.fromDate(new Date());
    
   // var stopTime = Cesium.JulianDate.addSeconds(startTime, 10, new Cesium.JulianDate());
 
    viewer.clock.startTime = startTime.clone();  // 開始時間
   // viewer.clock.stopTime = stopTime.clone();     // 結速時間
    viewer.clock.currentTime = startTime.clone(); // 當前時間
    viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行爲方式
    viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 時鐘設置爲當前系統時間; 忽略所有其他設置。
    // 相機的當前heading
    var initialHeading = viewer.camera.heading;
    var Exection = function TimeExecution() {
            // 當前已經過去的時間，單位s
            var delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
            var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
            viewer.scene.camera.setView({
                destination :position, // 點的座標
                orientation:{
                    heading: heading,
                    pitch : pitch,
 
                }
            });
            viewer.scene.camera.moveBackward(distance);
                  
       if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
                viewer.clock.onTick.removeEventListener(Exection);
            }
    };

20、只讓地球顯示一塊區域，其餘裁剪

var coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(-180.0, -23.43687, 180.0, 23.43687);

viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;

21、關閉HDR

viewer.scene.highDynamicRange = false;

22、防止進入地下
23、billboard顯示不完整怎麼解決？

24、gltf模型雙面渲染
doubleSided改爲true

25、開啓debugShowFramesPerSecond

scene.debugShowFramesPerSecond = true;

26、監聽entity選擇改變代碼示例

var lastSelectedPin;
viewer.selectedEntityChanged.addEventListener(function(newEntity) {
    if (lastSelectedPin && lastSelectedPin.billboard) {
        lastSelectedPin.billboard.show = false;
    }
    lastSelectedPin = newEntity;
    if (lastSelectedPin && lastSelectedPin.billboard) {
        lastSelectedPin.billboard.show = true;
    }
});

27、局部座標系

    //以點爲原點建立局部座標系（東方向爲x軸,北方向爲y軸,垂直於地面爲z軸），得到一個局部座標到世界座標轉換的變換矩陣
    var localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);

28、顯示與隱藏cesium的控件

viewer.homeButton.container.childNodes[1].style.display = "none"

29、判斷是否在可視範圍內

var cullingVolume = frameState.cullingVolume;
var boundingVolume = defaultValue(surfaceTile.orientedBoundingBox, surfaceTile.boundingSphere3D);
var intersection = cullingVolume.computeVisibility(boundingVolume);

30、計算一個圖元的法向量

        var geometry = GeometryPipeline.computeNormal(new Geometry({
            attributes: attributes,
            indices: indices,
            primitiveType: PrimitiveType.TRIANGLES,
            boundingSphere: boundingSphere
        }));

31、圖元生成線框形式

var instance = new Cesium.GeometryInstance({
  geometry : Cesium.GeometryPipeline.toWireframe(new Cesium.TetrahedronGeometry()),
  modelMatrix : modelMatrix,
  attributes : {
    color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)
  }
});