<link  rel="external nofollow"    rel="stylesheet">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>

<template>
  <div class="">
    <div id="cesiumContainer">
    </div>
  </div>
</template>

<script>
import 'cesium/Build/Cesium/Widgets/widgets.css';
 
export default {
  name: 'HelloWorld',
  data() {
    return {
      viewer:null
    }
  },
  mounted(){
    this.initCesium()
  },
  methods:{
    initCesium(){
      Cesium.Ion.defaultAccessToken = "申請的token"; 
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 90, -20, 110, 90); //西南東北，默認顯示中國
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        }),
        animation: false,
        timeline: false,  //時間線
        fullscreenButton: true,  //全屏模式
        infoBox: false,  //要素信息框
        homeButton: false, //顯示主頁
        geocoder: true, //搜索位置
        sceneModePicker: true,//模式切換
        selectionIndicator: true, //展示三維的指示器
        navigationHelpButton: false, //幫助按鈕
        navigationInstructionsInitiallyVisible: false
      });
      // var longitude = 113.3061993318322; //地圖設置默認位置
      // var latitude = 22.97302468714043;
      var height = -1.1406325468715177e-9;
      var heading = 0;
      var tileset = new Cesium.Cesium3DTileset({
        url:'https://lab.earthsdk.com/model/702aa950d03c11e99f7ddd77cbe22fea/tileset.json', //測試數據上海東方明珠建筑數據
      
        maximumMemoryUsage: 100,//不可設置太高，目標機子空閑內存值以內，防止瀏覽器過于卡
        maximumScreenSpaceError: 32,//用于驅動細節(jié)細化級別的最大屏幕空間錯誤;較高的值可提供更好的性能，但視覺質量較低。
        maximumNumberOfLoadedTiles: 1000,  //最大加載瓦片個數
        shadows: false,//是否顯示陰影
        skipLevelOfDetail: true,// 確定是否應在遍歷期間應用詳細級別跳過(默認false)
        baseScreenSpaceError: 1024,//When skipLevelOfDetailis true，在跳過詳細級別之前必須達到的屏幕空間錯誤(默認1024)
        skipScreenSpaceErrorFactor: 16,// 定義要跳過的最小屏幕空間錯誤的乘數。與 一起使用skipLevels來確定要加載哪些圖塊(默認16)
        skipLevels: 1,//skipLevelOfDetail是true 一個常量，定義了加載圖塊時要跳過的最小級別數。為 0 時，不跳過任何級別。與 一起使用skipScreenSpaceErrorFactor來確定要加載哪些圖塊。(默認1)
        immediatelyLoadDesiredLevelOfDetail: false,//當skipLevelOfDetail是時true，只會下載滿足最大屏幕空間錯誤的圖塊。忽略跳過因素，只加載所需的圖塊(默認false)
        loadSiblings: false,// 如果為true則不會在已加載完概況房屋后，自動從中心開始超清化房屋 --- 何時確定在遍歷期間skipLevelOfDetail是否true始終下載可見瓦片的兄弟姐妹(默認false)
        cullWithChildrenBounds: true,//是否使用子邊界體積的并集來剔除瓦片（默認true）
        dynamicScreenSpaceError: true,//減少距離相機較遠的圖塊的屏幕空間錯誤(默認false)
        dynamicScreenSpaceErrorDensity: 0.00278,//數值加大，能讓周邊加載變快 --- 用于調整動態(tài)屏幕空間誤差的密度，類似于霧密度(默認0.00278)
        dynamicScreenSpaceErrorFactor: 4.0,// 用于增加計算的動態(tài)屏幕空間誤差的因素(默認4.0)
        dynamicScreenSpaceErrorHeightFalloff: 0.25//密度開始下降的瓦片集高度的比率(默認0.25)
      });
      this.viewer.scene.primitives.add(tileset);
      tileset.readyPromise.then(function(argument) {
        var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
        var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));
        Cesium.Matrix4.multiply(mat, rotationX, mat);
        tileset._root.transform = mat;
        this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)});
      });
   
    },
  }
}
</script>

<style lang="scss" scoped>
#cesiumContainer{
  width: 100%;
  height: 1000px;
}
</style>