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代碼檢查設置還需要再學習。