目錄

1、將下載的Cesium包移動至public下

2、首先需要將Cesium.js和widgets.css文件引入到

3、 新建Cesium.js文件，方便在全局使用

4、新建cesium.vue文件，展示三維地圖

---

1、將下載的Cesium包移動至public下?

npm install cesium后???????

2、首先需要將Cesium.js和widgets.css文件引入到

/*?widgets.css */

<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">

/*?Cesium.js */

<script type="text/javascript" src="./Cesium/Cesium.js"></script>

3、 新建Cesium.js文件，方便在全局使用

首先獲取到Cesium的token；沒有的話先創建

獲取Cesium的tokenhttps://ion.cesium.com/

加載天地圖需要獲取天地圖Key天地圖 登錄https://console.tianditu.gov.cn/api/key

cesium.js文件

Cesium.Ion.defaultAccessToken = "自己的token"
// Cesium.Camera.DEFAULT_VIEW_FACTOR = 0 //攝像機視口遠近參數，可設置地球大小,大于零會使它遠離范圍，而小于零會使它接近范圍
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90,-20,110,90
); //設置默認顯示中國正上方// 加載天地圖需要天地圖的Key
const TDTTK = "自己天地圖的Key";let viewer;export function initCesiumMap(target) {// const Cartesian = Cesium.Cartesian3.fromDegrees(0, 0, 500.0)viewer = new Cesium.Viewer(target, {animation: false, // 是否顯示動畫控件shouldAnimate: false, // 是否初始時刻運動homeButton: false, // 是否顯示Home按鈕fullscreenButton: false, // 是否顯示全屏按鈕baseLayerPicker: false, // 是否顯示圖層選擇控件 去掉自帶的圖層選擇器geocoder: false, // 是否顯示地名查找控件,設置為true，則無法查詢timeline: false, // 是否顯示時間線控件sceneModePicker: false, // 是否顯示投影方式控件 三維/二維navigationHelpButton: false, // 是否顯示幫助信息控件infoBox: false, // 是否顯示點擊要素之后顯示的信息 信息框小部件baseLayerPicker: false, // 不顯示底圖選擇器，如果你只想用默認底圖的話requestRenderMode: false, // true啟用請求渲染模式:更新實體需拖動地圖 視圖才更新[true 加載完entity后requestRender一下]scene3DOnly: false, // 每個幾何實例將只能以3D渲染以節省GPU內存 如果設置為true，則所有幾何圖形以3D模式繪制以節約GPU資源sceneMode: 3, // 初始場景模式 1 2D模式 2 2D循環模式 3 3D模式  Cesium.SceneModescene3DOnly: true, // 僅顯示3D場景fullscreenElement: document.body, // 全屏時渲染的HTML元素selectionIndicator: false, // 是否顯示選取指示器組件});viewer._cesiumWidget._creditContainer.style.display = "none"; // 隱藏版權信息const imageLayers = viewer.scene.imageryLayers;imageLayers.remove(imageLayers.get(0)); //移除默認影像圖層// 設置中心點為特定的經緯度（例如：經度116.38，緯度39.9）// viewer.camera.setView({//     destination: Cesium.Rectangle.fromDegrees(90, -20, 110, 90)// });/** 天地圖*/// // 天地圖影像// const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({//   url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,//   layer: "tdt",//   style: "default",//   format: "image/jpeg",//   tileMatrixSetID: "w",//   maximumLevel: 18,//   show: false,// });// viewer.imageryLayers.addImageryProvider(tdtLayer);// // 天地圖注記// const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({//   url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,//   layer: "tdtAnno",//   style: "default",//   format: "image/jpeg",//   tileMatrixSetID: "w",//   maximumLevel: 18,//   show: false,// });// viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);/** 高德地圖*///高德矢量圖// let tdtLayer1 = new Cesium.UrlTemplateImageryProvider({// 	url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",// 	minimumLevel: 3,// 	maximumLevel: 18// })// viewer.imageryLayers.addImageryProvider(tdtLayer1)//高德影像let tdtLayer2 = new Cesium.UrlTemplateImageryProvider({url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",minimumLevel: 3,maximumLevel: 18,});viewer.imageryLayers.addImageryProvider(tdtLayer2);//高德路網中文注記let tdtLayer = new Cesium.UrlTemplateImageryProvider({url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",minimumLevel: 3,maximumLevel: 18,});viewer.imageryLayers.addImageryProvider(tdtLayer);
}export function getViewerMap() {return viewer;
}

4、新建cesium.vue文件，展示三維地圖

<template><div id="cesiumContainer" class="cesiumContainer"></div>
</template><script>
// 剛才新建的Cesium.js文件
import * as viewerMap from "../components/cesium";
export default {data() {return {viewer: null,};},mounted() {this.$nextTick(() => {this.initCesium("cesiumContainer");});},methods: {initCesium() {viewerMap.initCesiumMap("cesiumContainer");// ==================== 使用 Entity API 添加點線面 ====================// 添加點// viewerMap.addEntityPoint()// 添加線// viewerMap.addEntityLine()// 添加半透明多邊形// viewerMap.addEntityPolygonDiaphaneity()// 添加紅色多邊形（帶洞）// viewerMap.addEntityPolygon()// ==================== 使用 Primitive API 添加點線面 ====================// 添加點// viewerMap.addPrimitivePoint()// 添加線// viewerMap.addPrimitiveLine()// 添加面// viewerMap.addPrimitivePolygon()//   添加圖片標記點// viewerMap.addImgPoint()//   添加glb模型//   viewerMap.addGLB()// 添加使用glb模型進行實時軌跡// viewerMap.addGlbTrajectory()// 添加使用圖片進行實時軌跡//   viewerMap.addImgTrajectory();this.viewer = viewerMap.getViewerMap();},clear(){viewerMap.clearIntervalEvent();}},beforeUnmount() {this.clear()},
};
</script><style lang="scss">
.cesiumContainer {width: 100%;height: 100%;background-color: black;
}
</style>

這樣就可以完整展示出三維地球?