vue-admin-element 登录菜单配置学习-搭建cesium开发环境

1、登录在src/views/login/index.vue ，登录只是账号密码，登录后获取用户信息其中包含用户角色，路由配置在src/router/index.js，路由中配置了每个路由对应的角色。可以通过修改配置的title修改菜单名称。

{
    path: '/pdf',
    component: Layout,
    redirect: '/pdf/index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/pdf/index'),
        name: 'PDF',
        meta: { title: 'PDF', icon: 'pdf', roles: ['admin'] }
      }
    ]
  }

路由配置里有公共的路由constantRoutes和异步路由asyncRoutes，公共路由constantRoutes所有用户都加载，异步路由是根据在 meta里设置roles来实现动态的加载。

2、权限的判断 是在 src/store/modules/permission.js文件里，有个actions。判断如果角色里包含admin（一个用户可多个角色，所以返回的角色是个数组），就显示全部的

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

3、基于上面的理解，在vue-admin-element中增加三维地图菜单：

在public文件夹下面新建static文件夹，导入Cesium官方api.如图：

文件加入public中是因为官方api是打包过的，放到静态资源下面，就不在参与本项目的打包。

在public全局index.html中引入Cesium引用。

在路由配置router/index.js中配置菜单名称，该菜单默认全局显示，所以配置在export const constantRoutes 中。

path:配置路径；

name:自定义名称；

component：配置组件，配置view中的页面。

meta：title：菜单名称；icon：菜单样式；noCache：是否缓存。

配置完成后在viewer中增加cesium页面：

index.vue中加载地图，并加入arcgis在线地图服务：

<template>
  <div class="hello">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  mounted() {
/* eslint-disable */
var viewer = new Cesium.Viewer("cesiumContainer",{
animation: false, //是否创建动画小器件，左下角仪表
selectionIndicator: false,
fullscreenButton: false,
infoBox: false,
navigationHelpButton: false, //是否显示右上角的帮助按钮
timeline: false,
baseLayerPicker: false
});
viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
    url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}))

    /* eslint-enable */
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: sans-serif;
}

</style>

其中eslint代码检查设置还需要再学习。