本文详细介绍了如何使用Cesium地图库，包括在官网获取开始指南、CDN引入和本地Webpack配置。提供了创建账户、申请Token、两种引入Cesium的方法，并解析了相关代码。此外，还分享了在Webpack中配置Cesium的步骤，以及解决CSS加载问题的技巧。文章最后给出了项目源代码链接，并做了简单总结。
首先需要进入官网，找到Get Started.随后进入官网的快速开始，进行一个简单的demo书写。 Cesium官网学习及API链接
1.创建一个账户和申请一个Token
进入任何网站学习都需要账户,调用相关开源库则需要token避免被非法调用。
2.两种导入方法
2.1方法一.CDN引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.83/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 = 'your token';
// 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>
官网复制一下代码，然后将自己的token放入即可运行。
2.2方法二.本地配置(使用webpack)(可能有点麻烦)
官网给出的是这样配置的:
如果你是用以下打包工具Webpack,Parcel(openLayers官网也是用的这个)或者是Rollup(对于Cesium的调用资源来说,这个打包工具也足够了),你可以使用以下命令进行安装：npm install cesium
由于是本地配置，运行方法由于涉及到跨域(域名、端口号、协议有一个不同就是跨域)，我采用的是构建小型服务器方法然后进行运行,其他两种方法在这里无法行得通(jsonp和后台编写允许跨域协议头,这样也容易不安全)。
首先打开命令行工具(win+r->cmd)通过cd切换到你需要的目录下,使用命令mkdir Cesium_Study新建一个文件夹Cesium_Study，然后cd ./Cesium_Study,然后npm init -y,创建package.json文件。随后再使用npm i -D webpack和npm install cesium安装webpack和cesium.
最后package.json文件如下:
{
"name": "Cesium_Study",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.42.0"
},
"dependencies": {
"cesium": "^1.83.0"
}
}
到此基本的已经弄完了，接下来开始webpack配置，因为我们编写Cesium代码的时候基本使用的是js和css文件(less,图片和其他资源我在后序学习章节中会进行逐一配置，入门只是演示生成效果)。
在Cesium_Stuudy文件夹目录下新建webpack.config.js文件，放入一下代码(我用的是webpack5.42.0):
const {
resolve
} = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// 如果你是开发的话用mode=development 上线的话使用mode=production
mode: 'development',
// 自己根据自己的js所在目录修改 ./是此文件所在目录
entry: './src/index.js',
output: {
filename: 'build.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: ['url-loader']
}],
},
plugins: [
new HtmlWebpackPlugin({
// 自己根据自己的html所在目录修改 ./是此文件所在目录
template: './src/index.html'
}),
new CopyWebpackPlugin({
patterns: [{
from: 'node_modules/cesium/Build/Cesium/Workers',
to: 'Workers'
},
{
from: 'node_modules/cesium/Build/Cesium/ThirdParty',
to: 'ThirdParty'
},
{
from: 'node_modules/cesium/Build/Cesium/Assets',
to: 'Assets'
},
{
from: 'node_modules/cesium/Build/Cesium/Widgets',
to: 'Widgets'
}
],
}),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
],
devServer: {
contentBase:resolve(__dirname, "build")
// compress:true,
// port:3000,
// open:true
},
};
配置好后，在Cesium_Study目录下命令行里输入npm i -D css-loader style-loader html-webpack-plugin webpack-dev-server webpack-cli url-loader html-loade安装一下库。
然后修改package.json文件成以下(就是把scripts里面内容替换即可):
{
"name": "Cesium_Study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --config webpack.config.js --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^5.2.6",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"style-loader": "^3.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.42.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"cesium": "^1.83.0"
}
}
最后输入npm start即可运行成功。
3.代码介绍
关于代码部分，html文件没什么好介绍的,就一个div标签。
index.js文件:
import * as Cesium from 'cesium';
import "../node_modules/cesium/Build/Cesium/Widgets/widgets.css";
// 输入你的Token
Cesium.Ion.defaultAccessToken = 'your token';
//用html id为cesiumContainer的div标签初始化Cesium视图
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
//添加Cesium 开源地图建筑物，这是一个全球的3D建筑物图层
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
// Fly the camera to San Francisco at the given longitude, latitude, and height.
//构建一个相机，这个相机被给的目的地是旧金山,又设置了一个orientation属性,
//按照API说法,heading是朝向,pitch按照API的说法looking down就是相机视角(也就是俯视图)
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),
}
});
关于整个项目文件我上传到了码云上,链接如下:代码链接
总结:
1.关于index.js中widgets.css导入无法找到编译，暂时没有好的解决方法,我采用的是将'cesium/Build/Cesium/Widgets/widgets.css'改为'../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
2.编译工具大都大同小异，用处不同而已，可以选取自己感兴趣的编译工具进行编译,我推荐的是webpack。如果是Vue项目的话，webpack用的比较多，vite也还好。
扫一扫
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
