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

项目作用

咱们今日要实现的是一个途径规划的功能，有两个输入框。输入起点结尾，然后查询，得到规划的途径，作用如下：

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

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

咱们会用到以下库：

  • 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：

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

注册高德地图API

记住挑选Web服务，里边是包括地舆编码api的，然后会给你个key

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

注册百度地图API

注意下挑选服务端就行，里边服务包括了途径规划，之所以用百度而不必高德是由于，高德的途径规划回来的没有经纬度，后边就没办法绘制线段了。

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

代码时刻

1. 项目结构：

一个Demo.html文件和public文件夹（里边放置cesium下载的内容：）

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

下载cesium库Downloads – Cesium，并放在public文件夹中

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

2. Html引用咱们文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
<!-- 引进jquery、cesium、axios、vue. -->
  <script src="public/Cesium-1.100/Build/Cesium/Cesium.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  <style>
<!-- 引进cesium的css文件. -->
    @import url(public/Cesium-1.100/Build/Cesium/Widgets/widgets.css);
    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #input1 {
      position: absolute;
      top: 10px;
      left: 10px;
    }
    #input2 {
      position: absolute;
      top: 10px;
      left: 200px;
    }
    #navibutton {
      position: absolute;
      top: 10px;
      left: 400px;
    }
  </style>
</head>
<body>
<!-- id为app的div作为vue可操作的容器. -->
  <div id="app">
<!-- id为cesiumContainer的div作为地图的容器. -->
    <div id="cesiumContainer"></div>
<!-- 在vue中经过@click给按钮绑定点击事件函数. -->
    <button id="navibutton" @click="search">导航</button>
<!-- 在vue中经过v-model给输入框绑定呼应式的变量，这个变量在data里申明. -->
    <input id="input1" v-model="input1" placeholder="请输入起点地址称号">
    <input id="input2" v-model="input2" placeholder="请输入结尾地址称号">
  </div>
</body>
</html>

3. 运用vue管理页面

咱们看看这段代码，首先咱们经过解析赋值，从vue中获取了createApp函数，这个函数是承载了所有咱们后边的操作，并经过mount绑定了id为app的元素，由于要做到呼应式，其实vue是经过虚拟dom来对app元素里边的内容进行操作，比如呼应式更新咱们的input，新建元素等等。

    const { createApp } = Vue
    var viewer,
    cesiumKey = '这儿写你自己恳求的token',
    aMapKey = '这儿写你自己恳求的key'',
    baiduKey = '这儿写你自己恳求的key'
    createApp({
      data() {
        return {
          input1: '北京',
          input2: '上海',
        }
      },
    }).mount('#app')

在vue中，咱们所有的函数都写在methods里边，如下所示：

咱们写了一个createMap函数，初始化了一个cesium地图，并在mounted里边用this.createMap()调用，由于vue的生命周期mounted里才会获取到dom，更多能够去了解一下vue的生命周期。

    createApp({
      data() {
        return {
          input1: '北京',
          input2: '上海',
        }
      },
      methods: {
        createMap() {
          Cesium.Ion.defaultAccessToken = cesiumKey;
	// 传入id，初始化地图
          viewer = new Cesium.Viewer('cesiumContainer', {
            infoBox: false,
            imageryProvider: 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} ", })
          });
          viewer.bottomContainer.style.display = "none";//躲藏bottomContainer
          var imageList = viewer.baseLayerPicker.viewModel.imageryProviderViewModels;
          //运用第4个（索引为3,内容为ESRI世界印象）imageryProvider作为默许的地形数据提供者
          //以免运用默许的BING服务，有时刷不出图像的情况
          viewer.baseLayerPicker.viewModel.selectedImagery = imageList[3];
          //参加中文注记
          //增加一个图层:天地图全球印象中文注记服务
          var imageLabelCn = new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
            url: 'http://t0.tianditu.com/cia_w/wmts?tk=a2ca005a710864da5d797e35e0f45b3b',
            layer: 'cia',
            style: 'default',
            format: 'tiles',
            tileMatrixSetID: 'w',
            maximumLevel: 18
          }));
          viewer.scene.imageryLayers.add(imageLabelCn);
          viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(110, 30, 15000000.0), // 设置方位
            orientation: {
              heading: Cesium.Math.toRadians(0.0), // 方向
              pitch: Cesium.Math.toRadians(-90.0),// 歪斜视点
              roll: 0
            }
          });
        },
      mounted() {
        this.createMap()
      },
    }).mount('#app')

4. 地舆编码

运用axios.js恳求高德地图的地舆编码，获取文本方位的经纬度坐标

        async getAddress(loc) {
          const response = await axios.get(`https://restapi.amap.com/v3/geocode/geo?address=${loc}&key=${aMapKey}`)
          return response.data.geocodes[0].location
        },
        async getRoad(loc, loc2) {
          const response = await axios.get(`https://restapi.amap.com/v3/direction/driving?origin=${loc}&destination=${loc2}&key=${aMapKey}`)
          return response
        },

5. 途径规划

getJsonpPosition函数是依据起点结尾的经纬度进行途径规划，并以jsonp的格式回来，这种方法能够解决百度地图api跨域的问题

然后当点击按钮的时候会调用search函数，获取input的值，然后地舆编码变成经纬度，再调用getJsonpPosition获取到线段的经纬度数组，最后用createpolyline绘制途径。


        getJsonpPosition(start, end) {
          $.ajax(
            {
              url: `https://api.map.baidu.com/direction/v2/driving?origin=${start}&destination=${end}&ak=${baiduKey}`,//GET恳求
              type: "get",
              dataType: "jsonp",
              async: false,
              jsonp: "callback",//传递给恳求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默许为:callback)
              success: (response) => {
                console.log(response);
                let resArr = []
                if (response.status == 0) {
                  const res = response.result.routes[0].steps.map((item) => {
                    const stringArr = item.path.split(';')
                    stringArr.map((x) => {
                      numArr = x.split(',')
                      resArr.push(...numArr)
                    })
                  })
                  resArr = resArr.map((item) => {
                    return Number(item)
                  })
                  console.log(resArr)
                  this.createpolyline(resArr, viewer)
                }
              }
            }
          )
        },
        async search() {
          console.log(this.input1, this.input2,)
          if (this.input1 == '' || this.input2 == '') {
            alert('输入框不能为空！')
            return
          }
          const data = await this.getAddress(this.input1)
          const data2 = await this.getAddress(this.input2)
          const data_1 = data.split(',')
          const data_2 = data2.split(',')
          data_1.reverse()
          const data_string1 = data_1.join(',')
          data_2.reverse()
          const data_string2 = data_2.join(',')
          console.log(data_string1, data_string2,)
          this.getJsonpPosition(data_string1, data_string2)
        },
        createpolyline(positons, viewer, color = "#ff0") {
          const polyline = viewer.entities.add({
            polyline: {
              positions: Cesium.Cartesian3.fromDegreesArray(positons),
              clampToGround: true,
              width: 6,
              material: Cesium.Color.fromCssColorString(color),
              clampToGround: true
            }
          });
	// 视图定位到线段
          viewer.flyTo(polyline)
          return polyline;
        },

总结

这个项目其实还有许多完善的地方，比如点击按钮发送恳求有一段时刻，应该加一个loading的动效，界面过于朴素等等。

代码我现已上传到Gitte：gitee.com/z129812/ces…

这儿是GIS宇宙咱们下期再见