安裝vue-cli-plugin-cesium
專門為腳手架vue-cli3.0和2.0打造的針對Cesium的VueCli擴展插件，自動化包括：
? ? ? ? 1.自動擴展 VueCLI 中 Cesium 相關(guān)的 webpack 配置
? ? ? ?2. 添加一個 cesium 別名，以便我們在項目中輕松的引入 Cesium 文件資源
????????使 Cesium 對象實例可在每個 Vue 模塊中使用而無須 import 引入
????????使 webpack 可正常打包 Cesium
????????允許 webpack 友好地在 Cesium 中使用 require，解決 require 引入警告
????????開發(fā)環(huán)境生成 sourcemap，生產(chǎn)環(huán)境取消 sourcemap
????????生產(chǎn)環(huán)境抽取公共模塊執(zhí)行壓縮
????????生產(chǎn)環(huán)境 loader 切換到優(yōu)化模式
? ? ? ? 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) //默認(rèn)視角定位中國上空
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渲染以節(jié)省GPU內(nèi)存
sceneMode: 3, //初始場景模式 1 2D模式 2 2D循環(huán)模式 3 3D模式 Cesium.SceneMode
fullscreenElement: document.body, //全屏?xí)r渲染的HTML元素 暫時沒發(fā)現(xiàn)用處
// 地形
terrainProvider:new Cesium.createWorldTerrain({
requestVertexNormals:true,
requestWaterMask:true
})
})
viewer.scene.globe.enableLighting = true;
viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版權(quán)樣式
//調(diào)用天地圖瓦片
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
})
//調(diào)用影響中文注記服務(wù)
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代理的數(shù)據(jù) 后期會出iis如何代理瓦片數(shù)據(jù)的
// url: 'http://localhost:8086/tileset.json',
//控制切片視角顯示的數(shù)量，可調(diào)整性能
// 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>
?這是設(shè)置模型的高程
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));
});?
?親測有效！?。?mark hidden color="red">文章來源：http://www.zghlxwxcb.cn/news/detail-440050.html
研究了好久 頭發(fā)都掉了不少 總在一下 希望可以幫助到需要幫助的家人們！ 有更好的想法 疑問 可以在線交流一番文章來源地址http://www.zghlxwxcb.cn/news/detail-440050.html
到了這里，關(guān)于【Cesium】vue項目加載3DTileset（.b3dm 格式）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
