Vue3+Cesium，解决无法加载底图

此篇记录首次第一次入坑Ceisum，改了好久的bug，还是得问前辈才能少走几十年弯路（吐血）

1 申请Token

官网-快速学习入门

CesiumJS Quickstart – Cesiumhttps://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

 2 脚手架创建vue文件

清空多余代码，只保留需要的部分，直至运动成功--针对有基础的

确保能将项目运行起来

3 安装Cesium库

npm i cesium

4 引入Cesium库并运行

引入库并配置css文件

import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css' 这个css文件非常重要！！！

 注意此处要线配置token，事关你是否可以正确加载底图

Cesium.Ion.defaultAccessToken =cesiumKey

创建div对象

<template>
	<div id="container"></div>
</template>

加载地球viewer

const viewer = new Cesium.Viewer('container', {
		terrain: Cesium.Terrain.fromWorldTerrain(),
		infoBox: false,
	})

运行结果如下

5 加载天地图

 同样需要申请一个Key，相关底图可以在天地图官网找到（注意瓦片地图的加载）

天地图API (tianditu.gov.cn)http://lbs.tianditu.gov.cn/home.html加载天地图并定位到中国

const webKey = 天地图的KEY
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
				webKey,
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)
// 将三维球定位到中国
	viewer.camera.flyTo({
		destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
		orientation: {
			heading: Cesium.Math.toRadians(348.4202942851978),
			pitch: Cesium.Math.toRadians(-89.74026687972041),
			roll: Cesium.Math.toRadians(0),
		},
		complete: function callback() {
			// 定位完成之后的回调函数
		},
	})

运行结果

 6 加载OSM建筑图层

加载建筑模型并定位到指定位置

// Add Cesium OSM Buildings, a global 3D buildings layer.
	const buildingTileset = await Cesium.createOsmBuildingsAsync()
	viewer.scene.primitives.add(buildingTileset)
	// Fly the camera to San Francisco at the given longitude, latitude, and height.
	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),
		},
	})

运行结果如下

7 完整代码

<template>
	<div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

import 'cesium/Build/Cesium/Widgets/widgets.css'

Cesium.Ion.defaultAccessToken = key
onMounted(async () => {
	const viewer = new Cesium.Viewer('container', {
		terrain: Cesium.Terrain.fromWorldTerrain(),
		infoBox: false,
	})

	// const webKey = key
	// viewer.imageryLayers.addImageryProvider(
	// 	new Cesium.WebMapTileServiceImageryProvider({
	// 		url:
	// 			'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
	// 			webKey,
	// 		layer: 'tdtAnnoLayer',
	// 		style: 'default',
	// 		format: 'image/jpeg',
	// 		tileMatrixSetID: 'GoogleMapsCompatible',
	// 		show: false,
	// 	})
	// )
	// // 将三维球定位到中国
	// viewer.camera.flyTo({
	// 	destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
	// 	orientation: {
	// 		heading: Cesium.Math.toRadians(348.4202942851978),
	// 		pitch: Cesium.Math.toRadians(-89.74026687972041),
	// 		roll: Cesium.Math.toRadians(0),
	// 	},
	// 	complete: function callback() {
	// 		// 定位完成之后的回调函数
	// 	},
	// })
	// Add Cesium OSM Buildings, a global 3D buildings layer.
	const buildingTileset = await Cesium.createOsmBuildingsAsync()
	viewer.scene.primitives.add(buildingTileset)
	// Fly the camera to San Francisco at the given longitude, latitude, and height.
	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),
		},
	})
})
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}
#container {
	height: 100%;
	width: 100%;
}
</style>

8 小总结 

7.1 安装插件

通过报错提示，安装了以下js库

npm i node-polyfill-webpack-plugin
npm i browserify-zlib
npm i stream-http
npm i https-browserify
npm i stream-browserify

在配置文件vue.config.js里修改，代码如下

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: true,
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
    resolve: {
      fallback: {
        zlib: require.resolve("browserify-zlib"),
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        stream: require.resolve("stream-browserify"),
      },
    },
  },
});

 7.2 无法加载底图

修改完bug后，项目运行成功，但无法正常加载底图，只能看到星空，可能存在如下情况：

• 可能是没有添加Cesium的token

Cesium.Ion.defaultAccessToken = key

• 可能是你的网络问题，可尝试切换多个底图
• 最后，非常有可能是因为Cesium的样式文件引入错误

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

若存在css文件复制到public下的情况，不能相对路径引入，以下修改完可正常运行。