首页 > 其他分享 >Vue+cesium二次开发实例

Vue+cesium二次开发实例

时间:2024-07-29 18:25:05浏览次数:17  
标签:Cesium 组件 vue cesium Vue 算子 二次开发 import

创建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 文件的几个关键功能:

  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

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

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

  1. 局部样式隔离

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

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

算子 

在地理信息系统(GIS)和图像处理领域,“算子”通常指的是一种操作或处理方法,用于对数据进行特定的变换或计算。具体来说,在 GIS 中,算子(操作符)可以是各种空间分析工具,例如缓冲区分析、叠加分析、邻域分析等。在图像处理领域,算子可以是用于图像增强、边缘检测、滤波等操作的算法,例如 Sobel 算子、Laplacian 算子等。

根据你之前提到的项目需求和 API 返回的算子描述信息,你可能需要处理的是某种地理数据分析或处理算子,这些算子可以应用于你的 Cesium 地图中来执行特定的空间分析或数据处理任务。

以下是一些常见的 GIS 算子类型及其用途:

  1. 缓冲区分析算子(Buffer Operator)

    • 用于创建一个距离给定点、线或多边形一定范围的区域。
  2. 叠加分析算子(Overlay Operator)

    • 用于将两个或多个图层叠加在一起,以分析它们的空间关系,例如相交、合并、差异等。
  3. 空间查询算子(Spatial Query Operator)

    • 用于在指定范围内查找符合条件的地理要素。
  4. 网络分析算子(Network Analysis Operator)

    • 用于分析网络数据,如最短路径分析、服务区分析等。
  5. 栅格分析算子(Raster Analysis Operator)

    • 用于对栅格数据进行分析,例如地形分析、土地覆盖分类等。

在你的应用中,根据从 API 获取的算子描述信息,动态生成用户界面以处理这些算子所需的输入,然后将用户输入的数据传递给 Cesium 进行相应的地理处理或可视化是一个合理的实现方式。

标签:Cesium,组件,vue,cesium,Vue,算子,二次开发,import
From: https://blog.csdn.net/m0_58786911/article/details/140689387

相关文章

  • js vue3 vue2鼠标单击事件复制指定内容到粘贴板
    借助原生JavaScript的 navigator.clipboard.writeText() 方法来时(要求页面是在用户交互的上下文中,比如点击事件处理程序中调用)如:点击列表的复制按钮,得到指定列(data)的值到粘贴板<template><div><button@click="click">复制文本</button></div></templ......
  • 微信小程序,web,uniapp-vue前端图片压缩思路-------uniapp-nvue如何压缩
    uniapp官方提供的压缩接口,只支持jpg的压缩,所以,直接放弃在非nvue的页面中,统一使用canvas获取图片信息,并重新绘制。存在一个问题,canvas必须指定宽高,不能动态给定,所以可能存在一些问题。nvue页面,又无法使用canvas,或者说,性能不是很好。一个隐藏的canvas只做图片处理使用,应该不会影......
  • springboot+vue基于web点餐小程序的个性化推荐演示录像【程序+论文+开题】-计算机毕业
    系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,餐饮业正经历着前所未有的变革。传统餐饮模式逐渐向智能化、数字化转型,其中,基于Web的点餐小程序凭借其便捷性、高效性和广泛的用户覆盖,成为了餐饮行业的重要服务形式。然而,在海量美食信息与多样化消费者需求......
  • springboot+vue基于web的中草药信息管理系统【程序+论文+开题】-计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着中医药在全球范围内的日益普及与认可,中草药作为中医药体系的核心组成部分,其信息的系统化、标准化管理显得尤为重要。然而,当前市场上缺乏一个全面、便捷且基于Web的中草药信息管理系统,导致中草药信息零散、不易获取,既不利于中医药......
  • vue-simple-uploader 支持分片上传,多文件上传,断点续传等多种功能的文件上传组件
    vue-simple-uploader特性:1、支持文件、多文件、文件夹上传2、支持拖拽文件、文件夹上传3、统一对待文件和文件夹,方便操作管理4、可暂停、继续上传5、错误处理6、支持“快传”,通过文件判断服务端是否已存在从而实现“快传”7、上传队列管理,支持最大并发上传8、分块上传9、......
  • vue中sessionStorage的使用
    localStorage和sessionStorage属性允许在浏览器中存储key/value对的数据。sessionStorage用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。提示:如果你想在浏览器窗口关闭后还保留数据,可以使用localStorage属性,改数据对象没有过期时间,......
  • vue el-form中label使用类似小程序text标签 space的功能
    在Vue中,没有直接类似于微信小程序中<text>标签的space属性,该属性用于控制文本节点之间的空格处理方式。然而,Vue和Web开发中,文本节点之间的空格处理通常是通过HTML和CSS来控制的,而不是像小程序那样通过组件属性来控制。在HTML中,连续的空格字符通常会被浏览器合并为一个空格......
  • 计算机毕业设计django+vue保险业务信息管理系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着保险行业的蓬勃发展,保险业务量的激增对保险公司的信息管理提出了更高的要求。传统的业务管理方式往往依赖于人工操作和纸质文档,不仅效......
  • 计算机毕业设计django+vueHPV疫苗预约系统【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着社会对健康重视程度的日益提升,疫苗接种成为了预防疾病、保障公众健康的重要措施。其中,HPV(人乳头瘤病毒)疫苗作为预防宫颈癌等严重疾病......
  • Cesium加载带有背景图(包含多个背景图,图标和文字并排)的billboard
    思路:如果是简单的背景加文字,背景图会把文字挡住,又或者是背景图要有图标加文字,这时需要用canvas将背景图,图标和文字合并成一张图片,加载billboard的时候直接加载合成之后的图片即可。letcanvas=document.createElement("canvas");canvas.width=100;canvas.height=30;let......