// 初始化cesium地图 JS文件
// 首先获取Cesium API
const Cesium = window.Cesium;
let viewer = null;
/**
 * 初始化地球视图函数
 */
function initCesiumMap(dom) {
  // 配置cesium专属Access Tokens,就是cesium的访问令牌，每一个使用cesium的用户都需要自己注册，然后获取自己的Access Tokens；
  // Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'
  viewer = new Cesium.Viewer(dom, {
    mapProjection: new Cesium.WebMercatorProjection(),// 配置 MapProjection 为 WebMercatorProjection，这是 EPSG:3857 所对应的投影
    animation: false, // 是否显示动画控件
    baseLayerPicker: false, // 是否显示图层选择控件
    imageryProvider:false,//  取消默认图像图层
    vrButton: false, // 是否显示VR控件
    geocoder: false, // 是否显示地名查找控件
    timeline: false, // 是否显示时间线控件
    sceneModePicker: true, // 是否显示投影方式控件 2d 3d
    navigationHelpButton: false, // 是否显示帮助信息控件
    navigationInstructionsInitiallyVisible: true, // 帮助按钮，初始化的时候是否展开
    infoBox: false, // 是否显示点击要素之后显示的信息
    fullscreenButton: true, // 是否显示全屏按钮
    selectionIndicator: true, // 是否显示选中指示框
    homeButton: true, // 是否显示返回主视角控件
    scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    // terrainProvider: new Cesium.EllipsoidTerrainProvider({}) // 不显示地形
  })

  // 定义home按钮的 相机位置
  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 // 飞行持续时间（秒）
    });

    // 阻止默认的行为
    commandInfo.cancel = true;
  });

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

}
// 导出
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('请输入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) { // 根据自定义属性删除图层
          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 图层点击 获取要素信息
  }
}
</script>

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