Cesium开发环境搭建的几种方法总结

最新推荐文章于 2024-07-01 09:50:56 发布
最新推荐文章于 2024-07-01 09:50:56 发布
阅读量3.6k 收藏 49
点赞数 5
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34638477/article/details/122054780
版权

文章目录

一：CDN——引入在线的CesiumJS及其样式

参考官网教程：https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

用传统的创建网页的方式新建一个html页面，引入在线Cesium.js及css，编写页面代码，然后直接双击打开，页面内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files 引入JS文件和样式 -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
    
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // This is the default access token from your ion account

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });    
    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
  </script>
 </div>
</body>
</html>

在这里插入图片描述

二：npm——webpack方式开发

参考官网教程：https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

1 安装node.js 与 npm

在这里插入图片描述

2 创建项目工程

先：创建一个空文件夹，在命令行、项目文件夹下执行npm init，出现了package.json文件
再：新建html、js、css文件

建议直接使用vscode或HBuilder等代码编辑器的终端进行操作，所有命令行操作都在项目文件夹下进行

在这里插入图片描述
src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

src/index.js

console.log('Hello World!');

src/css/main.css

html, body, #cesiumContainer {	
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

3 安装和配置webpack

在终端命令行，项目文件夹中，执行：
npm i webpack webpack-cli --save-dev

-----------------
如果报错：webpack ：无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
则先全局安装webpack ：执行 cnpm install webpack-cli -g
再执行上述命令

创建并配置webpack.config.js

在这里插入图片描述

const path = require('path');

const webpack = require('webpack');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
    }
};

4 依次安装loader模块、html-webpack-plugin 插件、webpack-dev-server模块

npm install --save-dev style-loader css-loader url-loader

npm install --save-dev html-webpack-plugin

npm install --save-dev webpack-dev-server

修改webpack.config.js文件

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        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'
        })
    ],
    mode: 'development'
};

修改package.json文件

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

执行npm run build

npm run build

执行npm start

npm start

在这里插入图片描述
在这里插入图片描述

5 引入CesiumJS进行开发

5.1 安装Cesium模块

npm install --save-dev cesium

5.2 修改webpack.config.js，引入cesium模块

// The path to the CesiumJS source code
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');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
        // Needed to compile multiline strings in Cesium
        sourcePrefix: ''
    },
    amd: {
        // Enable webpack-friendly use of require in Cesium
        toUrlUndefined: true
    },
    resolve: {
        alias: {
            cesium: path.resolve(__dirname, cesiumSource)
        },
        mainFiles: ['module', 'main', 'Cesium']
    },
    module: {
        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'
        })
    ],
    mode: 'development',
};

5.3 CesiumJS 静态资源管理配置

5.3.1 安装copy-webpack-plugin插件
npm install --save-dev copy-webpack-plugin
5.3.2 将插件配置到webpack.config.js文件
// The path to the CesiumJS source code
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'
    },
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist'),
        sourcePrefix: ''
    },
    amd: {
        // Enable webpack-friendly use of require in Cesium
        toUrlUndefined: true
    },
    resolve: {
        alias: {
            cesium: path.resolve(__dirname, cesiumSource)
        },
        mainFiles: ['module', 'main', 'Cesium']
    },
    module: {
        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'
        }),
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        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({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        })
    ],
    mode: 'development',
};

5.4 修改页面代码，加入cesium

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="cesiumContainer"></div>
	</body>
</html>

index.js

import { Viewer } from "cesium";
import "cesium/Widgets/widgets.css";
import "../src/css/main.css"

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer('cesiumContainer');

执行npm start
在这里插入图片描述

如果出现Can’t resolve “xxx” in …的报错，有可能是安装的组件失效，这个时候尝试用 npm i xxx --save，然后再重新启动项目

三：下载源码进行开发

1 下载cesium源码

方式一：通过官网下载地址直接下载 官网地址
方式二：利用GitHub下载 github地址
在这里插入图片描述
在这里插入图片描述

2 安装依赖

解压后进入当前目录，命令行输入 npm install

npm install

3 运行项目

方式一：通过终端命令行
在命令行输入 npm start 或 node server.cjs 回车启动（利用了nodejs的web服务）,​ 导航到对应的网址去查看
在这里插入图片描述
在这里插入图片描述
方式二：通过HBuilder
在这里插入图片描述
方式三：通过VSCode
在这里插入图片描述

