vue中使用Cesium引用外部做好的模型。(glb/gltf格式)文件可以放在线上或者public文件夹里 | 您所在的位置:网站首页 › vup如何添加模型 › 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'引入文件 以下是样例: {{item.title}} 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; }, }, }; 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; }
|
CopyRight 2018-2019 实验室设备网 版权所有 |