webpack快速上手之搭建cesium三维地球环境

news2024/9/22 6:31:29

前言

 📫 大家好，我是南木元元，热衷分享有趣实用的文章，希望大家多多支持，一起进步！

🍅 个人主页：南木元元

目录

Cesium介绍

初始化一个Cesium地球

​编辑

Webpack的使用

Webpack搭建Web应用

初始化项目

使用配置文件

配置html模板

配置webpack-dev-server

管理资源

集成Cesium

安装CesiumJS

定义Cesium路径

管理Cesium静态文件

使用Cesium

踩坑

总结

Cesium介绍

CesiumJS是目前主流的一款三维地图框架，是一个跨平台、跨浏览器的展示三维地球和地图的JavaScript库，通过WebGL技术实现图形的硬件加速，不需要任何插件支持。

Cesium提供了很多服务，下面是最主要的一些：

  • 支持全球级别的高精度的地形和影像服务
  • 支持 2D、2.5D、3D 形式的地图展示
  • 可以绘制各种几何图形、高亮区域，支持导入图片，甚至3D模型等多种数据可视化展示
  • 可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和mobile
  • 支持基于时间轴的动态数据可视化展示

本文就来分享一下如何搭建Cesium的环境。

初始化一个Cesium地球

最简单的方式就是从官网下载Cesium包，然后引入其中的cesium.js和widgets.css即可。

  • 下载Cesium源码包

官网下载地址：https://cesium.com/downloads/

下载完解压后会发现有很多文件，如下图所示：

其实只需要 Build 下面的 Cesium 这个文件夹，它是编译后 Cesium 包的正式版本。

  • 搭建环境

新建一个index.html文件，然后引入其中的cesium.js和widgets.css。

 Build/Cesium目录

Cesium.js：定义了Cesium对象

 Build/Cesium/Widgets目录

widgets.css：默认的Cesium CSS样式文件

创建一个 div，用来作为三维地球的容器

<div id="cesiumContainer"></div>

初始化 CesiumViewer实例

var viewer = new Cesium.Viewer('cesiumContainer');

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Cesium/Widgets/widgets.css">
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>

Cesium是需要运行在Web服务器上的，所以直接打开index.html是无效的，可以使用http-server服务器搭建一个简单的服务，全局安装http-server，如下：

npm install -g http-server

项目根目录下运行http-server开启服务

此时，在浏览器输入http://127.0.0.1:8080即可看到一个3D的地球：

是不是很简单，不过接下来才是本文的重点。

Webpack的使用

近年来Web应用变得越来越复杂与庞大，通过直接编写JavaScript、CSS、HTML开发Web应用的方式早已无法应对当前Web应用的发展。于是就出现了一系列的构建工具，如Gulp、Rollup等，沟构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行诸如代码转化、文件压缩等一系列复杂地流程。

Webpack是目前最流行的前端构建工具。在webpack里一切皆模块，一个模块对应一个文件。通过分析模块间的依赖关系，在其内部构建出一个依赖图，最终编绎输出模块为 HTML、JavaScript、CSS 以及各种静态文件（图片、字体等），让我们的开发过程更加高效。

日常开发者中，我们常常使用vue-cli脚手架来构建项目，其实也是对Webpack的封装，为了更好地熟悉Webpack的配置，本文就使用Webpack来一步步地搭建Cesium环境。

Webpack搭建Web应用

初始化项目

创建一个文件夹webpack-cesium，执行npm init命令，初始化npm：

npm init

接着可以一路回车下去，就会发现 package.json 文件已经创建好了，如下所示：