4 开发自己的cesium页面

在这里插入图片描述
在这里插入图片描述

四：简化版的源码开发

1 创建项目

新建一个项目文件夹，将cesium源码中的Build文件夹和Apps文件中的HelloWorld.html示例拷入项目文件夹
在这里插入图片描述
修改一下HelloWorld中js文件和css样式的引用路径
在这里插入图片描述

2 运行

在这里插入图片描述

3 仿照helloworld开发其他页面

五：Vue3组件开发——插件方法

1 创建vue工程

1.1 全局安装最新版vue-cli

npm install -g @vue/cli

1.2 创建vue工程

vue ui
//使用可视化界面创建vue项目，选择2.X版本（3.X版本在后续开发中因为版本太高会有很多报错）

2 安装cesium插件

插件GitHub地址：https://github.com/isboyjc/vue-cli-plugin-cesium

全局安装：vue add vue-cli-plugin-cesium
局部安装：npx vue add vue-cli-plugin-cesium
PS：不要选最新版本，会报错

3 cesium页面开发

这里我们简单修改一下About.vue页面，看一下效果即可

<template>
  <div class="about">
    <h1>This is an about page</h1>
	<div class="map">
		<div id="cesiumContainer">
			
		</div>
	</div>
  </div>
</template>

<script>
	export default{
		name:"",
		mounted() {
			// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';
			let viewer = new Cesium.Viewer("cesiumContainer")
		}
	}
</script>

<style>
	.map{
		width: 100%;
		height: 800px;
	}
</style>

运行，点击About切换到修改的页面

npm run serve

在这里插入图片描述
发现没有地球出现，报了401的错误，是权限问题
在这里插入图片描述
继续修改About.vue页面，添加token
在这里插入图片描述

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';

如果无效的话去官网看一下如何获取自己的token

官网：https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
在这里插入图片描述

六：vue组件开发——webpack配置文件方式（未完待续…）

本人太菜，bug太多解决不完，以后有缘再补充吧，累了☺

Clairesean
关注
  • 5
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Cesium-开发环境配置（处处踩坑解决版）
weixin_48438410的博客
08-02 351
步骤： 鼠标右击【node_global】的文件夹，点击【属性】，再点击【安全】，再点击【编辑】，将权限都勾上，随即点击【确定】即可，【node_cache】步骤同理。1.步骤四开始前，首先确定自己是使用管理员身份运行的cmd窗口，进行命令行输入的；其次，修改一下【node_global】和【node_cache]的权限。2.步骤四，全局安装一个最常用的 express 模块进行测试的命令，换成 npm install -g express。测试是否成功，需要重新打开命令提示符窗口，再输入测试命令。
cesium开发环境部署 - 副本.docx
09-11
日常学习cesium笔记之一，cesium开发环境部署，包括tomcat环境部署，cesium环境部署，jdk环境安装等；借鉴他人心得，做好自己开发记录笔记，以备后查。
vite+vue集成cesium
最新发布
Within的博客
07-01 409
1、创建项目、选择框架vue+js。2、进入项目安装依赖。3、安装cesium及插件。4、修改vite-config.js。5、删除style.css,修改App.vue。
Cesium02-Cesium环境搭建
m0_56492004的博客
03-10 729
Cesium需要在Node.js环境下运行，Node.js是JavaScript运行时的环境，Cesium是基于JavaScript的开源三维GIS框架。
Cesium学习一：开发环境搭建
小何又沐风的博客
08-10 1346
webgis引擎cesium的学习记录
Cesium 学习记录（1） 搭建Cesium开发环境
第一千行代码的博客
01-03 1020
    最近导师接了一个需要web gis开发的项目，我就临时上阵啦~由于有java web开发的经验，就选择了js开源框架Cesium         由于项目还有其他web开发模块，就使用eclipse作为IDE，这一系列就记录我的Cesium学习过程吧~         这个项目的需求方要求不是很多，所以我可能不会对Cesium进行深入的剖析和研究，但是会尽量站在初学者的角度，将我学习的...
