最近項目有三維地圖展示需求，甲方提供了三維數據，要求使用Cesium集成。

利用一天時間集中突擊了一下做個筆記，后面再用到的話也好自查。

聲明一下，作者也是最近剛接觸cesium，目前的探索也只是作為初學者一個導引吧，避免少走彎路。不喜勿噴，謝謝。

資源

官網地址：https://cesium.com/platform/
文檔示例很多，API也很全，就是全部英文看起來費勁，建議深度學習可以看看。

GitHub地址：https://github.com/CesiumGS
有幾個JavaScript分類的demo可以看看，因為做vue集成，作者參考了一下：
cesium-webpack-example 這個demo，其它的建議深度學習可以看一下。

Cesium ion

在開始之前先引入個Cesium ion，這是官方提供的一個云服務，用來上傳自己的圖形文件，也提供了幾個資源供大家使用，作者自己寫的demo用的就是官方提供的。

頁面長這個樣子：

有幾個頁簽：

stories

個人理解是一個地圖制作工具，可以根據自己的需求并且加入自己上傳過的資源，制作完成以后可以生成訪問鏈接，具體操作步驟官方有教程： stories生成步驟

我這里簡單做了一個，保存以后可以看到生成了id和訪問地址。不過這里有個問題，在自己項目中本地打開頁面會跨域錯誤，還需要自行配置代理。

My Assets

這里是用戶上傳資源的地方，可以上傳3dtiles和其它類型文件，同時這里上傳的資源可以在前面的stories里面使用的。

下圖我并沒有上傳我的資源，這些事cesium官方提供的幾個地圖，做demo的時候會用到其中的資源。

Access Token

作為認證使用，以便自己上傳的資源不被他人盜用，很關鍵，在使用云平臺資源的時候代碼中會用到。

CesiumJS

介紹完云平臺，下面該進入主題了，CesiumJS的集成。

首先npm安裝插件

npm install cesium

安裝后的package.json文件（目前最新版本1.91.0）

"dependencies": {"cesium": "^1.91.0",}

在頁面中引入組件

import * as Cesium from "cesium"; import "cesium/Build/Cesium/Widgets/widgets.css";

這里我采用全部引入的方式，如果為了避免加載不必要插件可以按需引入，如下：

import { Ion, Viewer, createWorldTerrain, createOsmBuildings, Cartesian3, Math } from "cesium"; import "cesium/Build/Cesium/Widgets/widgets.css";

兩種方式在使用上稍有區別，下面使用第一種方式繼續編寫代碼。

第一步，要使地圖能夠顯示，首先在頁面中添加一個顯示的區域，如下：

<template><div class="map-index"><div id="cesiumContainer" class="cesiumContainer"></div></div> </template>

其中 div 的 id 非常關鍵，下面實例化的時候要用到，這里記得給div設置寬高，以便地圖顯示。

第二步，進行地圖的初始化工作。上面講了因為要用到云平臺的資源，所以要先設置token，然后再初始化地圖。

