欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack使用及如何搭建cesium三維地球環(huán)境

 更新時間：2023年11月23日 10:07:24   作者：南木元元  
這篇文章主要介紹了webpack快速上手之搭建cesium三維地球環(huán)境,本文使用的是webpack5，webpack5 升級后默認是不支持polyfill的，編譯時會報錯，本文主要介紹了Cesium以及Webpack的使用，如何將Cesium一步步地集成到Webpack中，需要的朋友可以參考下

Cesium介紹

CesiumJS是目前主流的一款三維地圖框架，是一個跨平臺、跨瀏覽器的展示三維地球和地圖的JavaScript庫，通過WebGL技術(shù)實現(xiàn)圖形的硬件加速，不需要任何插件支持。

Cesium提供了很多服務(wù)，下面是最主要的一些：

  • 支持全球級別的高精度的地形和影像服務(wù)
  • 支持 2D、2.5D、3D 形式的地圖展示
  • 可以繪制各種幾何圖形、高亮區(qū)域，支持導(dǎo)入圖片，甚至3D模型等多種數(shù)據(jù)可視化展示
  • 可用于動態(tài)數(shù)據(jù)可視化并提供良好的觸摸支持，支持絕大多數(shù)的瀏覽器和mobile
  • 支持基于時間軸的動態(tài)數(shù)據(jù)可視化展示

本文就來分享一下如何搭建Cesium的環(huán)境。

初始化一個Cesium地球

最簡單的方式就是從官網(wǎng)下載Cesium包，然后引入其中的cesium.js和widgets.css即可。

下載Cesium源碼包

官網(wǎng)下載地址：https://cesium.com/downloads/

下載完解壓后會發(fā)現(xiàn)有很多文件，如下圖所示：

其實只需要 Build 下面的 Cesium 這個文件夾，它是編譯后 Cesium 包的正式版本。

搭建環(huán)境

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

 Build/Cesium目錄

Cesium.js：定義了Cesium對象

 Build/Cesium/Widgets目錄

widgets.css：默認的Cesium CSS樣式文件

創(chuàng)建一個 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服務(wù)器上的，所以直接打開index.html是無效的，可以使用http-server服務(wù)器搭建一個簡單的服務(wù)，全局安裝http-server，如下：

npm install -g http-server

項目根目錄下運行http-server開啟服務(wù)

此時，在瀏覽器輸入http://127.0.0.1:8080即可看到一個3D的地球：

是不是很簡單，不過接下來才是本文的重點。

Webpack的使用

近年來Web應(yīng)用變得越來越復(fù)雜與龐大，通過直接編寫JavaScript、CSS、HTML開發(fā)Web應(yīng)用的方式早已無法應(yīng)對當(dāng)前Web應(yīng)用的發(fā)展。于是就出現(xiàn)了一系列的構(gòu)建工具，如Gulp、Rollup等，溝構(gòu)建其實是工程化、自動化思想在前端開發(fā)中的體現(xiàn)，將一系列流程用代碼去實現(xiàn)，讓代碼自動化地執(zhí)行諸如代碼轉(zhuǎn)化、文件壓縮等一系列復(fù)雜地流程。

Webpack是目前最流行的前端構(gòu)建工具。在webpack里一切皆模塊，一個模塊對應(yīng)一個文件。通過分析模塊間的依賴關(guān)系，在其內(nèi)部構(gòu)建出一個依賴圖，最終編繹輸出模塊為 HTML、JavaScript、CSS 以及各種靜態(tài)文件（圖片、字體等），讓我們的開發(fā)過程更加高效。

日常開發(fā)者中，我們常常使用vue-cli腳手架來構(gòu)建項目，其實也是對Webpack的封裝，為了更好地熟悉Webpack的配置，本文就使用Webpack來一步步地搭建Cesium環(huán)境。

Webpack搭建Web應(yīng)用

初始化項目

創(chuàng)建一個文件夾webpack-cesium，執(zhí)行npm init命令，初始化npm：

npm init

接著可以一路回車下去，就會發(fā)現(xiàn) package.json 文件已經(jīng)創(chuàng)建好了，如下所示：

{
  "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下創(chuàng)建一個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，設(shè)置一個快捷方式

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

執(zhí)行npm run build：

npm run build

此時可以看到，生成了一個dist目錄以及目錄下的main.js文件，說明已經(jīng)打包成功。

使用配置文件

上面例子使用的是webpack的默認配置，但是大多數(shù)項目會需要很復(fù)雜的設(shè)置，所以需要使用配置文件來進行更加豐富的自定義配置。

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

  • Entry：入口，webpack執(zhí)行構(gòu)建的第一步從Entry開始，即webpack從哪個文件開始打包。
  • Output：輸出，指示 webpack 打包完的文件輸出到哪里去，如何命名等  。
  • Loader：加載器，webpack 本身只能處理 js、json 等資源，其他資源需要借助loader，webpack 才能解析。
  • Plugins：插件，擴展webpack的功能。
  • mode：模式，主要分為development開發(fā)模式和production生產(chǎn)模式。

下面開始配置。

首先創(chuàng)建webpack.config.js配置文件，代碼結(jié)構(gòu)如下：

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 當(dāng)前文件的文件夾絕對路徑，即輸出到根目錄下的dist目錄
    path: path.resolve(__dirname, "dist"),
  },
  ...
  // 模式
  mode: "development",//開發(fā)模式
};

