Cesium.js三维地图的实现（依托天地图CDN文件）

本文主要是介绍Cesium.js三维地图的实现（依托天地图CDN文件），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

零、技术选型：

Vue2、VueCli5、天地图、Cesium.js

一、通过天地图官网案例实现

需要引入天地图官方提供的CDN链接访问Cesium.js相关文件

相关文件：

https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js

https://api.tianditu.gov.cn/cdn/plugins/cesium/Cesium_ext_min.js

https://api.tianditu.gov.cn/cdn/plugins/cesium/long.min.js

https://api.tianditu.gov.cn/cdn/plugins/cesium/bytebuffer.min.js

https://api.tianditu.gov.cn/cdn/plugins/cesium/protobuf.min.js

https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Widgets/widgets.css

public/index.html

// 引入相关文件
<script src="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js" type="text/javascript" cesium="true" ></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/Cesium_ext_min.js" type="text/javascript" cesium="true" ></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/long.min.js" type="text/javascript" cesium="true" ></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/bytebuffer.min.js" type="text/javascript" cesium="true" ></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/protobuf.min.js" type="text/javascript" cesium="true" ></script>
<link href="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Widgets/widgets.css" rel="stylesheet" cesium="true" >

接下来在展示页加载Cesium三维地图

<template><div id="cesiumContainer"></div>
</template><script>
export default {data() {return { viewer: null, };},mounted() {this.initializeCesium();},methods: {initializeCesium() {// 使用Cesium.Map()方法创建实例this.viewer = new Cesium.Map("cesiumContainer", {});},},
};
</script>
<style scoped> #cesiumContainer { width: 100%; height: 100vh; /* 调整高度以适应您的布局 */ } </style>

效果图：

此时的三维地图，因为没有叠加影像服务，所以只是初始化一个球体，无法具体查看地图细节。

原本尝试将这些文件保存在vueCli脚手架本地的public的文件夹里，在index.html中引入这些本地文件，
不巧的是，这些CDN链接的文件夹中有一些线上CDN文件需要引用的文件，
也就是该CDN链接的文件中的代码引用了服务器中文件夹中的其他文件，
直接下载引用CDN链接的文件，将会报错，找不到某某对应文件