{
  "name": "webpack-cesium",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装webpack依赖（其中webpack-cli用于在命令行中运行webpack），如下：

npm i webpack webpack-cli -D

新建一个src目录，用于存放源代码，并在src下创建一个index.html文件和index.js文件。

index.html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

index.js文件如下：

console.log('Hello World');

package.json中添加npm script，设置一个快捷方式

{
  ...
  "scripts": {
    "build": "webpack ./src/index.js"
  },
  ...
}

执行npm run build：

npm run build

此时可以看到，生成了一个dist目录以及目录下的main.js文件，说明已经打包成功。

使用配置文件

上面例子使用的是webpack的默认配置，但是大多数项目会需要很复杂的设置，所以需要使用配置文件来进行更加丰富的自定义配置。

配置之前，我们需要知道，Webpack有几大核心概念：

  1. Entry：入口，webpack执行构建的第一步从Entry开始，即webpack从哪个文件开始打包。
  2. Output：输出，指示 webpack 打包完的文件输出到哪里去，如何命名等  。
  3. Loader：加载器，webpack 本身只能处理 js、json 等资源，其他资源需要借助loader，webpack 才能解析。
  4. Plugins：插件，扩展webpack的功能。
  5. mode：模式，主要分为development开发模式和production生产模式。

下面开始配置。

首先创建webpack.config.js配置文件，代码结构如下：

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

配置输入和输出：

const path = require("path");

module.exports = {
  // 入口
  entry: {
    app: "./src/index.js",
  },
  // 输出
  output: {
    // 指定输出文件名
    filename: "app.js",
    // path: 文件输出目录，必须是绝对路径，path.resolve()方法返回一个绝对路径，__dirname 当前文件的文件夹绝对路径，即输出到根目录下的dist目录
    path: path.resolve(__dirname, "dist"),
  },

  ...
  // 模式
  mode: "development",//开发模式

};

上述配置即代表将src/index.js 作为入口点，会将打包后的结果输出到dist目录下的app.js。

修改npm script命令：

{
  ...
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  ...
}

再次执行 npm run build 会发现生成了dist目录以及app.js文件。

配置html模板

js文件打包好了，但是我们不可能每次在html文件中手动引入打包好的js，所以需要使用html-webpack-plugin来帮助我们完成这件事。

npm i -D html-webpack-plugin

将插件添加到webpack配置中：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      // 以src/index.html为模板创建文件，新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: "src/index.html",
    }),
  ],
  ...
};

再次执行npm run build，会发现dist目录下生成了index.html和app.js文件。

并且index.html中已经自动将app.js引入，这时打开index.html，就会在浏览器上看到如下效果：

配置webpack-dev-server

webpack-dev-server 提供了一个基本的 web server，并具有实时重新加载的功能，即每次修改能够自动刷新浏览器。

npm i -D webpack-dev-server

配置dev server：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR
  },
  ...
};

添加一个可以直接运行 dev server 的 script：

{
  ...
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "webpack serve --config webpack.config.js --open"
  },
  ...
}

现在，在命令行中运行 npm start，会看到浏览器自动加载页面，并且如果修改代码web server 将在编译代码后自动重新加载。

注意：当使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。

管理资源

webpack 本身只能处理 js、json 等资源，其他资源如css样式资源需要借助相应loader。

安装css-loader和style-loader：

npm i css-loader style-loader -D
  • css-loader：负责将 css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 style 标签，里面放置 Webpack 中 css 模块内容

配置loader，loader 有两个属性：test 属性（识别出哪些文件会被转换）和use 属性（定义出在进行转换时，应该使用哪个 loader）。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...
  // 加载器
  module: {
    rules: [
      {
        // 只对 .css 结尾的文件进行相应处理
        test: /\.css$/, 
        // use数组中Loader执行顺序是从右到左，需确保style-loader在前，css-loader在后
        use: ["style-loader", "css-loader"], 
      },
    ],
  },
  ...
};

以上配置，相当于告诉 webpack 编译器(compiler) ：当碰到 require()/import 语句中被解析为 '.css 的路径时，在对它打包之前，先use(使用) style-loader和css-loader 转换一下。

当然，还有许多其他资源如图片、字体等，这里就不再进行配置。

集成Cesium

经过上述操作，webpack已经搭建好了一个基本的Web应用，接下来就是添加Cesium。

安装CesiumJS

npm i -D cesium

定义Cesium路径

