当前位置：首页 > news >正文

electron与cesium组件入门应用功能

news 2025/8/12 6:43:04

运行应用效果图：
在这里插入图片描述

electron应用目录，需要包括三个文件:
index.html
main.js
package.json

(一)、创建一个新项目
目录名称：project_helloWolrd

(二)、生成package.json文件

npm init --yes

(三）、运行该项目方法一
在终端cmd输入如下命令：

electron .

(四)、运行该项目方法二
#==========================================
#start cli cammand
全局安装

cnpm install -g electron @electron-forge/cli

#build cli electron-builder
打exe安装包我们使用electron-builder工具包，安装命令如下。
全局安装

cnpm install -g electron-builder

开始/打包生成exe文件

npm run start
npm run build

#==========================================
注意，json文件不能带注释，复制上面的文本后记得注释去掉。
修改package.json，添加一条scripts命令和build配置。

 "scripts": {"start": "electron-forge start","build": "electron-builder --win" // 打包命令},"devDependencies": {"@electron-forge/cli": "^6.2.1","electron": "^25.4.0","electron-builder": "^24.6.3"},"dependencies": {"cesium": "^1.112.0","@electron-forge/cli": "^6.2.1"},// `electron-builder`配置"build": {"productName": "我的应用", // 安装应用后桌面名称"directories": {"output": "out" // 输出的文件目录},"win": {"icon": "./ico/logo.ico", // 安装的图标"target": [{"target": "nsis","arch": ["x64","ia32"]}]},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./ico/logo.ico","uninstallerIcon": "./ico/logo.ico","installerHeaderIcon": "./ico/logo.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "我的应用"}}

#==========================================
#如果报错，可以采用node_modules目录删除，重新下载依赖包

cnpm install

#cesium安装cmd命令： //OK

cnpm install cesium --save

（五)、源代码
main.js主程序文件内容：

const { app,BrowserWindow}=require("electron");
const path=require("path");const createWindow=()=>{const mainWindow=new BrowserWindow({width:600,height:400,});mainWindow.loadFile(path.join(__dirname,'indexCesium.html'));    //index.html  indexCesium.html////mainWindow.loadURL("https://gitee.com");//mainWindow.loadURL("https://blog.csdn.net/hsg77");
}//监听应用启动事件
app.on("ready",createWindow);

indexCesium.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>My Cesium App</title><script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script><style>@import url(./node_modules/cesium/Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><div id="cesiumContainer"></div><script>var viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: new Cesium.TileMapServiceImageryProvider({url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),})});</script>
</body></html>

index.html

<html><head><meta charset="UTF-8"><title>electron Helloworld</title><link ref="stylesheet" href="css/base.css"/></head><body><h1>这是一个electron项目</h1><h2>这是一个electron项目</h2><h3>这是一个electron项目</h3><h4>这是一个electron项目</h4><h5>这是一个electron项目</h5></body>
</html>

css/base.css

h1 {color:blue;}h2 {color:red;}

package.json文件内容：

{"name": "project_helloworld","version": "1.0.0","description": "生成package.json文件：\r npm init --yes","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "electron-forge start","start": "electron-forge start","build": "electron-builder --win"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@electron-forge/cli": "^6.2.1","electron": "^25.4.0","electron-builder": "^24.6.3"},"dependencies": {"cesium": "^1.112.0","@electron-forge/cli": "^6.2.1"},"build": {"productName": "我的应用","directories": {"output": "out"},"win": {"icon": "./ico/logo.ico","target": [{"target": "nsis","arch": ["x64","ia32"]}]},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./ico/logo.ico","uninstallerIcon": "./ico/logo.ico","installerHeaderIcon": "./ico/logo.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "我的应用"}}
}

本blog地址：https://blog.csdn.net/hsg77

electron与cesium组件入门应用功能

