mars3d - Webpack打包教程
张溪叠
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 打包。
类似资料：