mars3d - Webpack打包教程

1、新建文件夹mars3d-webpack

2、初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）

npm init -y  //初始化项目
npm install webpack webpack-cli --save-dev //安装webpack

3、完成后在mars3d-webpack根目录下新建两个文件夹

（1）public文件夹：存储公共资源文件

（2）src文件夹：存放源代码 src文件夹下再新建assets文件夹用于存放静态资源文件

（3）webpack.config.js：webpack配置文件

4、在public文件下新建index.html文件，在src文件下新建index.js文件

index.html内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mars3d</title>
</head><body><a>欢迎来到Mars3d</a>
</body></html>

index.js内容

console.log("欢迎来到mars3d三维可视化平台");

5、开发环境搭建和生产环境搭建

（1）执行命令

npm install --save-dev html-webpack-plugin
npm install webpack webpack-cli --save-dev//后面操作引入mars3d资源时执行命令，也可再此提前安装
npm install --save-dev style-loader css-loader
npm install copy-webpack-plugin -save --dev

html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。

（2）安装完成后在 webpack.config.js 文件中放入以下代码：

const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入const cesiumSourcePath = "node_modules/mars3d-cesium/Build/Cesium/"; // cesium库安装目录
const cesiumRunPath = "./mars3d-cesium/"; // cesium运行时路径module.exports = {entry: "./src/index.js",output: {filename: "main.js",path: path.resolve(__dirname, "dist"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},],},devServer: {compress: true,port: 5001,},plugins: [new HtmlWebpackPlugin({ template: "public/index.html" }),//*********后面操作引入mars3d资源时必须添加内容，也可再此提前添加*********************  // CESIUM_BASE_URL是标识cesium资源所在的主目录，其内部资源加载、多线程等处理时需要用到new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify(cesiumRunPath),}),// Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）new CopyWebpackPlugin({patterns: [//*********可以在搭建生产环境的添加*********{from: path.join(__dirname, "public/config"),to: path.join(__dirname, "dist/config"),},{from: path.join(__dirname, "public/img"),to: path.join(__dirname, "dist/img"),},//***************************************{from: path.join(cesiumSourcePath, "Workers"),to: path.join(cesiumRunPath, "Workers"),},{from: path.join(cesiumSourcePath, "Assets"),to: path.join(cesiumRunPath, "Assets"),},{from: path.join(cesiumSourcePath, "ThirdParty"),to: path.join(cesiumRunPath, "ThirdParty"),},{from: path.join(cesiumSourcePath, "Widgets"),to: path.join(cesiumRunPath, "Widgets"),},],}),],
};

package.json文件中代码

{"name": "mars-webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "webpack-dev-server --mode development", //开发环境"build": "webpack --mode production", //生产环境"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"css-loader": "^6.7.1","html-webpack-plugin": "^5.5.0","style-loader": "^3.3.1","webpack": "^5.72.1","webpack-cli": "^4.9.2","webpack-dev-server": "^4.9.0"},"dependencies": {"copy-webpack-plugin": "^11.0.0","mars3d": "^3.3.9","mars3d-cesium": "^1.93.0"}
}

（3）执行命名:npm start 在浏览器中输入http://localhost:5001/ 如果页面有欢迎内容，控制台也有欢迎内容，则开发环境搭建完成。

6、引入mars3d相关资源

（1）mars3d依赖安装

npm install mars3d
npm install mars3d-cesium

（2）在public文件下

新建config文件夹用于存放mars3d配置文件config.json

新建img文件夹用于存放图片资源

在src/assets文件夹下新建文件夹css，在src/assets/css新建文件style.css文件

style.css文件内容

html,
body {height: 100%;width: 100%;margin: 0;padding: 0;
}body {position: relative;overflow-x: hidden;overflow-y: hidden;
}/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {top: auto;bottom: 35px;left: 12px;right: auto;
}
.cesium-toolbar-button img {height: 100%;vertical-align: middle;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {margin-bottom: 5px;float: left;clear: both;text-align: center;
}
.cesium-button {background-color: #3f4854;color: #e6e6e6;fill: #e6e6e6;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);line-height: 32px;
}/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {bottom: 0;left: 40px;max-height: 700px;margin-bottom: 5px;
}/**cesium 帮助面板*/
.cesium-navigation-help {top: auto;bottom: 0;left: 40px;transform-origin: left bottom;
}/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {float: right;margin: 0 3px;
}/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {left: 0;right: 40px;width: auto;z-index: 9999;
}
.cesium-geocoder-searchButton {background-color: #3f4854;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {background-color: #3f4854;
}/**cesium info信息框*/
.cesium-infoBox {top: 50px;background: rgba(63, 72, 84, 0.9);
}
.cesium-infoBox-title {background-color: #3f4854;
}/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {top: auto;bottom: 35px;right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {color: #fff;
}/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {top: 10px;left: 10px;right: auto;background-color: #3f4854;
}

7、mars3d相关代码

public/index.html 中代码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title>示例预览 | Mars3D三维可视化平台 | 火星科技</title>
</head><body class="dark"><div id="mars3dContainer" class="mars3d-container"></div>
</body></html>

src/index.js中代码

import * as Cesium from "mars3d-cesium";
import * as mars3d from "mars3d";
import "mars3d/dist/mars3d.css";
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import "./assets/css/style.css";
function init() {// 判断webgl支持if (!mars3d.Util.webglreport()) {mars3d.Util.webglerror();}let configUrl = "../config/config.json";// 读取 config.json 配置文件mars3d.Resource.fetchJson({ url: configUrl }).then(function (json) {console.log("读取 config.json 配置文件完成", json); // 打印测试信息//合并属性参数，可覆盖config.json中的对应配置let mapOptions = mars3d.Util.merge(json.mars3d, {scene: {center: {lat: 31.841977,lng: 117.141788,alt: 1043,heading: 90,pitch: -51,},},});//创建三维地球场景const map = new mars3d.Map("mars3dContainer", mapOptions);}).catch(function (error) {console.log("加载JSON出错", error);});
}
init();

执行命令 npm start，浏览器中地球正常加载则开发环境搭建完成。

8、打包

执行命令 npm run build 打包。