一溺拱、cesium 基本了解
cesium 是一個跨平臺讯嫂、跨瀏覽器的展示三維地球和地圖的開源 JavaScript 庫谬盐。
二氯材、創(chuàng)建賬戶
- 注冊一個免費的 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 需要在你的服務(wù)器上托管一些靜態(tài)文件,比如 web worker 和 SVG 圖標。需要將下面四個目錄作為靜態(tài)文件提供：
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/下。
五碍讯、使用
- 創(chuàng)建一個 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
創(chuàng)建 viewer 的時候加入額外的參數(shù)
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/