initCesium() {//設置云平臺 AccessToken ，使用本地3dtiles文件可以不設置Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5MjcxYzM2Yy1mYjQ4LTQ5ZTYtODg3Ny1hN2JjOGIxMjVmYTIiLCJpZCI6NjM1MTYsImlhdCI6MTYyODIxNjcyMX0'//cesiumContainer 即為上一步顯示區域設置的 idvar viewer = new Cesium.Viewer("cesiumContainer", {baseLayerPicker: false, //控制圖層選擇器是否顯示geocoder: false, //控制位置選擇器是否顯示});

第三步，初始化3dtiles文件，使用viewer顯示加載：

//創建實例var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(354307)});// readyPromise，資源加載完成后會 resolved ,此時可以使用viewer加載顯示tileset.readyPromise.then(function (tileset) {viewer.scene.primitives.add(tileset);viewer.zoomTo(tileset,new Cesium.HeadingPitchRange(0.0,-0.5,tileset.boundingSphere.radius * 2.0));}).otherwise(function (error) {console.log(error);});

這里 Cesium.IonResource.fromAssetId(354307) 里的數字id就是前面提到云平臺提供的一個默認的3dtiles數據的id

最終代碼如下

<template><div class="map-index"><div id="cesiumContainer" class="cesiumContainer"></div></div> </template><script> import * as Cesium from "cesium"; import "cesium/Build/Cesium/Widgets/widgets.css"; export default {data() {return {};},mounted() {this.initCesium();},methods: {initCesium() {Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5MjcxYzM2Yy1mYjQ4LTQ5ZTYtODg3Ny1hN2JjOGIxMjVmYTIiLCJpZCI6NjM1MTYsImlhdCI6MTYyODIxNjcyMX0.jWrOsZ95ATIT6rhY2hkx2_9yvZ8FDvpLOpfsuaDyc9Q'var viewer = new Cesium.Viewer("cesiumContainer", {baseLayerPicker: false,geocoder: false,});//初始化資源var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(354307)});//加載資源tileset.readyPromise.then(function (tileset) {viewer.scene.primitives.add(tileset);viewer.zoomTo(tileset,new Cesium.HeadingPitchRange(0.0,-0.5,tileset.boundingSphere.radius * 2.0));}).otherwise(function (error) {console.log(error);});},}, }; </script><style lang="scss" scoped> .map-index {.cesiumContainer {height: 1080px;width: 1920px;} } </style>

運行一下，不出意外，報錯了。

提示找不到 CESIUM_BASE_URL 配置，針對這項配置官方解釋如下：

Configuring CESIUM_BASE_URLCesiumJS requires a few static files to be hosted on your server, like web workers and SVG icons.

說的簡單就是需要找到網站靜態資源，但是有什么用暫時不清楚，具體的配置方式也有說明：

The window.CESIUM_BASE_URL global variable must be set before CesiumJS is imported. It must point to the URL where those four directories are served.For example, if the image at Assets/Images/cesium_credit.png is served with a static/Cesium/ prefix under http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png, then you would set the base URL as follows:window.CESIUM_BASE_URL = '/static/Cesium/';

那這就簡單了，由于我們服務都在根目錄嘛，所以增加了一段代價如下：

window.CESIUM_BASE_URL = "/";

而上面也說明了，這段配置要在 import cesium 之前，所以最終代碼：

<template><div class="map-index"><div id="cesiumContainer" class="cesiumContainer"></div></div> </template><script> window.CESIUM_BASE_URL = "/";import * as Cesium from "cesium"; import "cesium/Build/Cesium/Widgets/widgets.css"; export default {data() {return {};},mounted() {this.initCesium();},methods: {initCesium() {Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5MjcxYzM2Yy1mYjQ4LTQ5ZTYtODg3Ny1hN2JjOGIxMjVmYTIiLCJpZCI6NjM1MTYsImlhdCI6MTYyODIxNjcyMX0.jWrOsZ95ATIT6rhY2hkx2_9yvZ8FDvpLOpfsuaDyc9Q'var viewer = new Cesium.Viewer("cesiumContainer", {baseLayerPicker: false,geocoder: false,});//初始化資源var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(354307)});//加載資源tileset.readyPromise.then(function (tileset) {viewer.scene.primitives.add(tileset);viewer.zoomTo(tileset,new Cesium.HeadingPitchRange(0.0,-0.5,tileset.boundingSphere.radius * 2.0));}).otherwise(function (error) {console.log(error);});},}, }; </script><style lang="scss" scoped> .map-index {.cesiumContainer {height: 1080px;width: 1920px;} } </style>

那么再次運行項目結果：

地圖加載暫時完成，稍后會補充視角控制和扎點的方法。

總結

以上是生活随笔為你收集整理的Vue 第三方集成之 Cesium的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。