vue中使用Cesium引用外部做好的模型。（glb/gltf格式）文件可以放在线上或者public文件夹里

1、npm i cesium -D

 

2、main.js中引用

import * as Cesium from "cesium/Cesium";

import widget from "cesium/Widgets/widgets.css";

// 定义为全局变量，以便调用

Vue.prototype.cesium = Cesium;

Vue.prototype.widgets = widget;

3、将自己制作好的glb/gltf格式的文件放在public->static文件夹中

 4、vuecli3中在vue.config.js文件的rules中加文件引入类型（不加会报错）

rules: [

                {

                        test: /\.(glb)$/,

                        loader: 'url-loader'

                }

],

 5、使用import方式import modelFile from '../../public/static/CesiumBalloon.glb'引入文件

 以下是样例：

<template>

<div id="container" class="box">

<div id="cesiumContainer">

<div class="modelMenu">

<div v-for="(item,index) in modelList" :key='index' class="modelItem" @click="changeModels(item.url)">

{{item.title}}

</div>

</div>

</div>

</div>

</template>

<script>

import modelFile from '../../public/static/CesiumBalloon.glb'

export default {

data() {

return {

url: modelFile,

modelList : [

{

title : 'CesiumAir',

url : modelFile

},

{

title : 'CesiumBalloon',

url : modelFile

},

{

title : 'CesiumMan',

url : modelFile

},

{

title : 'CesiumMilkTruck',

url :modelFile

},

{

title : 'GroundVehicle',

url : modelFile

},

{

title : 'Pawns',

url : modelFile

},

{

title : 'ShadowTester',

url : modelFile

},

{

title : 'WoodTower',

url : modelFile

},

],

Cesium : '',

viewer : ''

};

},

mounted() {

this.Cesium = this.cesium;

this.viewer = new this.Cesium.Viewer("cesiumContainer", {

baseLayerPicker: true, // 影像切换

animation: false, //是否显示动画控件

timeline: false, //是否显示时间线控件

infoBox: false, //是否显示点击要素之后显示的信息

geocoder: false, //是否显示地名查找控件

navigationHelpButton: false, //是否显示帮助信息控件

// terrainProvider: new Cesium.CesiumTerrainProvider({ // 加载地形信息,注释掉不加载天地图矢量图就可以显示天地图的地市信息

// url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',

// requestVertexNormals: true

// }),

});

this.init();

},

methods: {

changeModels(url){

this.url = url

this.init()

},

init() {

let Cesium = this.Cesium;

var viewer = this.viewer

//地图源换成高德

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({

url : 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'

}))

this.createModel(this.url, 5000.0, viewer, Cesium);

viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权

},

createModel(url, height, viewer, Cesium) {

viewer.entities.removeAll();

var position = Cesium.Cartesian3.fromDegrees(120.15, 30.28, height);

var heading = Cesium.Math.toRadians(135);

var pitch = 0;

var roll = 0;

var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

var orientation = Cesium.Transforms.headingPitchRollQuaternion(

position,

hpr

);

var entity = viewer.entities.add({

name: url,

position: position,

orientation: orientation,

model: {

uri: url,

minimumPixelSize: 128,

maximumScale: 20000,

},

});

viewer.trackedEntity = entity;

},

},

};

</script>

<style lang='less' scoped>

html,

body,

#cesiumContainer {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

position: relative;

}

.modelMenu{

position: absolute;

left: 20px;

top: 20px;

width: 100px;

text-align: center;

height: 500px;

z-index: 99;

color: aqua;

font-weight: bold;

font-size: 18px;

line-height: 40px;

text-align: center;

}

.modelItem{

cursor: pointer;

}

</style>