osgb在cesium展示简单实现，含webpack配置

最新推荐文章于 2024-09-20 20:52:02 发布

pigs_dream

最新推荐文章于 2024-09-20 20:52:02 发布

阅读量2.9k

点赞数 6

分类专栏：小猪BB的GIS开发经文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/pigs_dream/article/details/129896152

版权

小猪BB的GIS开发经专栏收录该内容

8 篇文章 0 订阅

订阅专栏

自己配置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