当前位置: 首页 > Web前端 > vue.js

在Nuxtjs中集成Cesium

时间:2023-03-31 21:03:41 vue.js

下载nuxtjs脚手架npxcreate-nuxt-app<项目名>下载Cesium依赖包(1.66版本)npmintallcesium集成Cesium1。将需要的Cesium文件复制到项目文件夹下的项目的static文件夹中找到/node_modules/cesium/Build/Cesium文件夹,复制粘贴到项目根目录的static文件夹中,删除其中的Cesium.js文件铯。2.将Cesium的css样式文件cesium/Build/Cesium/Widgets/widgets.css导入到Cesium视图所在的.vue文件中。全局导入nuxt.config.js3.导入CesiumconstCesium=require('cesium')ES6方式引入import*asCesiumfrom'cesium'import{Viewer}from'cesium'ondemand4.初始化//index.vuethis.viewer=newCesium.Viewer('cesiumContainer')配置导入文件类型编译我将glb,glbf,3Dtitles等格式放在assets文件夹下供Cesium引用,但是引用的时候会报错,因为默认nuxt的加载程序未配置为编译这些文件格式。因为nuxtjs封装了webpack配置,所以我们应该在nuxt.config.js中找到并添加需要的文件格式。//nuxt.config.jsbuild:{...,extend(config,ctx){//添加可编译的glb和glbf文件类型constassetsLoader=config.module.rules.find(rule=>rule.test.test('.png'));assetsLoader.test=/\.(png|jpe?g|gif|svg|webp|pdf|glb|gltf|json|geojson|topojson)$/i;返回配置;}}