创建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
main.js是 Vue.js 应用的入口文件。它的主要职责是初始化 Vue 应用实例,并挂载应用到指定的 DOM 元素上。通常,它还会导入和配置应用所需的各种插件、路由、状态管理等。
以下是 main.js
文件的几个关键功能:
-
导入 Vue 框架:
- 引入 Vue 的核心库,用于创建和管理 Vue 实例。
-
导入根组件:
- 引入根组件(通常是
App.vue
),它是整个应用的根节点。
- 引入根组件(通常是
-
创建 Vue 实例:
- 使用
createApp
方法创建一个 Vue 应用实例。
- 使用
-
配置插件:
- 应用实例可以使用
use
方法配置各种插件,例如路由(Vue Router)、状态管理(Vuex)等。
- 应用实例可以使用
-
挂载应用:
- 将 Vue 应用实例挂载到一个 DOM 元素上,通常是
index.html
中的一个div
元素(例如#app
)。
- 将 Vue 应用实例挂载到一个 DOM 元素上,通常是
App.vue
App.vue
是 Vue.js 应用的根组件,它作为整个应用的主入口和容器。在每个 Vue 应用中,App.vue
通常扮演以下几个关键角色:
-
根组件:
App.vue
是整个应用的根组件,所有其他组件都会作为它的子组件嵌套在其中。它是整个组件树的起点。
-
应用结构和布局:
- 通常,
App.vue
会包含应用的主要结构和布局,比如导航栏、侧边栏、页脚等。它提供了一个基础的页面框架,其他组件在此基础上进行渲染。
- 通常,
-
全局状态和配置:
App.vue
也可以用来处理一些全局状态或配置,例如应用的主题、全局事件处理等。
-
路由视图容器:
- 在使用 Vue Router 时,
App.vue
通常会包含<router-view>
组件,这是一个占位符,表示根据当前路由动态渲染的组件。这样,可以在App.vue
中通过导航链接(<router-link>
)实现不同页面之间的切换。
- 在使用 Vue Router 时,
Cesium(cesium.js) 实例管理模块
创建 Cesium(cesium.js) 实例管理模块的目的是为了在应用中共享一个 Cesium 实例,使得所有功能组件都能访问和使用同一个 Cesium 地图实例。这种方式可以避免重复创建 Cesium 实例,并确保所有功能组件能够在同一个地图上下文中进行操作。这样不仅提高了应用性能,还简化了代码结构和维护工作。
style scoped
是 Vue 单文件组件中的一个属性,它的作用是将样式限定在当前组件中,使其不会影响到其他组件的样式。
-
局部样式隔离:
- 当你在组件中使用
scoped
属性时,Vue 会自动给该组件的所有样式添加一个唯一的属性选择器(如data-v-xxxx
),确保这些样式只会应用到当前组件的元素上,不会影响到其他组件的样式。
- 当你在组件中使用
-
避免样式冲突:
- 在大型项目中,不同组件可能会有相同的类名或元素选择器。使用
scoped
属性可以避免全局样式冲突,确保每个组件的样式独立。
- 在大型项目中,不同组件可能会有相同的类名或元素选择器。使用
算子
在地理信息系统(GIS)和图像处理领域,“算子”通常指的是一种操作或处理方法,用于对数据进行特定的变换或计算。具体来说,在 GIS 中,算子(操作符)可以是各种空间分析工具,例如缓冲区分析、叠加分析、邻域分析等。在图像处理领域,算子可以是用于图像增强、边缘检测、滤波等操作的算法,例如 Sobel 算子、Laplacian 算子等。
根据你之前提到的项目需求和 API 返回的算子描述信息,你可能需要处理的是某种地理数据分析或处理算子,这些算子可以应用于你的 Cesium 地图中来执行特定的空间分析或数据处理任务。
以下是一些常见的 GIS 算子类型及其用途:
-
缓冲区分析算子(Buffer Operator):
- 用于创建一个距离给定点、线或多边形一定范围的区域。
-
叠加分析算子(Overlay Operator):
- 用于将两个或多个图层叠加在一起,以分析它们的空间关系,例如相交、合并、差异等。
-
空间查询算子(Spatial Query Operator):
- 用于在指定范围内查找符合条件的地理要素。
-
网络分析算子(Network Analysis Operator):
- 用于分析网络数据,如最短路径分析、服务区分析等。
-
栅格分析算子(Raster Analysis Operator):
- 用于对栅格数据进行分析,例如地形分析、土地覆盖分类等。
在你的应用中,根据从 API 获取的算子描述信息,动态生成用户界面以处理这些算子所需的输入,然后将用户输入的数据传递给 Cesium 进行相应的地理处理或可视化是一个合理的实现方式。
标签:Cesium,组件,vue,cesium,Vue,算子,二次开发,import From: https://blog.csdn.net/m0_58786911/article/details/140689387