vue+cesium初探（三）之加载3D模型

1、views下新建Models.vue文件

2、在路由配置文件以及App.vue中增添相关配置

路由

  {
    path: '/models',
    name: 'Models',
    component: () => import('../views/Models.vue')
  }

App.vue

        {
          title : '模型',
          path : '/models'
        }

3、搭建express node服务器

因为模型文件放到前端项目中加载不了（具体什么原因暂时不明），故而需要搭建后端服务以供访问模型文件

3.1、新建express项目

自行百度

3.2、将模型文件放到项目的public文件夹下

模型文件

3.3、修改app.js允许跨域

//解决跨域
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');//允许的header类型
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); //跨域允许的请求方式 
  if (req.method == 'OPTIONS') {
    res.send(200);//让options尝试请求快速结束
  } else {
    next();
  }
});

3.4、运行node项目

npm start

3.5、运行vue项目查看效果

 

项目地址

vue

node