Cesium筆記----關於viewer的配置及常用東西

申小璇發表於2020-12-24
筆記View

關於viewer

var viewer = new Cesium.Viewer('cesiumContainer', {
      animation: false, //左下角的動畫儀表盤
      baseLayerPicker: false, //右上角的圖層選擇按鈕
      geocoder: false, //搜尋框
      homeButton: false, //home按鈕
      sceneModePicker: false, //模式切換按鈕
      timeline: false, //底部的時間軸
      navigationHelpButton: false, //右上角的幫助按鈕，
      fullscreenButton: false, //右下角的全屏按鈕
      infoBox: false,//小彈窗
      selectionIndicator: false,
      zoomIndicatorContainer: false,
      navigation: false,//指南針
      // shadows: true,//陰影
    })
    window.viewer = viewer

    var scene = viewer.scene
    //設定環境光（這是設定比較灰的）
    scene.lightSource.ambientLightColor = new Cesium.Color(0.4, 0.4, 0.4, 0.4);
    //開啟顏色校正
    viewer.scene.colorCorrection.show = true;
    viewer.scene.colorCorrection.saturation = 1;
    viewer.scene.colorCorrection.brightness = 0.4;
    viewer.scene.colorCorrection.contrast = 1;
    viewer.scene.colorCorrection.hue = 0;
    //開啟泛光和HDR
    viewer.scene.bloomEffect.show = true;
    viewer.scene.hdrEnabled = true;
    //隱藏底部logo
    viewer._cesiumWidget._creditContainer.style.display = 'none'
    //顯示幀數
    // viewer.scene.debugShowFramesPerSecond = true;
    // viewer.extend(Cesium.viewerCesiumInspectorMixin)//除錯工具
    //移除預設的雙擊事件
	viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
    //fxaa
    // viewer.scene.postProcessStages.fxaa.enabled = true;
    //深度檢測
    // viewer.scene.globe.depthTestAgainstTerrain = true;

關於layers

Cesium.when(promise, (layers) => {
	layers.forEach((res, i) => {
        // res.selectedColor = Cesium.Color.CYAN//選中顏色
        //動態自發光
        res.selectedColor = ''//取消選中顏色
        var hyp = new Cesium.HypsometricSetting();
		setHypsometric(res);
		//設定自發光紋理
		function setHypsometric(layer) {
			hyp.emissionTextureUrl = "/static/img/speedline.jpg";
			hyp.emissionTexCoordUSpeed = 0.25;
			layer.hypsometricSetting = {
				hypsometricSetting: hyp,
			}

		};
})

關於事件

//滑鼠單擊事件
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
    handler.setInputAction(function (e) {
    ...
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

//註冊滑鼠點選事件----此方法獲取要素集（須先查詢data）
     viewer.pickEvent.addEventListener(function (feature) {
       console.log(feature)
     })
    
//監聽相機改變事件
	viewer.scene.camera.changed.addEventListener(function () {
		var position = viewer.camera.position
        var cartographic = Cesium.Cartographic.fromCartesian(position)
	})

實體新增

//entities
viewer.entities.add({
	  name: 'name',
      id: 'id',
      position: new Cesium.CallbackProperty(function () {
      //可用回撥函式動態修改，實現動態效果
      ...
      return ...
      }, false),
      billboard: {
        image: 'URL',
        scale: 0.5,//縮放
        // width: 200,
        // height: 80,
        disableDepthTestDistance: Number.POSITIVE_INFINITY, //不被遮擋
        //可視距離範圍
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(57, 210),
      },
    })
//primitives
//gltf
viewer.scene.primitives.add(Cesium.Model.fromGltf({
       id:'id',
       url:'XXX.glb',
       modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84,fixedFrameTransforms),
            }))
//其他
viewer.scene.primitives.add(new Cesium.Primitive({
       id:'id',
       geometryInstances:instance,
       appearance: new Cesium.MaterialAppearance({
         closed:false,
         material:material,
       }),
       show:true,
     }))
//3dtileset
//新增白模
    var tileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: 'XXX.json',
      })
    )
    //高度糾偏
    tileset.readyPromise.then(function (tileset) {
      viewer.scene.primitives.add(tileset)
      var heightOffset = 2000.0 //高度
      var boundingSphere = tileset.boundingSphere

      //Cesium.Cartographic.fromCartesian (cartesian, ellipsoid , result )
      var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
      var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height)

      //Cesium.Cartesian3.fromRadians (longitude, latitude, height , ellipsoid , result )
      var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset)

      //Cesium.Cartesian3.subtract (left, right, result)
      var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
      // viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0))

常用方法

viewer.camera.setView({
     destination: Cesium.Cartesian3.fromDegrees(),
     orientation: {
       heading: Cesium.Math.toRadians(50),
       pitch: Cesium.Math.toRadians(-5),
       roll: 0,
     },
   })

viewer.camera.flyTo({
          destination: new Cesium.Cartesian3.fromDegrees(),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(0),
            roll: 0.0,
          },
        })

關於彈窗

var el = document.getElementById('pbubble');
el.style.display='block'
            viewer.scene.postRender.addEventListener(function () {
              // 每一幀都去計算氣泡的正確位置
              if (position) {
                var canvasHeight = scene.canvas.height
                var windowPosition = new Cesium.Cartesian2()
                Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position, windowPosition)
                el.style.bottom = canvasHeight - windowPosition.y + 45 + 'px'
                el.style.left = windowPosition.x - 70 + 'px'
                el.style.visibility = 'visible'
                el.innerHTML="總車位12<br>剩餘10"
              }
            })

相關文章