使用开源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

Please choose a version of 'cesium' from this list
请在列表中选择 cesium 的版本

Whether to import styles globally. 
This operation will automatically import widgets.css in main.js
是否全局引入样式,该操作将自动在main.js引入widgets.css？

import "cesium/Widgets/widgets.css"

Whether to add sample components to the project components directory
是否添加示例组件到项目components目录?

<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>