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

    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')

        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;
        },