electron与cesium组件入门应用功能运行应用效果图： electron应用目录，需要包括三个文件: index.html main.js package.json (一)、创建一个新项目目录名称：project_helloWolrd (二)、生成package.json文件 npm init --yes(三&#x…...

编程日记 2023/12/20 7:31:49

Jenkins Docker Cloud在Linux应用开发CI中的实践

Jenkins Docker Cloud在Linux应用开发CI中的实践背景通过代码提交自动触发CI自动构建、编译、打包是任何软件开发组织必不可少的基建，可以最大程度保证产物的一致性，方便跨组跨部门协作，代码MR等。 Docker在流水线中越来越重要&#xff…...

编程日记 2023/12/20 7:30:48

502 Bad Gateway with nginx + apache + subversion + ssl

svn commit的时候返回 unexpected http status 502 bad gateway on解决方法，参考：https://stackoverflow.com/questions/2479346/502-bad-gateway-with-nginx-apache-subversion-ssl-svn-copy 在nginx中代理svn中添加 location /svn {set $fixed_dest…...

编程日记 2023/12/20 7:24:43

【PostgreSQL内核学习（十八）—— 存储管理（存储管理的体系结构）】

存储管理概述存储管理器的体系结构存储管理器的主要任务读写元组过程声明：本文的部分内容参考了他人的文章。在编写过程中，我们尊重他人的知识产权和学术成果，力求遵循合理使用原则，并在适用的情况下注明引用来源。本文主要参考…...

编程日记 2023/12/20 7:22:41

Android的组件、布局学习

介绍公司组织架构调整，项目组需要承接其他项目组的android项目，负责维护和开发新需求，故学习下基础语法和项目开发。组件学习 Toolbarheader布局部分就是app最顶部的部分他的显示与否，是与F:\androidProject\android_lear…...

编程日记 2023/12/20 7:21:40

【离散数学】——期末刷题题库（树其一）

🎃个人专栏： 🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础：Java基础_IT闫的博客-CSDN博客 🐋c语言：c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…...

编程日记 2023/12/20 7:20:39

光模块市场分析与发展趋势预测

光模块是光通信领域的重要组成部分，随着数字经济，大数据，云计算，人工智能等行业的兴起，光模块市场经历了快速发展，逐渐在数据中心、无线回传、电信传输等应用场景中得到广泛应用。本文将基于当前光模块全球…...

编程日记 2023/12/20 7:19:38

Python轴承故障诊断 (八)基于EMD-CNN-GRU并行模型的故障分类

目录前言 1 经验模态分解EMD的Python示例 2 轴承故障数据的预处理 2.1 导入数据 2.2 制作数据集和对应标签 2.3 故障数据的EMD分解可视化 2.4 故障数据的EMD分解预处理 3 基于EMD-CNN-GRU并行模型的轴承故障诊断分类 3.1 训练数据、测试数据分组，数据分ba…...

编程日记 2023/12/20 7:17:36

鸿蒙实现年月日十分选择框，支持年月日、月日、日、年月日时分、时分切换

import DateTimeUtils from ./DateTimeUtils;CustomDialog export default struct RQPickerDialog {controller: CustomDialogControllertitle: string 这是标题TAG: string RQPickerDialog// 0 - 日期类型（年月日） 1 - 时间类型（时分&a…...

编程日记 2023/12/20 7:12:32

IntelliJ IDE 插件开发 | （三）消息通知与事件监听

系列文章 IntelliJ IDE 插件开发 |（一）快速入门IntelliJ IDE 插件开发 |（二）UI 界面与数据持久化IntelliJ IDE 插件开发 |（三）消息通知与事件监听前言在前两篇文章中讲解了关于插件开发的基础知识&…...

编程日记 2023/12/20 7:11:31

VUE小知识点

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 Vue 的主要作用是帮助开发者构建现代 Web 应用程序。它允许前端开发人员专注于应用程序…...

编程日记 2023/12/20 7:10:30

深入了解常见的应用层网络协议

目录 1. HTTP协议 1.1. 工作原理 1.2. 应用场景 1.3. 安全性考虑 2. SMTP协议 2.1. 工作原理 2.2. 应用场景 2.3. 安全性考虑 3. FTP协议 3.1. 工作原理 3.2. 应用场景 3.3. 安全性考虑 4. DNS协议 4.1. 工作原理 4.2. 应用场景 4.3. 安全性考虑 5. 安全性考虑…...

编程日记 2023/12/20 7:09:29

网络爬虫多任务采集

一、JSON文件存储 JSON，全称为 JavaScript 0bject Notation,也就是JavaSript 对象标记，它通过对象和数组的组合来表示数据，构造简洁但是结构化程度非常高，是一种轻量级的数据交换格式。本节中，我们就来了解如何利用 P…...

编程日记 2023/12/20 7:07:27

真实并发编程问题-1.钉钉面试题

👏作者简介：大家好，我是爱吃芝士的土豆倪，24届校招生Java选手，很高兴认识大家📕系列专栏：Spring源码、JUC源码、Kafka原理、分布式技术原理、数据库技术🔥如果感觉博主的文章还不错的…...

编程日记 2023/12/20 7:06:26

基于vue+element-plus+echarts制作动态绘图页面（柱状图，饼图和折线图）

前言我们知道echarts是一个非常强大的绘图库，基于这个库，我们可以绘制出精美的图表。对于一张图来说，其实比较重要的就是配置项，填入不同的配置内容就可以呈现出不同的效果。当然配置项中除了样式之外，最重要的就是…...

编程日记 2023/12/20 7:03:24

2312llvm,02前端

前端编译器前端,在生成目标相关代码前,把源码变换为编译器的中间表示.因为语言有独特语法和语义,所以一般,前端只处理一个语言或一组类似语言. 比如Clang,处理C,C,objective-C源码. 介绍Clang Clang项目是C,C,Objective-C官方的LLVM前端.Clang的官方网站在此. 实际编译器(…...

编程日记 2023/12/20 6:58:19

【MATLAB源码-第101期】基于matlab的蝙蝠优化算BA)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境： MATLAB 2022a 1、算法描述蝙蝠算法（BA）是一种基于群体智能的优化算法，灵感来源于蝙蝠捕食时的回声定位行为。这种算法模拟蝙蝠使用回声定位来探测猎物、避开障碍物的能力。在蝙蝠算法中，每只虚拟蝙蝠代表…...

编程日记 2023/12/20 6:57:18

【数据结构】二叉树的模拟实现

前言:前面我们学习了堆的模拟实现，今天我们来进一步学习二叉树，当然了内容肯定是越来越难的，各位我们一起努力！ 💖 博主CSDN主页:卫卫卫的个人主页 💞 👉 专栏分类:数据结构 👈 &…...

编程日记 2023/12/20 6:55:16

open3d bug：pcd转txt前后位姿发生改变

1、open3d bug：pcd转txt前后位姿发生改变 open3d会对原有结果进行一个微小位姿变换 import open3d as o3d import numpy as np# 读取PCD点云文件 pcd o3d.io.read_point_cloud(/newdisk/darren_pty/zoom_centered_s2.pcd)# 获取点云坐标 points pcd.points# 指定…...

编程日记 2023/12/20 6:54:16

持续集成交付CICD：Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用

目录一、实验 1.部署Ansible自动化运维工具 2.K8S 节点安装nginx 3.Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用二、问题 1.ansible安装报错 2.ansible远程ping失败 3. Jenkins流水线通过ansible命令直接ping多台机器的网络状态报错一、实验 …...

编程日记 2023/12/20 6:52:13

椭圆曲线密码学(ECC)

一、ECC算法概述椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...

编程新知 2025/7/20 12:09:50

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/8/9 4:52:48

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/8/4 23:48:41

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...

编程新知 2025/8/3 22:07:32

Spring Boot面试题精选汇总

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/21 4:41:44

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...

编程新知 2025/8/4 22:42:24

Java入门学习详细版（一）

大家好，Java 学习是一个系统学习的过程，核心原则就是“理论实践坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/27 0:21:52

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录前言🔥一、extern 是什么？&…...

编程新知 2025/8/7 21:04:43

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/7/26 19:10:34

Go 并发编程基础：通道（Channel）的使用

在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。一、Channel…...

编程新知 2025/6/21 14:20:00

相关文章：