文章目录

一：CDN——引入在线的CesiumJS及其样式
二：npm——webpack方式开发
- 1 安装node.js 与 npm
- 2 创建项目工程
- 3 安装和配置webpack
- 4 依次安装loader模块、html-webpack-plugin 插件、webpack-dev-server模块
- 5 引入CesiumJS进行开发
- - 5.1 安装Cesium模块
  - 5.2 修改webpack.config.js，引入cesium模块
  - 5.3 CesiumJS 静态资源管理配置
  - - 5.3.1 安装copy-webpack-plugin插件
    - 5.3.2 将插件配置到webpack.config.js文件
  - 5.4 修改页面代码，加入cesium
三：下载源码进行开发
- 1 下载cesium源码
- 2 安装依赖
- 3 运行项目
- 4 开发自己的cesium页面
四：简化版的源码开发
- 1 创建项目
- 2 运行
- 3 仿照helloworld开发其他页面
五：Vue3组件开发——插件方法
- 1 创建vue工程
- - 1.1 全局安装最新版vue-cli
  - 1.2 创建vue工程
- 2 安装cesium插件
- 3 cesium页面开发
六：vue组件开发——webpack配置文件方式（未完待续...）

一：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 accountCesium.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 CesiumsourcePrefix: ''},amd: {// Enable webpack-friendly use of require in CesiumtoUrlUndefined: 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 CesiumtoUrlUndefined: 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 directorynew 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 assetsCESIUM_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太多解决不完，以后有缘再补充吧，累了☺

Cesium开发环境搭建的几种方法总结相关推荐

Android开发环境搭建及常见问题解决方法
Android开发环境搭建及常见问题解决方法参考文章: (1)Android开发环境搭建及常见问题解决方法 (2)https://www.cnblogs.com/rwxwsblog/p/476978 ...
极海APM微控制器基于IAR开发环境搭建与工程调试配置方法
极海APM微控制器基于IAR开发环境搭建与工程调试配置方法 ✨本篇主要针对基于IAR for ARM版本:V9.30.1环境搭建和工程调试配置过程进行介绍,当然也同样适用于基于ARM架构芯片的开发使用 ...
网络映射环境搭建的3种方法
搭建映射环境的3种方法: 1.用路由器开启映射,来模拟客户场景: 2.通过虚拟机实现: 3.借助办公环境实现: 目录: 应用场景: 环境需求: 有的公司需要在内部部署一套系统,会映射到公网,而不是直接 ...
Android 开发环境搭建与在编译中遇到错误make Error 45解决方法
Android 开发环境搭建一.安装ubuntu 10.10操作系统使用光盘安装,注意分区,分一个swap分区为3G(原则需要与内存一样大,但可以稍微比内存大一点).当时是同事帮我弄的,swap开 ...
python搭建numpy_python开发环境搭建及numpy基本属性-【老鱼学numpy】
目的本节我们将介绍如何搭建python的开发环境以及numpy的基本属性,这样可以检验我们的numpy是否安装正确了. python开发环境的搭建工欲善其事必先利其器,我用得比较顺手的是Intel ...
【游戏开发】基于VS2017的OpenGL开发环境搭建
一.简介最近,马三买了两本有关于"计算机图形学"的书籍,准备在工作之余鼓捣鼓捣图形学和OpenGL编程,提升自己的价值(奔着学完能涨一波工资去的).俗话说得好,"工欲善 ...
hbase开发环境搭建及运行hbase小实例（HBase 0.98.3新api）
问题导读: 1.如何搭建hbase开发环境? 2.HTableDescriptor初始化产生了那些变化? 3.eclipse如何连接hbase集群? hbase开发环境搭建与hadoop开发环境搭建差 ...
Android下NDK开发环境搭建
Android下NDK开发环境搭建 1. AndroidNDK安装与配置 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP部 ...
《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记
最近想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序,所以需要在本地搭建Node.js Web的开发测试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴 ...
webpack 读取文件夹下的文件_TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建...
1.TypeScript完全解读-开发环境搭建初始化项目手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目然后我们的项目 ...

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