与传统的 npm 模块不同，Cesium没有定义入口点，因为库的使用方式多种多样，所以需要定义Cesium的路径。在webpack.config.js顶部添加如下代码：

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

管理Cesium静态文件

Cesium是一个庞大而复杂的库，除了 JavaScript 模块之外，它还包括静态资源，例如CSS、图像和 json 文件，还包括 Web Worker 文件，用于在单独的线程中执行密集计算，需要额外配置来确保Cesium的Assets、Widgets和 Web Worker文件能正确提供和加载。

安装copy-webpack-plugin插件，进行资源的拷贝。

npm i -D copy-webpack-plugin

webpack.config.js中进行如下配置：

const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopywebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  ...
  // 插件
  plugins: [
    ...
    // 拷贝资源
    new CopywebpackPlugin({
      patterns: [
        { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
        { from: path.join(cesiumSource, "Assets"), to: "Assets" },
        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
      ],
    }),
    // 替换变量
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify(""),
    }),
  ],
  ...
};

上述配置做了两件事：

  1. 将Assets、Widgets以及Web Worker文件复制到打包后的资源输出目录dist下。
  2. 定义一个环境变量，告诉Cesium使用webpack加载静态文件的基本URL。

使用Cesium

完成上述配置后，接下来就可以正常使用cesium了。

首先定义一个main.css样式文件：

html, body, #cesiumContainer {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

修改src/index.html，定义一个cesium的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <div id="cesiumContainer"></div>
</body>
</html>

修改src/index.js，初始化地球。

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

Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMWRiNmQ3NS0xYWY0LTQ0OTktYjlhNC1lZDQxOWY2MjFjYzMiLCJpZCI6MTE0NjI5LCJpYXQiOjE2OTI1OTYyNzl9.43IFcv8UAssdObdzXC1QRo3HStHOnq5xCRVhKOadOh8";

var viewer = new Viewer("cesiumContainer");

执行npm start，即可在浏览器看到初始化的三维地球。

踩坑

本文使用的是webpack5，webpack5 升级后默认是不支持polyfill的，编译时会报错。

polyfill即“垫片”的意思，当新的api在旧版浏览器中不可用时，可以使用polyfill来填充这些缺失的功能。Webpack5之后，官方认为自动引入Polyfill会导致bundle体积过大，并且大多数情况下这些自动引入的Polyfill是没有用到的，所以Webpack5需要我们手动引入Polyfill。

解决方法就是根据报错内容按需添加相应配置：

module.exports = {
  ...
  resolve: {
    // 这里直接禁用相应模块
    fallback: { https: false, zlib: false, http: false, url: false },
  },
  ...
};

resolve.fallback指定了当目标构建环境中不存在对应的包时，将使用fallback的值作为回退。

总结

本文主要介绍了Cesium以及Webpack的使用，如何将Cesium一步步地集成到Webpack中。

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1229139.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SAP权限设计简介

SAP权限设计简介

介绍 小技巧 -ERP 权限控制 繁中求简 , 闲聊一下 SAP 复杂权限设计的基本思想。 特别是适合大集团业务的 ERP 系统 , 应该提供一个非常完善的权限控制机制 , 甚至允许将权限控制字段细到字段级别&#xff0c;如果权限控制都做不到这点&#xff0c;估计产品销售就够呛&#x…
阅读更多...
一些损失函数的学习

一些损失函数的学习

CrossEntropy loss 交叉熵是用来衡量两个概率分布之间的差异性或不相似性的度量交叉熵定义为两个概率分布p和q之间的度量。其中&#xff0c;p通常是真实分布&#xff0c;而q是模型预测的分布 交叉熵还等于信息熵 相对熵 这里&#xff0c;x遍历所有可能的事件&#xff0c;p(x)…
阅读更多...
文件编码、转换、乱码问题

文件编码、转换、乱码问题

