vuecesium官网（【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)); });

 亲测有效！！！

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