import gltfFile from "../assets/glb/Cesium_Air.glb"
import { Viewer,Transforms,Cartesian3,Model } from "cesium";
export default {
data() {
return {
gltfUrl: gltfFile
}
},
computed: {},
components: {},
methods: {
initMap() {
let viewer = new Viewer("cesiumContainer")
var scene = viewer.scene
var modelMatrix = Transforms.eastNorthUpToFixedFrame(
Cartesian3.fromDegrees(110.62898254394531, 40.02804946899414, 6.0)); //gltf数据加载位置
var model = scene.primitives.add(Model.fromGltf({
url: this.gltfUrl, //gltf文件的URL
modelMatrix: modelMatrix,
scale: 300.0 //放大倍数
}))
viewer.camera.flyTo({
destination: Cartesian3.fromDegrees(110.62898254394531, 40.02804946899414, 6000.0) //相机飞入点
})
},
},
mounted() {
// 初始化底图
this.initMap()
}
};
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
注意
加载本地模型文件要配置webpack文件
我加载的是glb文件
module: {
rules: [
{
test:/\.(glb)$/, //
loader: 'url-loader',
options: {
limit: 10000,
}
},
{
test: /.js$/,
include: [resolve('node_modules/cesium/Source')],
use: {
loader: require.resolve('@open-wc/webpack-import-meta-loader')
}
}
// {
// // match all .gltf files
// test: /\.(gltf)$/,
// loader: 'url-loader'
// },
],
// Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
// https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6
unknownContextCritical: false
// unknownContextRegExp: /^.\/.*$/
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)