文件编码 用来表示文本内容的字符集和字符编码方式&#xff0c;决定了在文本文件中使用的字符集和字符的二进制表示方式。常见的文件编码包括 UTF-8、UTF-16、ASCII、ISO-8859-1 等。选择文件编码时&#xff0c;需要考虑到所支持的字符集范围、编码方式对特定语言的支持程度以…
阅读更多...
学了Python不做全职，那么可以靠哪些兼职赚到钱？

学了Python不做全职，那么可以靠哪些兼职赚到钱？

如果学了Python不做全职工作&#xff0c;那么可以靠哪些兼职赚到钱&#xff1f; 今天我们就来看看一位有着4年开发经验的老鸟的分析回答&#xff0c;希望对你有所帮助。 emmm… 以我差不多四年的 Python 使用经验来看&#xff0c;大概可以按以下这些路子来赚到钱&#xff0c;…
阅读更多...
【reading notes】

【reading notes】

文章目录 中文AA 或 AAAAAAAAAAA&#xff0c;BBBBAAAA&#xff0c;BBBB&#xff0c;CCCCAAAA&#xff0c;BBBB&#xff0c;CCCC&#xff0c;DDDDAAAAAAAAAA&#xff0c;BBBBBAAAAA&#xff0c;BBBBB&#xff0c;CCCCC&#xff08;肆&#xff09;AAAAA&#xff0c;BBBBB&#xf…
阅读更多...
pyqt5切换到pyqt6遇到问题

pyqt5切换到pyqt6遇到问题

pyqt5切换到pyqt6变更点 FramelessWindowHint Qt.FramelessWindowHint Qt.WindowType.FramelessWindowHint globalPos event.globalPos() event.globalPosition() LeftButton Qt.LeftButton Qt.MouseButton.LeftButton StrongFocus Qt.StrongFocus Qt.FocusPolicy.Stro…
阅读更多...
助力安全生产--韩施电气为您提供电动机保护及电机故障解决方

助力安全生产--韩施电气为您提供电动机保护及电机故障解决方

上海韩施电气自成立于2008年&#xff0c;是一家专门从事销售电气自动化设备、电力设备、机电设备的综合型贸易公司&#xff0c;公司自成立以来一直专注于EOCR产品的推广销售和技术服务&#xff0c;成为韩国施耐德EOCR在国内的总代理&#xff0c;并授予代理证书&#xff0c;我们…
阅读更多...
CNCC 2023 | 大模型全面革新推荐系统！产学界多位大咖精彩献言

CNCC 2023 | 大模型全面革新推荐系统！产学界多位大咖精彩献言

随着人工智能领域的不断突破&#xff0c;大模型的潮流已然席卷而来。大模型一跃成为时代的新宠&#xff0c;展现出强大的通用性和泛化能力&#xff0c;为 AI 技术的应用进一步打开了想象空间。与此同时&#xff0c;推荐系统作为大规模机器学习算法应用较为成熟的方向之一&#…
阅读更多...
谈谈系统性能调优中都需要考虑哪些因素

谈谈系统性能调优中都需要考虑哪些因素

一、 什么是性能调优&#xff1f; 这个系统好慢、网站又打不开了&#xff0c;太卡了&#xff0c;又没响应了&#xff0c;相信大家都遇到过用户的这种抱怨&#xff0c;此时&#xff0c;说明我们的应用系统出现了性能问题&#xff0c;那么怎么办呢&#xff0c;首先想到的应该是优…
阅读更多...
磁钢的居里温度和工作温度

磁钢的居里温度和工作温度

你知道吗&#xff0c;磁体在超过一定温度时会永久的失磁&#xff0c;不同的磁体能够承受的最大工作温度是不同的&#xff0c;那么与温度相关的指标有哪些&#xff1f;如何根据工作温度来选择合适的磁钢&#xff1f;今天我们就来解答一下这些问题。 居里温度 说到温度与磁性关…
阅读更多...
xshell部署前端代码

xshell部署前端代码

阅读更多...
深入分析高性能互连点对点通信开销

深入分析高性能互连点对点通信开销

