// 初始化cesium地圖 JS文件
// 首先獲取Cesium API
const Cesium = window.Cesium;
let viewer = null;
/**
 * 初始化地球視圖函數(shù)
 */
function initCesiumMap(dom) {
  // 配置cesium專屬Access Tokens,就是cesium的訪問(wèn)令牌，每一個(gè)使用cesium的用戶都需要自己注冊(cè)，然后獲取自己的Access Tokens；
  // Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'
  viewer = new Cesium.Viewer(dom, {
    mapProjection: new Cesium.WebMercatorProjection(),// 配置 MapProjection 為 WebMercatorProjection，這是 EPSG:3857 所對(duì)應(yīng)的投影
    animation: false, // 是否顯示動(dòng)畫控件
    baseLayerPicker: false, // 是否顯示圖層選擇控件
    imageryProvider:false,//  取消默認(rèn)圖像圖層
    vrButton: false, // 是否顯示VR控件
    geocoder: false, // 是否顯示地名查找控件
    timeline: false, // 是否顯示時(shí)間線控件
    sceneModePicker: true, // 是否顯示投影方式控件 2d 3d
    navigationHelpButton: false, // 是否顯示幫助信息控件
    navigationInstructionsInitiallyVisible: true, // 幫助按鈕，初始化的時(shí)候是否展開(kāi)
    infoBox: false, // 是否顯示點(diǎn)擊要素之后顯示的信息
    fullscreenButton: true, // 是否顯示全屏按鈕
    selectionIndicator: true, // 是否顯示選中指示框
    homeButton: true, // 是否顯示返回主視角控件
    scene3DOnly: false, // 如果設(shè)置為true，則所有幾何圖形以3D模式繪制以節(jié)約GPU資源
    // terrainProvider: new Cesium.EllipsoidTerrainProvider({}) // 不顯示地形
  })

  // 定義home按鈕的 相機(jī)位置
  viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
    let cameraData ={
      latitude:15.350368311878848,
      longitude:110.15845095152412,
      height :343708.47910411394,
      heading:359.1554378117112,
      pitch:-35.66054267553938,
      roll:359.98793851701635,
    }
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(cameraData.longitude, cameraData.latitude, cameraData.height),
      orientation: {
        heading: Cesium.Math.toRadians(cameraData.heading),
        pitch: Cesium.Math.toRadians(cameraData.pitch),
        roll: Cesium.Math.toRadians(cameraData.roll)
      },
      duration: 2 // 飛行持續(xù)時(shí)間（秒）
    });

    // 阻止默認(rèn)的行為
    commandInfo.cancel = true;
  });

  // 去掉logo
  viewer.cesiumWidget.creditContainer['style']['display'] = "none";

}
// 導(dǎo)出
export { Cesium, viewer, initCesiumMap };

<template>
  <div>
    <div class="map-container" id="map-container">
    </div>

    <div style="position: absolute;left: 20px;top:20px">
      <el-button @click="initMap">initMap</el-button>
      <el-button @click="addXyzLayerA">addXyzLayerA</el-button>
      <el-button @click="addXyzLayerB">addXyzLayerB</el-button>
      <el-button @click="removeLayerByCodeStart">removeLayerByCode</el-button>
      <el-button @click="getCameraData">getCameraData</el-button>
      <el-button @click="cameraFlyToA">cameraFlyToA</el-button>
      <el-button @click="cameraSetViewA">cameraSetViewA</el-button>
    </div>
  </div>
</template>

<script>
import {initCesiumMap, viewer, Cesium} from './getCesium.js'

export default {
  name: 'cesium-page',
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    initMap() {
      initCesiumMap('map-container')
    },
    addXyzLayerA() {
      let imageryProvider = new Cesium.UrlTemplateImageryProvider({
        "url": 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
      })
      let layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
      layer.code = 'layer001'
    },
    addXyzLayerB() {
      let imageryProvider = new Cesium.UrlTemplateImageryProvider({
        "url": 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
      })
      let layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
      layer.code = 'layer002'
    },
    removeLayerByCodeStart() {
      this.$prompt('請(qǐng)輸入layerCode', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        inputValue: 'layer001'
      }).then(({value}) => {
        this.removeLayerByCode(value)
      }).catch(() => {

      });
    },
    removeLayerByCode(code) {
      let layers = viewer.imageryLayers;
      for (let i = 0; i < layers.length; i++) {
        let layer = layers.get(i);
        if (layer['code'] === code) { // 根據(jù)自定義屬性刪除圖層
          layers.remove(layer);
        }
      }
    },
    getCameraData() {
      let camera = viewer.camera;
      let position = camera.position.clone();
      let cartographic = Cesium.Cartographic.fromCartesian(position);
      let latitude = Cesium.Math.toDegrees(cartographic.latitude);
      let longitude = Cesium.Math.toDegrees(cartographic.longitude);
      let height = cartographic.height;

      let heading = Cesium.Math.toDegrees(camera.heading);
      let pitch = Cesium.Math.toDegrees(camera.pitch);
      let roll = Cesium.Math.toDegrees(camera.roll);

      let cameraData = {
        latitude: latitude,
        longitude: longitude,
        height: height,

        heading: heading,
        pitch: pitch,
        roll: roll
      }

      console.log(JSON.stringify(cameraData, null, 2))

    },
    cameraFlyToA() {
      let cameraData = {
        "latitude": 16.94902871397598,
        "longitude": 110.47916147992255,
        "height": 214282.7089169392,
        "heading": 0,
        "pitch": -35.29190043161959,
        "roll": 0
      }

      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(cameraData.longitude, cameraData.latitude, cameraData.height),
        orientation: {
          heading: Cesium.Math.toRadians(cameraData.heading),
          pitch: Cesium.Math.toRadians(cameraData.pitch),
          roll: Cesium.Math.toRadians(cameraData.roll)
        }
      });
    },
    cameraSetViewA() {
      let cameraData = {
        "latitude": 16.94902871397598,
        "longitude": 110.47916147992255,
        "height": 214282.7089169392,
        "heading": 0,
        "pitch": -35.29190043161959,
        "roll": 0
      }

      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(cameraData.longitude, cameraData.latitude, cameraData.height),
        orientation: {
          heading: Cesium.Math.toRadians(cameraData.heading),
          pitch: Cesium.Math.toRadians(cameraData.pitch),
          roll: Cesium.Math.toRadians(cameraData.roll)
        }
      });
    }
    // todo wms圖層
    // todo 矢量圖層
    // todo 圖層點(diǎn)擊 獲取要素信息
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  width: 100vw;
  height: 100vh;
}
</style>