<template>
  <div class="track3D-container" :id="cId"></div>
</template>

<script>
let viewer = null
export default {
  name: 'cesiumMap',
  props: ['cId'],
  components: {},
  watch: {},
  data() {
    return {}
  },
  computed: {},
  methods: {
    loadMap() {
      // Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZWVjYmI0Mi0wMzk2LTQ2YjMtYjYwOC04MmMyNzEyYjJiOTMiLCJpZCI6MTA0MTAyLCJpYXQiOjE2NjAwMDQ5MjR9.YwCrjFrZrgYYxxxqAXlDWB_eQdmPh8kgj8ZRfLcEOT4';
      viewer = new Cesium.Viewer(this.cId, {
        animation: false, // 隐藏动画控件
        baseLayerPicker: false, // 隐藏图层选择控件
        fullscreenButton: false, // 隐藏全屏按钮
        vrButton: false, // 隐藏VR按钮，默认false
        geocoder: false, // 隐藏地名查找控件
        homeButton: false, // 隐藏Home按钮
        infoBox: false, // 隐藏点击要素之后显示的信息窗口
        sceneModePicker: false, // 隐藏场景模式选择控件
        selectionIndicator: true, // 显示实体对象选择框，默认true
        timeline: true, // 时间线控件
        navigationHelpButton: false, // 隐藏帮助按钮
        scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
        shouldAnimate: true, // 开启动画自动播放
        sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
        requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
        // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
        // maximumRenderTimeChange: Infinity,
        shadows: false,
        // imageryProvider: new Cesium.UrlTemplateImageryProvider({
        //   url: cesium_config.baseMap,
        //   fileExtension: "png"
        // }),
        // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        //   url:
        //       "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/",
        // }),
        // terrainProvider: Cesium.createWorldTerrain(), // 地形
      });

      // tileset三维场景
      // const tileset = new Cesium.Cesium3DTileset({
      //   // url:'http://121.36.99.212:35002/ABCEarth/examples/examples/assets/model/crossroad/dl/tileset.json',
      //   url: 'http://10.102.1.180:9090/1111/tileset.json'
      // });
      // tileset.readyPromise.then((a) => {
      //     console.log('a', a)
      //     const position = Cesium.Cartesian3.fromDegrees(112.968200, 28.189658, 0)// 给的坐标 位置不对 需要转换？
      //     // const position = Cesium.Cartesian3.fromDegrees(112.929960602617,28.2186568459113, 0)
      //
      //
      //     /*
      //     const heading = 45 // 绕X轴角度
      //     const A = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(heading))
      //     const rotationX = Cesium.Matrix4.fromRotationTranslation(A);
      //     Cesium.Matrix4.multiply(mat, rotationX, mat)
      //     */
      //     tileset.root.transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      //   }
      // )
      // viewer.scene.primitives.add(tileset)
      //
      // viewer.zoomTo(tileset);


      viewer.cesiumWidget.creditContainer.style.display = "none"
      // 以下设置为了使cesium地图鼠标控制符合mapbox习惯
      // 关闭双击事件
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      );
      // 鼠标右键旋转
      viewer.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.RIGHT_DRAG,
      ];
      // 中键滚动缩放
      viewer.scene.screenSpaceCameraController.zoomEventTypes = [
        Cesium.CameraEventType.WHEEL,
      ];
      // 鼠标左键平移
      viewer.scene.screenSpaceCameraController.rotateEventTypes = [
        Cesium.CameraEventType.LEFT_DRAG,
      ];
      viewer.scene.globe.enableLighting = true
      // viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(...cesium_config.center, cesium_config.zoomHeight),
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0), // 旋转角度
      //     pitch: Cesium.Math.toRadians(-90.0), // 相机方向
      //   },
      //   duration: 0.5
      // });
      return viewer
    },
  },
  mounted() {
  },
  created() {
  },
  beforeDestroy() {
    viewer?.destroy()
  }
}
</script>
<style>
/*.cesium-viewer-timelineContainer {*/
/*  z-index: 15;*/
/*  left: 625px !important;*/
/*  width: 1025px !important;*/
/*  !*right: 260px !important;*!*/
/*  bottom: 35px !important;*/
/*  height: 40px !important;*/
/*}*/

/*.cesium-timeline-bar {*/
/*  height: 30px;*/
/*}*/

/*.cesium-timeline-main {*/
/*  height: inherit;*/
/*}*/

/*.cesium-timeline-trackContainer {*/
/*  height: unset !important;*/
/*}*/

/*!* pop框css*!*/
/*.cesium-popup-panel {*/
/*  opacity: 0.8;*/
/*  !*width: 312px;*!*/
/*  position: absolute;*/
/*  z-index: 0;*/
/*  !*color: #00fcf9;*!*/
/*  !*background: rgba(23, 50, 108, 0.6);*!*/
/*  !*border: 1px solid #4674d6;*!*/
/*}*/

/*.cesium-popup-close-btn > svg:hover {*/
/*  color: #00fcf9 !important;*/
/*}*/

/*.cesium-popup-close-btn > svg {*/
/*  display: none;*/
/*  user-select: auto;*/
/*  color: #4674d6;*/
/*  cursor: pointer;*/
/*  width: 15px;*/
/*  !* height: 15px; *!*/
/*}*/

/*.cesium-viewer {*/
/*  position: unset;*/
/*}*/

</style>
