一、cesium 基本了解
cesium 是一个跨平台、跨浏览器的展示三维地球和地图的开源 JavaScript 库。
二、创建账户
- 注册一个免费的 cesium 账户,以便于获取 cesium 地图资源
- 登录并获取 token,拷贝下 token,待使用
三、安装
npm install cesium --save
四、webpack 配置
- 配置
@open-wc/webpack-import-meta-loader
cesium 中使用到了 import.meta,因此在 webpack 中需要配置该 loader。
- 安装
npm install @open-wc/webpack-import-meta-loader --save-dev
- 配置
rules: [
{
test: /\.js$/,
include: /(cesium)/,
use: {
loader: '@open-wc/webpack-import-meta-loader',
}
}
]
- 配置
CESIUM_BASE_URL
CesiumJS 需要在你的服务器上托管一些静态文件,比如 web worker 和 SVG 图标。需要将下面四个目录作为静态文件提供:
node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets
我们使用copy-webpack-plugin
来解决这个问题。
- 安装
npm install copy-webpack-plugin --save-dev
- 配置
const CopyWebpackPlugin = require('copy-webpack-plugin');
...
new CopyWebpackPlugin({
patterns: [
// cesium资源文件
{
from: 'node_modules/cesium/Build/Cesium/Workers',
to: 'static/cesium/Workers',
},
{
from: 'node_modules/cesium/Build/Cesium/ThirdParty',
to: 'static/cesium/ThirdParty',
},
{
from: 'node_modules/cesium/Build/Cesium/Assets',
to: 'static/cesium/Assets',
},
{
from: 'node_modules/cesium/Build/Cesium/Widgets',
to: 'static/cesium/Widgets',
},
]
})
这样,四个文件就会被复制到/static/cesium/
下。
五、使用
- 创建一个 div,id 为
cesiumContainer
render() {
return ;
}
- 引用并初始化
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
window.CESIUM_BASE_URL = '/static/cesium/';
Cesium.Ion.defaultAccessToken = '这里是你之前复制的token';
...
// "cesiumContainer"是需要渲染地图的dom的id.
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
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),
}
});
这时候就能够看到效果了。效果如下:
- 去除不要的功能和 logo
创建 viewer 的时候加入额外的参数
const viewer = new Cesium.Viewer('cesiumContainer', {
infoBox: false, // 是否显示点击元素之后显示的信息
animation: false, // 是否显示动画空间
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示地名查找控件
homeButton: false, // 是否显示home键
navigationHelpButton: false, // 是否显示帮助信息控件
sceneModePicker: false, // 是否显示投影方式
timeline: false, // 是否显示时间线控件
baseLayerPicker: false, // 是否显示图层选择控件
selectionIndicator: false, // 是否显示指示器组件
terrainProvider: Cesium.createWorldTerrain(),
});
viewer._cesiumWidget._innerCreditContainer.style.display = 'none'; // 去除logo信息
参考:
CesiumJS 官方文档:https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/