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

electron与cesium组件入门应用功能

news 2025/6/26 2:14:16

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

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

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制半数机制（过半机制&#xff0…...

编程新知 2025/6/22 9:08:39

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具之外，还提供了基于网页版的 ESP LA…...

编程新知 2025/6/21 14:21:07

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...

编程新知 2025/6/24 2:54:07

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。二、服务端模块设计目标高内聚低耦合：各模块职责清晰，便于独立开发…...

编程新知 2025/6/26 1:14:27

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...

编程新知 2025/6/22 2:36:43

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...

编程新知 2025/6/25 4:57:14

CSS | transition 和 transform的用处和区别

省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/6/20 11:11:59

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位纯端点地址：Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址（如 10.244.1.2）无特殊名称：在 Kubernetes 中，它通常被称为 “Pod IP” 或 “容器 IP”生命周期：与 Pod …...

编程新知 2025/6/20 19:17:53

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日，在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上，可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞，强调该联盟是推进全国一体化数据市场建设的关键抓手。郑州埃文科技有限公司&am…...

编程新知 2025/6/22 12:47:54

FOPLP vs CoWoS

以下是 FOPLP（Fan-out panel-level packaging 扇出型面板级封装）与 CoWoS（Chip on Wafer on Substrate）两种先进封装技术的详细对比分析，涵盖技术原理、性能、成本、应用场景及市场趋势等维度： 一、技术原…...

编程新知 2025/6/21 15:31:20

相关文章：