上述配置即代表將src/index.js 作為入口點，會將打包后的結(jié)果輸出到dist目錄下的app.js。

修改npm script命令：

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

再次執(zhí)行 npm run build 會發(fā)現(xiàn)生成了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為模板創(chuàng)建文件，新的html文件有兩個特點：1. 內(nèi)容和源文件一致 2. 自動引入打包生成的js等資源
      template: "src/index.html",
    }),
  ],
  ...
};

再次執(zhí)行npm run build，會發(fā)現(xiàn)dist目錄下生成了index.html和app.js文件。

并且index.html中已經(jīng)自動將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 = {
  ...
  // 開發(fā)服務(wù)器
  devServer: {
    host: "localhost", // 啟動服務(wù)器域名
    port: "3000", // 啟動服務(wù)器端口號
    open: true, // 是否自動打開瀏覽器
    hot: true, // 開啟HMR
  },
  ...
};

添加一個可以直接運行 dev server 的 script：

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

現(xiàn)在，在命令行中運行 npm start，會看到瀏覽器自動加載頁面，并且如果修改代碼web server 將在編譯代碼后自動重新加載。

注意：當(dāng)使用開發(fā)服務(wù)器時，所有代碼都會在內(nèi)存中編譯打包，并不會輸出到 dist 目錄下。

管理資源

webpack 本身只能處理 js、json 等資源，其他資源如css樣式資源需要借助相應(yīng)loader。

安裝css-loader和style-loader：

npm i css-loader style-loader -D
  • css-loader：負責(zé)將 css 文件編譯成 Webpack 能識別的模塊
  • style-loader：會動態(tài)創(chuàng)建一個 style 標簽，里面放置 Webpack 中 css 模塊內(nèi)容

配置loader，loader 有兩個屬性：test 屬性（識別出哪些文件會被轉(zhuǎn)換）和use 屬性（定義出在進行轉(zhuǎn)換時，應(yīng)該使用哪個 loader）。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  ...
  // 加載器
  module: {
    rules: [
      {
        // 只對 .css 結(jié)尾的文件進行相應(yīng)處理
        test: /\.css$/, 
        // use數(shù)組中Loader執(zhí)行順序是從右到左，需確保style-loader在前，css-loader在后
        use: ["style-loader", "css-loader"], 
      },
    ],
  },
  ...
};

以上配置，相當(dāng)于告訴 webpack 編譯器(compiler) ：當(dāng)碰到 require()/import 語句中被解析為 '.css 的路徑時，在對它打包之前，先use(使用) style-loader和css-loader 轉(zhuǎn)換一下。

當(dāng)然，還有許多其他資源如圖片、字體等，這里就不再進行配置。

集成Cesium

經(jīng)過上述操作，webpack已經(jīng)搭建好了一個基本的Web應(yīng)用，接下來就是添加Cesium。

安裝CesiumJS

npm i -D cesium

定義Cesium路徑

與傳統(tǒng)的 npm 模塊不同，Cesium沒有定義入口點，因為庫的使用方式多種多樣，所以需要定義Cesium的路徑。在webpack.config.js頂部添加如下代碼：

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

管理Cesium靜態(tài)文件

Cesium是一個龐大而復(fù)雜的庫，除了 JavaScript 模塊之外，它還包括靜態(tài)資源，例如CSS、圖像和 json 文件，還包括 Web Worker 文件，用于在單獨的線程中執(zhí)行密集計算，需要額外配置來確保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(""),
    }),
  ],
  ...
};

上述配置做了兩件事：

  • 將Assets、Widgets以及Web Worker文件復(fù)制到打包后的資源輸出目錄dist下。
  • 定義一個環(huán)境變量，告訴Cesium使用webpack加載靜態(tài)文件的基本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");

執(zhí)行npm start，即可在瀏覽器看到初始化的三維地球。

踩坑

本文使用的是webpack5，webpack5 升級后默認是不支持polyfill的，編譯時會報錯。

polyfill即“墊片”的意思，當(dāng)新的api在舊版瀏覽器中不可用時，可以使用polyfill來填充這些缺失的功能。Webpack5之后，官方認為自動引入Polyfill會導(dǎo)致bundle體積過大，并且大多數(shù)情況下這些自動引入的Polyfill是沒有用到的，所以Webpack5需要我們手動引入Polyfill。

解決方法就是根據(jù)報錯內(nèi)容按需添加相應(yīng)配置：

module.exports = {
  ...
  resolve: {
    // 這里直接禁用相應(yīng)模塊
    fallback: { https: false, zlib: false, http: false, url: false },
  },
  ...
};

resolve.fallback指定了當(dāng)目標構(gòu)建環(huán)境中不存在對應(yīng)的包時，將使用fallback的值作為回退。

總結(jié)

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

到此這篇關(guān)于webpack快速上手之搭建cesium三維地球環(huán)境的文章就介紹到這了,更多相關(guān)webpack 搭建cesium三維地球環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論