cesium 入门学习之二：搭建cesium开发环境
zcylyzhi4的博客
01-29 570
1 、读入数据 新建文件夹cesium_test 把上一节cesium目录下的Build文件夹拷贝到cesium_test文件夹中 把上一节cesium，Apps目录下的HelloWorld.html 修改HelloWorld.html中js和css的引用路径 2 、全局安装http-server 直接在浏览器打开cesium_test目录下的HelloWorld.html文件，是会报错的；这是因为cesium无法直接在浏览器上运行，它需要依赖服务器，本人选择node.js的http-server库作
CESIUM开发基础培训(cesiumlab提供)
05-31
2. **开发环境搭建** - **依赖项**：需要Cesium 1.45版本、Node.js、Chrome浏览器以及IDE如Sublime。 - **首次运行**：解压源码包，通过命令行运行`npm install`，然后`node server.js`启动服务。 - **最小开发...
Cesium开发.pdf
08-11
Cesium开发详细资料
cesium使用webpack搭建react项目
10-08
本文将详细讲解如何使用Webpack来搭建一个基于React的Cesium项目。 首先，我们需要安装必要的依赖。在命令行中，确保已经安装了Node.js和npm（Node包管理器），然后创建一个新的项目目录并进入该目录： ``` mkdir ...
Cesium 几种基本的墙材质效果及墙绘制封装
04-10
在本文中，我们将深入探讨Cesium中的几种基本的墙材质效果以及如何进行墙绘制的封装。Cesium是一个强大的开源JavaScript库，专为构建交互式的3D地球应用而设计。它利用WebGL技术来呈现高精度的3D地理空间数据，为...
cesium全球高程、坡度、坡向及等高线功能实现
10-24
内含全球高程、坡度、坡向及等高线功能的实现，以及等高线间距和线宽的调节和等高线颜色的切换。需要自行配置cesium环境，修改js引用位置即可运行。
Cesium开发---1、环境配置
很厉害的博客
12-25 299
1、克隆源码 git clonehttps://github.com/CesiumGS/cesium.git 2、源码目录 3、将源码发布至iis、tomcat或者其他Web服务器 但是个人建议使用node的http-server来自启动一个web服务。命令 : npm install http-server; hs -p 8801 结果： 4、浏览器可输入http://127.0.0.1:8801地址访问cesium的api和实例程序 ...
01 Cesium—环境搭建
初八
03-22 2152
文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配 验证浏览器 Cesium 需要浏览器支持 WebGL，可以通过访问CesiumJS 官网，能看到正常显示基本上就能测试自己的浏览器是否支持 Cesium，这里强烈推荐使用 Chrome 浏览器。 选择IDE 官网中写到： If you’re already a seasoned developer, you most likely have a favorite editor or development enviro..
【Cesium环境搭建，【一篇文章搞懂
weixin_57992300的博客
04-08 1051
为了做好运维面试路上的助攻手，特整理了上百道。
【GIS】cesium学习（二）快速搭建环境运行
xmzmqx的博客
07-08 202
1、准备 VSCode：https://vscode.en.softonic.com/ Cesium-1.71.zip：官网下载 或者https://download.csdn.net/download/xmzmqx/12585173 2、创建文件夹 （1）创建cesium-demo文件夹 （2）把Build文件夹复制到此文件夹下 （3）把Apps下的HelloWorld.html复制到此文件夹下 （4）编辑HelloWorld.html的Cesium.js路径和widgets.css路径 .
【Cesium 编程第一篇】概述、环境搭建、界面介绍
热门推荐
前端知识分享喵
04-09 1万+
Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。Cesium 使用 WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebG
Cesium开发环境搭建
smile_coder_life的博客
10-21 1356
一、Cesium简介 Cesium是一个跨平台、跨浏览器的展示三维地球和地图的Javascript库，Cesium来使用webgl进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持webgl，Cesium是基于Apache2.0许可的开源程序，它可以免费的用于商业和非商业用途。 二、Cesium环境搭建 可以使用tomcat，node.js，IIS，Apache，Nginx，本人使用的是node.js 2.1 node安装 node.js安装包及源码下载地址：https://nodejs.org
webpack快速上手之搭建cesium三维地球环境
~~~
11-20 2619
CesiumJS是目前主流的一款三维地图框架，是一个跨平台、跨浏览器的展示三维地球和地图的JavaScript库，通过WebGL技术实现图形的硬件加速，不需要任何插件支持。Webpack是目前最流行的前端构建工具，可以让开发更加高效。本文就来分享一下如何使用webpack搭建Cesium三维地球环境。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值