今天分享最近阅读的一篇文章&#xff1a;“Breaking Band&#xff0c;A Breakdown of High-Performance Communication”&#xff0c;这篇文章发表在ICPP 2019会议。由加州大学欧文分校和ARM公司合作完成。从题目中可以看到&#xff0c;这篇文章是一篇评测型的文章&#xff0c;…
阅读更多...
大厂秋招真题【单调栈】Bilibili2021秋招-大鱼吃小鱼

大厂秋招真题【单调栈】Bilibili2021秋招-大鱼吃小鱼

文章目录 题目描述与示例题目描述输入描述输出描述示例一输入输出说明 示例二输入输出说明 解题思路代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 小明最近喜欢上了俄罗斯套娃、大鱼吃小鱼这些大的包住小的类型的游戏。 于…
阅读更多...
汇编-loop循环指令

汇编-loop循环指令

LOOP指令是根据ECX计数器循环&#xff0c;将语句块重复执行特定次数。 ECX自动作为计数器&#xff0c; 每重复循环一次就递减1。 语法如下所示&#xff1a; 循环目的地址必须在距离当前位置计数器的-128到127字节范围内 LOOP指令的执行有两个步骤&#xff1a; 第一步&…
阅读更多...
记一次线上bug排查-----SpringCloud Gateway组件 请求头accept-encoding导致响应结果乱码

记一次线上bug排查-----SpringCloud Gateway组件 请求头accept-encoding导致响应结果乱码

基于公司的业务需求&#xff0c;在SpringCloud Gateway组件的基础上&#xff0c;写了一个转发服务&#xff0c;测试开发阶段运行正常&#xff0c;并实现初步使用。但三个月后&#xff0c;PostMan请求接口&#xff0c;返回异常&#xff0c;经排查&#xff0c;从日志中获取到转发…
阅读更多...
js高效函数库Lodash.js

js高效函数库Lodash.js

Lodash 是一个 JavaScript 的实用工具库&#xff0c;提供了许多实用且高效的函数&#xff0c;可以简化 JavaScript 编程中的常见任务。 Lodash具有高性能、模块化和易用性等特点&#xff0c;表现一致性以及可扩展&#xff0c;下面将介绍一些 Lodash 的重要特性和用法&#xff1…
阅读更多...
解决 VS2022 关于 c++17 报错： C2131 表达式必须含有常量值

解决 VS2022 关于 c++17 报错： C2131 表达式必须含有常量值

使用 VS2022 编译 ORB-SLAM3 加载Vocabulary 二进制ORBvoc.bin 时&#xff0c;在 DBOW2 里修改 TemplatedVocabulary.h 代码显示这样的错误&#xff1a; 编译器错误 C2131 表达式的计算结果不是常数 定位到我的代码中&#xff1a; char buf [size_node] ; 原因 &#xff1a; …
阅读更多...
Ultipa Transporter V4.3.22 即将发布，解锁更多易用功能！

Ultipa Transporter V4.3.22 即将发布，解锁更多易用功能！

Ultipa Graph 作为一款领先的实时图数据库分析平台&#xff0c;即将发布最新版的数据导入/导出工具Ultipa Transporter V4.3.22 以实现对 Neo4j数据源的导入支持。自今年以来&#xff0c;Ultipa Transporter不断增加新功能&#xff0c;除原本支持本地CSV文件导入导出外&#xf…
阅读更多...
修改bat文件默认编辑软件

修改bat文件默认编辑软件

Windows默认编辑bat文件的软件是自带的文本编辑器。无法高亮显示bat中的命令。 修改方式一&#xff1a; 打开注册表文件&#xff0c;变更键值 HKEY_CLASSES_ROOT\batfile\shell\edit\command 对应软件地址 修改方式二&#xff1a; 制作批处理文件&#xff0c;代码如下&#x…
阅读更多...
github 开源whisper ros llm

github 开源whisper ros llm

GitHub - openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision openai whisper ROS LLM https://github.com/Auromix/ROS-LLM/tree/ros2-humble/llm_input
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023