【Cesium】vue项目加载3DTileset（.b3dm 格式）

安装vue-cli-plugin-cesium
专门为脚手架vue-cli3.0和2.0打造的针对Cesium的VueCli扩展插件，自动化包括：

        1.自动扩展 VueCLI 中 Cesium 相关的 webpack 配置

       2. 添加一个 cesium 别名，以便我们在项目中轻松的引入 Cesium 文件资源
        使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入
        使 webpack 可正常打包 Cesium
        允许 webpack 友好地在 Cesium 中使用 require，解决 require 引入警告
        开发环境生成 sourcemap，生产环境取消 sourcemap
        生产环境抽取公共模块执行压缩
        生产环境 loader 切换到优化模式

        3.自动在全局 main.js 中引入Widgets.css，可选

        4.自动在 components/ 文件夹下生成示例文件，可选
 

首先安装 vue-cli-plugin-cesium 插件，推荐使用 yarn 安装，因为它更简洁
// npm
npm install --save-dev vue-cli-plugin-cesium
// yarn
yarn add vue-cli-plugin-cesium

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script >
var Cesium =require("cesium/Cesium")
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
	Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)  //默认视角定位中国上空
    var viewer = new Cesium.Viewer("cesiumContainer",{
		animation: false, //是否显示动画控件
		shouldAnimate: true,
		homeButton: false, //是否显示Home按钮
		fullscreenButton: false, //是否显示全屏按钮
		baseLayerPicker: true, //是否显示图层选择控件
		geocoder: true, //是否显示地名查找控件
		timeline: false, //是否显示时间线控件
		sceneModePicker: true, //是否显示投影方式控件
		navigationHelpButton: true, //是否显示帮助信息控件
		infoBox: true, //是否显示点击要素之后显示的信息
		requestRenderMode: true, //启用请求渲染模式
		// scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
		sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
		fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处	
		 // 地形 
      	terrainProvider:new Cesium.createWorldTerrain({
			requestVertexNormals:true,
			requestWaterMask:true
		}) 
	 })
	 viewer.scene.globe.enableLighting = true;
	 viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权样式
//调用天地图瓦片
	 viewer.imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
          url:
            "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的token",
          layer: "tdtBasicLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: false,
          mininumLevel: 0,
          maximumLevel: 16
        })   
//调用影响中文注记服务
	viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ 
        url: 'http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=9378d15741c526a104927f17e9438ab6', 
        layer: "tdtImg_c",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "c",
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tilingScheme: new Cesium.GeographicTilingScheme(),
        tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
        maximumLevel: 50,
        show: false
    }))
//加载3DTiles 
	function tilesetload(){
		console.log("11111111111111111111111111");
		var tileset =  new Cesium.Cesium3DTileset({       
			url: 'http://localhost:8085/tileset.json',
//我这里使用的本地iis代理的数据  后期会出iis如何代理瓦片数据的
			// url: 'http://localhost:8086/tileset.json',
          //控制切片视角显示的数量，可调整性能
            // maximumScreenSpaceError: 2,
            //     maximumNumberOfLoadedTiles: 100000,
			show:true,
			skipLevelOfDetail : true,
	     	baseScreenSpaceError : 1024,
      		skipScreenSpaceErrorFactor : 16,
	      	skipLevels : 1,
	     	immediatelyLoadDesiredLevelOfDetail : false,
	     	loadSiblings : false,
      		cullWithChildrenBounds : true
      })
 	    viewer.scene.primitives.add(tileset);
//定位到模型的位置
	    (async () => {
            try {
              await tileset.readyPromise;
              await viewer.zoomTo(tileset);
		    // Apply the default style if it exists
		    var extras = tileset.asset.extras;
			    if (
			    Cesium.defined(extras) &&
			    Cesium.defined(extras.ion) &&
			    Cesium.defined(extras.ion.defaultStyle)
			    ) {
			    tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
			    }
		    } catch (error) {
			    console.log(error);
		    }
	    })(); 
	}
 	tilesetload()
  }, 
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
::deep .cesium-viewer-bottom {
	display: none;
}
</style>

 这是设置模型的高程

tileset.readyPromise.then(function(tileset) {
            viewer.scene.primitives.add(tileset);
            var heightOffset = 11.0;  //高度
            var boundingSphere = tileset.boundingSphere; 
            var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
            var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
            var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
            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));
        });

 亲测有效！！！

研究了好久 头发都掉了不少 总在一下 希望可以帮助到需要帮助的家人们！ 有更好的想法 疑问 可以在线交流一番