一、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_URLCesiumJS 需要在你的服务器上托管一些静态文件,比如 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 <div style={{ width: 1000, height: 600 }} id="cesiumContainer" />;
}
- 引用并初始化
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/
