Cesium+Vue3学习系列（3）--- UI框架搭建

 本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，相关源码全部免费公开。 请关注微信公众号 “webgis学习”或扫描下方二维码，关注后，在公众号里输入“Cesium学习系列源码”，即可看到全部代码。

本篇介绍如何当前系统UI框架搭建过程。

1、前端框架采用ElementPlus，因此需要提前安装好 ElementPlus。安装过程及配置请自行百度；

2、UI界面结构。分为搜索功能区、菜单区、菜单对应的功能区以及鼠标位置显示区。详情见下图。

3、具体实现

3.1 菜单区域，定义菜单数据结构，componentCode为每个菜单叶子节点对应的功能组件编码。

/**菜单树 */
export interface IMenuTree {
  id: string | number
  label: string
  children?: IMenuTree[]
  componentCode?: MenuEnum
}

设置具体显示的菜单数据

import { IMenuTree } from "../Common/interfaces"
import { MenuEnum } from "../Common/enums"
const menuTreeData: IMenuTree[] = [
    {
        id: 1,
        label: '图层管理',
        children: [
            {
                id: '1-1',
                label: '底图',
                componentCode: MenuEnum.EarthDataLayers,
                children: []              
            },
            {
                id: '1-2',
                label: '自定义数据',
                componentCode: MenuEnum.CustomDataLayer,
                children: []              
            },
            
        ],         
    },
    {
        id: 1,
        label: '特效',
        children: [
            {
                id: '1-1',
                label: '特效1',
                componentCode: MenuEnum.EarthDataLayers,
                children: []              
            },
            
        ],
    }    
]
export default menuTreeData

菜单前端页面代码

<template>
  <el-input v-model="filterText" style="width: 240px" placeholder="请输入功能名称" />
  <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" default-expand-all :data="menuTreeData"
    :filter-node-method="filterNode" @node-click="HandNodeClick">
  </el-tree>
</template>
<script lang="ts" setup>
import menuTreeData from '@/system/Config/MenuTreeConfig'
import { ElTree } from 'element-plus'
const emits = defineEmits(['targetComponentCode'])
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.label.includes(value)
}
const HandNodeClick = (_clickNode: any, node: any) => {
  //只显示叶子节点的功能
  if (node.isLeaf) {
    emits("targetComponentCode", node.data.componentCode)
  }
}
</script>
<style lang="scss" scoped>
.el-tree {
  background: #333541ab;
  color: #e9edf5;
  padding: 10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  --el-tree-node-hover-bg-color: #868c96;
  :deep(.el-text){
    color:white;
  }
 
}
.el-input {
  --el-input-bg-color: #594545;
  color: white;
}
</style>

3.2 当用户点击菜单树的叶子节点是触发targetComponentCode，将对应的功能组件传给父级组件，父级组件响应HandleClickMenuNode函数将对应组件填入即可。

 <MenuTree @targetComponentCode="HandleClickMenuNode"></MenuTree>

<component :is="currentComponent"></component>
 let currentComponent = ref<Component | null>(null);
 const HandleClickMenuNode = (componentCode: number) => {
    currentComponent.value = menuComponentMap[componentCode as MenuEnum];
}

3.3 搜索功能区通过Elementplus提供的方法实现。

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

3.4 鼠标位置显示区

鼠标位置显示区是纯前端css方式实现，实时获取鼠标的经纬度及高度信息的实现方式后续会单独介绍。