自己配置webpack构建cesium项目
开发工具 vscode 需要有node.js环境
项目依赖安装
创建项目目录，在终端 cd 到目录文件夹，输入npm init ，初始化项目
npm init
在项目目录写入src/index.js src/index.html src/css/main.css三个文件
index.html 中写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>main.css 中写入
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
index.js 中代码在完成下面环境配置后写入，放在下方
安装webpack，npm install --save-dev webpack
npm install --save-dev webpack
安装静态文件支持依赖
npm install --save-dev style-loader css-loader url-loader
安装插件html-webpack-plugin，方便使用index.html作为模板
npm install --save-dev html-webpack-plugin
在终端中可能会弹出对话，输入 y
Do you want to install 'webpack-cli' (yes/no): y
安装webpack开发服务器依赖，借此查看应用程序的运行效果
npm install --save-dev webpack-dev-server
安装cesium
npm install --save-dev cesium
为确保正确地加载静态CesiumJS资源、widget和web worker文件。在构建过程中，使用copy-webpack-plugin将静态文件复制到dist目录。 安装copy-webpack-plugin依赖
npm install --save-dev copy-webpack-plugin
配置webpack.config.js
webpack.config.js文件具体配置如下
const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
context: __dirname,
entry: {
app: "./src/index.js", //指定入口js文件
},
output: {
filename: "app.js",
path: path.resolve(__dirname, "dist"),
sourcePrefix: "",
},
resolve: {
fallback: { https: false, zlib: false, http: false, url: false },
mainFiles: ["index", "Cesium"],
},
module: {
//添加两个module.rules !第一条规则支持CSS文件，第二条规则支持其他静态文件。
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: ["url-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html", //使用src/index.html作为模板
}),
// 使用CopyWebpackPlugin插件, 复制 Cesium Assets, Widgets, Workers 到一个静态目录
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
{ from: path.join(cesiumSource, "Assets"), to: "Assets" },
{ from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
{ from: path.join(cesiumSource, "ThirdParty"), to: "ThirdParty" },
],
}),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify(""),
}),
],
mode: "development", //指定webpack的mode选项
devtool: "eval",
};配置package.json
在package.json中加入，定义我们可以用npm调用的脚本
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack serve --config webpack.config.js --open"
},
package.json具体配置如下
{
"name": "cesium-demo-webpack",
"version": "1.0.0",
"description": "a new cesium demo for learning webpack",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack serve --config webpack.config.js --open"
},
"author": {
"name": "canyang",
"email": "zhoucanyang@126.com"
},
"license": "ISC",
"devDependencies": {
"cesium": "^1.103.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"webpack": "^5.76.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
index.js 中写入
window.CESIUM_BASE_URL = "/src/public/";
import {
Ion,
Viewer,
createWorldTerrain,
createOsmBuildings,
Cartesian3,
Math,
} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "../src/css/main.css";
// 访问cesium官网申请token: https://cesium.com/ion/tokens.
// 下面是一个tokens占位符, 需要替换为自己的token
Ion.defaultAccessToken =
"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const viewer = new Viewer("cesiumContainer", {
terrainProvider: createWorldTerrain(),
});
viewer.scene.primitives.add(createOsmBuildings());
完成cesium项目搭建
之前环境配置中已经安装了 cesium , 现在将node_modules/cesium/Build下的整个Cesium文件夹复制到public目录下
运行 npm run build 完成工程搭建
npm run build
当前项目目录截图如下，未使用Git项目管理可以忽略.gitignore文件
执行 npm start 运行项目查看程序内容截图如下
npm start
此时项目已加载了 osm建筑 和 cesium地形
在Cesium项目中加载倾斜摄影模型
将osgb切片为3d tiles
使用 cesiumlab 将 osgb格式的倾斜摄影文件切片为 3d tiles文件
使用nginx将3d tiles文件发布为本地服务
nginx 的 server 配置如下，指定项目需要的3d tiles文件目录
server {
listen 8088;
#Access-Control-Allow-Origin *解决跨域问题跨域
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers Origin,X-Requested-Width,Content-Type,Accept;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 1728000;
if ($request_method = 'OPTIONS') {
return 204;
}
location /osgb {
#项目文件目录
alias E:\mytemp\osgb_data\osgb_3dtiles;
autoindex on;
autoindex_localtime on;
#index index.html index.htm;
}
}启动nginx后，访问http://localhost:8088/osgb/ 看到如下目录即发布成功
其他发布方式
也可以使用cesium ion将3d tiles文件发布为在线服务
也可以使用vscode的 live server 插件发布本地服务
Cesium项目中加载模型
修改 index.js 代码如下
window.CESIUM_BASE_URL = "/src/public/";
import * as Cesium from "cesium";
import {
Ion,
Viewer,
createWorldTerrain,
createOsmBuildings,
Cartesian3,
Math,
} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "../src/css/main.css";
// 访问cesium官网申请token: https://cesium.com/ion/tokens.
// 下面是一个tokens占位符, 需要替换为自己的token
Ion.defaultAccessToken =
"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const viewer = new Viewer("cesiumContainer", {
terrainProvider: createWorldTerrain(),
});
viewer.scene.primitives.add(createOsmBuildings());
var tileset = new Cesium.Cesium3DTileset({
url: "http://localhost:8088/osgb/tileset.json",
});
//加载资源
tileset.readyPromise.then(function (tileset) {
viewer.scene.primitives.add(tileset);
viewer.flyTo(
tileset, //通过 new Cesium3DTileset 创建的图像，使相机聚焦图像位置
{
duration: 3,
maximumHeight: 0.5,
offset: new Cesium.HeadingPitchRange(0.5, -0.5, 1000),
}
);
});运行 npm run build
npm run build
执行 npm start ，访问项目
npm start
加载效果如下
感谢浏览
2172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
