使用開源Cesium+Vue實現傾斜攝影三維展示

npm i vue -g
npm uninstall vue-cli -g 解除安裝舊版本
npm cache clean --force 清除快取
npm install -g @vue/cli@4  安裝最新版Vue腳手架 Vue CLI 4    
npm install npm@latest 更新npm到最新版本，避免編譯出問題

vue create kibacesium

npm run serve 

vue add vue-cli-plugin-cesium

<template>
  <div>
    <No01InitVue></No01InitVue>
  </div>

</template>

<script>
import No01InitVue from './CesiumExample/No01-init.vue'
export default {
  name: 'HelloWorld',
   components: {
    No01InitVue
  },
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

npm run serve 

<template>
  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "",
  mounted() {
    // var viewer = new Cesium.CesiumWidget('cesiumContainer')

    // eslint-disable-next-line no-undef
    //var viewer = new Cesium.Viewer("cesiumContainer");

    // eslint-disable-next-line no-console
    // console.log(viewer)
    this.init();
  }
  ,
  methods: { 
    init() {

      let url = "http://192.168.1.1:6080/arcgis/rest/services/SampleWorldCities/MapServer";
      // eslint-disable-next-line no-undef
      let geogle = new Cesium.ArcGisMapServerImageryProvider({ url: url });
      // eslint-disable-next-line no-undef
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,         //是否顯⽰圖層選擇控制元件
        selectionIndicator: false,
        // geocoder: false,                //是否顯⽰地名查詢控制元件
        // sceneModePicker: false,         //是否顯⽰投影⽅式控制元件
        // navigationHelpButton: false,    //是否顯⽰幫助資訊控制元件
        // homeButton: false,              //是否顯⽰Home按鈕
        // fullscreenButton: false,        //是否顯⽰全螢幕按鈕
        // timeline:false,                 //時間軸控制元件
        // animation:false,                //動畫控制元件
        imageryProvider: geogle,
        // terrainProvider:new Cesium.createWorldTerrain({
        //   requestVertexNormals:true,
        //   requestWaterMask:true
        // }),
      });
    },
  }
};
</script> 
<style scoped>
.map-box {
  width: 100%;
  height: 100%;
}

#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "",
  mounted() { 
    this.show3DTile();
  }
  ,
  methods: {
    show3DTile() {
      var url = 'http://192.168.19.112:9003/model/tEn5ey1J3/tileset.json';
      // eslint-disable-next-line no-unused-vars
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
      });
      window.viewer = viewer;
      // eslint-disable-next-line no-unused-vars
      let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url: url,
        // modelMatrix: Cesium.Matrix4.fromArray([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]),
        baseScreenSpaceError: 1024,
        //【重要】數值加大，能讓最終成像變模糊
        skipScreenSpaceErrorFactor: 16,
        skipLevels: 1,
        immediatelyLoadDesiredLevelOfDetail: false,
        loadSiblings: false,
        cullWithChildrenBounds: true,
        skipLevelOfDetail: true, //開啟跳級載入
        //這個引數預設是false，同等條件下，葉子節點會優先載入。但是Cesium的tile載入優先順序有很多考慮條件，
        //這個只是其中之一，如果skipLevelOfDetail=false，這個引數幾乎無意義。所以要配合skipLevelOfDetail=true來使用，
        //此時設定preferLeaves=true。這樣我們就能最快的看見符合當前視覺精度的塊，對於提升巨量資料以及網路環境不好的前提下有一點點改善意義。
        preferLeaves: true,
        //【重要】記憶體建議視訊記憶體大小的50%左右，記憶體分配變小有利於傾斜攝影資料回收，提升效能體驗
        maximumMemoryUsage: 1024
        //控制切片視角顯示的數量，可調整效能
        // maximumScreenSpaceError: 2,//最大的螢幕空間誤差
        // maximumNumberOfLoadedTiles: 100000, //最大載入瓦片個數
      }));
      window.viewer.flyTo(tileset) 
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
      });
    } 
  }
};
</script> 
<style scoped>
.map-box {
  width: 100%;
  height: 100%;
}

#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>