Vue+cesium二次开发实例

创建Vue3项目

首先使用vue create vue-demo(自定义项目名)创建一个vue3项目

接下来选择自定义配置，这里我们选择Router,其他几个按需选择

选择vue3版本

这里选择否（输入N），其他几项可以跳过，回车即可

配置项目文件

项目创建成功，接下来我们在VS code中打开这个文件夹，并新建一个终端

输入npm install cesium，引入cesium库

输入npm install element-plus,引入element-plus 

接下来，配置vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
// CesiumJS源代码的路径
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    output: {
      sourcePrefix: ''
    },
    resolve: {
      fallback: { "https": false, "zlib": false, "http": false, "url": false },
    },
    plugins: [
      // 复制Cesium的Assets、Widgets和Workers到一个静态目录
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
          { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
          { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
          { from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }
        ]
      }),
      new webpack.DefinePlugin({
        //在Cesium中定义一个相对基本路径来加载资源
        CESIUM_BASE_URL: JSON.stringify('')
      })
    ],
  }
})

接下来清空一下文件夹，文件夹目录如下

 创建一个style文件，在base.css中输入如下内容，并在index.css中引入

html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
}

然后接着在main.js中引入index.css

配置cesium

我们在src目录下新建一个cesium.js，输入以下内容

import { Ion, Viewer } from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

//去cesium官网申请一个token 
Ion.defaultAccessToken = '输入自己的token';

let viewer;

export function initializeCesium(containerId) {
    if (!viewer) {
        viewer = new Viewer(containerId, {
            animation: true,
            baseLayerPicker: true,
            fullscreenButton: true,
            geocoder: true,
            homeButton: true,
            infoBox: true,
            sceneModePicker: true,
            selectionIndicator: true,
            timeline: true,
            navigationHelpButton: false,
        });
        // 去除版权信息
        viewer._cesiumWidget._creditContainer.style.display = 'none';
    }
    return viewer;
}

export function getViewer() {
    return viewer;
}

接着清空一下app.vue中的内容

然后我们在src/components下新建一个MapContainer.vue，输入以下内容

<template>
    <div id="MapContainer" style="height: 100%;"></div>
</template>

<script>
export default {
    name: 'MapContainer',
    mounted() {
        // Cesium 已在 main.js 中初始化，因此这里不需要再初始化
    }
}
</script>

<style scoped>
#MapContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>

然后我们在src/components下新建一个MainLayout.vue，输入以下内容

<template>
    <div id="main-layout">
        <NavMenu />
        <div id="map-and-functionality">
            <MapContainer />
            <router-view></router-view>
        </div>
    </div>
</template>


<script>
import NavMenu from './NavMenu.vue';
import MapContainer from './MapContainer.vue';

export default {
    name: 'MainLayout',
    components: {
        NavMenu,
        MapContainer
    }
}
</script>

<style scoped>
#main-layout {
    display: flex;
    height: 100vh;
}

#map-container {
    flex: 1;
}

#nav-menu {
    width: 250px;
    /* 设定导航栏宽度 */
    background: #f4f4f4;
    /* 背景颜色 */
    padding: 20px;
    overflow-y: auto;
}
</style>

 

接着在src/components下新建一个NavMenu.vue

<template>
    <el-menu default-active="functionlity-a" class="el-menu-vertical-demo" @select="handleSelect" router>
        <el-menu-item class="item" index="/functionlity-a">功能A</el-menu-item>
        
    </el-menu>
</template>

<script>
export default {
    name: 'NavMenu',
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>

<style scoped>
.el-menu-vertical-demo {
    margin: 0;
    padding: 0;
    width: 250px;
    /* height: 100%; */
    background-color: #f4f4f4;
    border-right: 1px solid #e0e0e0;

}

.el-menu-item {
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    background-color: rgb(160, 162, 164);
    /* font-family: "黑体", sans-serif; */
    /* 设置字体为黑体 */
    font-size: 20px;
    /* 设置字体大小为16px */
    color: #ffffff;
}

.item {
    cursor: pointer;
}
</style>

接着在src/components下新建一个FunctionlityA.vue

<template>
    <div>
        <h1>Functionality A</h1>
    </div>
</template>

<script>
import { getViewer } from '../cesium';
import * as Cesium from 'cesium';

export default {
    name: 'FunctionalityA',
    mounted() {
        this.addMarker();
    },
    methods: {
        addMarker() {
            const viewer = getViewer();
            if (viewer) {
                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
                    point: { pixelSize: 10, color: Cesium.Color.RED }
                });
            }
        }
    }
};
</script>

