Cesium+Vue实战教程——地图导航

Hello，大家好，这里是在宿舍呆着，避免成为小阳人的GIS宇宙。要说WebGIS比较火的库当初Cesium.js了，基于二维三维地图展示，结合Threejs可以做一些炫酷的特效，常用于智慧城市比如智慧水利、智慧政务等等啊，经常是搭配大屏可视化一起来做，本期呢就带着大家从0开始做一个Cesium的小项目

项目效果

我们今天要实现的是一个路径规划的功能，有两个输入框。输入起点终点，然后查询，得到规划的路径，效果如下：

我们会用到以下库：

• Axios：用于发送请求，请求高德地图的地理编码API* Jquery：也用于发送请求* Cesium：地图框架* Vue：前端框架前期准备

---

路径规划目前我们没有路网数据，所以自己做不了（后面可以出一期），因此我们可以请求百度地图的api，但前提是我们有起点和终点的经纬度，没有人会用经纬度来导航吧？因此我们还需要进行地理编码，把中文转化具体的地理位置（经纬度），这里我们用了高德的api，最后我们地图需要切片数据，默认会用Cesium自带的资源，因此也要注册一个cesium的账号，来获取token，如果用了自己的底图资源也可不用，为了演示的方便，我们还是申请一下，因为cesium还是自带了很多的资源，便于后期的学习。

1.注册Cesium.ion获取token
2.注册高德地图Api，获取key
3.注册百度地图Api，获取key

注册cesium ion

Access Tokens | Cesium ion，注册后获取token：

注册高德地图API

记得选择Web服务，里面是包括地理编码api的，然后会给你个key

注册百度地图API

注意下选择服务端就行，里面服务包括了路径规划，之所以用百度而不用高德是因为，高德的路径规划返回的没有经纬度，后面就没办法绘制线段了。

代码时间

1. 项目结