最后我们配置一下router/router.js

import { createRouter, createWebHistory } from 'vue-router';
import MainLayout from '../components/MainLayout.vue';
import FunctionlityA from '../components/FunctionlityA.vue';


const routes = [
    {
        path: '/',
        component: MainLayout,
        children: [
            { path: 'functionlity-a', component: FunctionlityA },
          
        ]
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

 配置main.js

import { createApp } from 'vue';
import App from './App.vue';
import './style/index.css';
import router from './router/router';
import ElementPlus from 'element-plus';

import { initializeCesium } from './cesium';

const app = createApp(App);
app.use(router);
app.use(ElementPlus);

router.isReady().then(() => {
    app.mount('#app');
    initializeCesium('MapContainer');
    
});

项目结构如下

 

启动项目 

然后我们在终端输入npm run serve,启动项目，点击功能A，即可在地图上添加一个点，证明项目创建成功，后续可以在此基础上开发自己需要的功能

补充说明

main.js是 Vue.js 应用的入口文件。它的主要职责是初始化 Vue 应用实例，并挂载应用到指定的 DOM 元素上。通常，它还会导入和配置应用所需的各种插件、路由、状态管理等。

以下是 main.js 文件的几个关键功能：

1. 导入 Vue 框架：

   • 引入 Vue 的核心库，用于创建和管理 Vue 实例。

2. 导入根组件：

   • 引入根组件（通常是 App.vue），它是整个应用的根节点。

3. 创建 Vue 实例：

   • 使用 createApp 方法创建一个 Vue 应用实例。

4. 配置插件：

   • 应用实例可以使用 use 方法配置各种插件，例如路由（Vue Router）、状态管理（Vuex）等。

5. 挂载应用：

   • 将 Vue 应用实例挂载到一个 DOM 元素上，通常是 index.html 中的一个 div 元素（例如 #app）。

App.vue 是 Vue.js 应用的根组件，它作为整个应用的主入口和容器。在每个 Vue 应用中，App.vue 通常扮演以下几个关键角色：

1. 根组件：

   • App.vue 是整个应用的根组件，所有其他组件都会作为它的子组件嵌套在其中。它是整个组件树的起点。

2. 应用结构和布局：

   • 通常，App.vue 会包含应用的主要结构和布局，比如导航栏、侧边栏、页脚等。它提供了一个基础的页面框架，其他组件在此基础上进行渲染。

3. 全局状态和配置：

   • App.vue 也可以用来处理一些全局状态或配置，例如应用的主题、全局事件处理等。

4. 路由视图容器：

   • 在使用 Vue Router 时，App.vue 通常会包含 <router-view> 组件，这是一个占位符，表示根据当前路由动态渲染的组件。这样，可以在 App.vue 中通过导航链接（<router-link>）实现不同页面之间的切换。

 

创建 Cesium(cesium.js) 实例管理模块的目的是为了在应用中共享一个 Cesium 实例，使得所有功能组件都能访问和使用同一个 Cesium 地图实例。这种方式可以避免重复创建 Cesium 实例，并确保所有功能组件能够在同一个地图上下文中进行操作。这样不仅提高了应用性能，还简化了代码结构和维护工作。

style scoped 是 Vue 单文件组件中的一个属性，它的作用是将样式限定在当前组件中，使其不会影响到其他组件的样式。

作用和好处

1. 局部样式隔离：

   • 当你在组件中使用 scoped 属性时，Vue 会自动给该组件的所有样式添加一个唯一的属性选择器（如 data-v-xxxx），确保这些样式只会应用到当前组件的元素上，不会影响到其他组件的样式。

2. 避免样式冲突：

   • 在大型项目中，不同组件可能会有相同的类名或元素选择器。使用 scoped 属性可以避免全局样式冲突，确保每个组件的样式独立。