<script setup>
import { ref ,onMounted} from 'vue'
import * as Cesium from 'cesium';
import _ from "lodash";
import * as turf from 'turf';
let viewer = null,
  tempEntities = [],
  isAddPoint = false;
onMounted(()=>{
  initViewer();
})
  function initViewer(){
    //天地图影像
    const TDT_tk = "ea3530e6803b44025cfa81500eaae01f";
    let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
        "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
        "&style=default&format=tiles&tk=" + TDT_tk;
    const cesiumKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI2ZjVjMS0zZTFjLTQ3MDAtYTZlZC02YWFjOWQwNzBjNjIiLCJpZCI6ODM1NTQsImlhdCI6MTY0NTY1NzYzM30.IPqS_sM-s_vzNnK0EAiTy6kpYP5RBYkuMgbqJtKQkPw";
    Cesium.Ion.defaultAccessToken = cesiumKey;
    
    viewer = new Cesium.Viewer("cesiumContainer",{
      geocoder: false, //位置查找
      homeButton: false, //视图返回初始位置
      sceneModePicker: true, //视角选择器
      baseLayerPicker:false,//底图选择器
      navigationHelpButton: false, //导航帮助按钮
      animation: false, //动画控制器
      creditContainer:document.createElement("div"),//版权显示
      timeline: false, //时间线
      fullscreenButton: false, //全屏控件
      vrButton: false,
      infoBox:false,
      selectionIndicator:false,
      // scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存
      // sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
      // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      //     url: TDT_IMG_C,
      //     layer: "tdtImg_c",
      //     style: "default",
      //     format: "tiles",
      //     tileMatrixSetID: "c",
      //     subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      //     tilingScheme: new Cesium.GeographicTilingScheme(),
      //     tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
      //     maximumLevel: 50,
      //     show: false
      // })
      // terrain: Cesium.Terrain.fromWorldTerrain({
      //   requestWaterMask: true,
      //   requestVertexNormals: true
      // })
    })
    // 添加Cesium ion的地形
    const terrain = new Cesium.Terrain(
      Cesium.CesiumTerrainProvider.fromIonAssetId(1),
    )
    viewer.scene.setTerrain(terrain);
    viewer.scene.globe.depthTestAgainstTerrain = false; // 图标被遮挡
    viewer.scene.fxaa = false;
    // 设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0; // 相机的高度的最小值
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000; // 相机高度的最大值

    // 关闭双击事件
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    );
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(113.9641713, 23.3191755, 400),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0)
      }
    })
   
  }
</script>

<template>
  <div id="cesiumContainer"></div>
  <div class="menu-container">
        <el-row type="flex" :gutter="20">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item>cesium</el-breadcrumb-item>
                <el-breadcrumb-item>绘制功能</el-breadcrumb-item>
                <el-breadcrumb-item>点、线、面</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <cesiumComponent id="cesium" ref="refCesium" />
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="drawTerrian()">获取视野内的地形</el-button>
              <el-button type="primary" @click="filterTerrian()">过滤地形</el-button>
              <el-button type="primary" @click="drawTin()">绘制TIN</el-button>
              <!-- <el-button type="primary" @click="draw('polyline')">绘制线</el-button>
              <el-button type="primary" @click="draw('polygon')">绘制面</el-button>
              <el-button type="primary" @click="clearDrawEntities">清空</el-button> -->
            </div>
          </el-col>
        </el-row>
      </div>
      <div
        id="tooltip"
        style="
          position: absolute;
          z-index: 999;
          background: rgba(0, 0, 0, 0.3);
          color: rgb(255, 255, 255);
          font-size: 12px;
          padding: 5px;
          border-radius: 5px;
        "
      > 
        左键点击选点，右键确定
      </div>
</template>

<style scoped>
#cesiumContainer{
  height: 100%;
  width: 100%;
}
.menu-container {
  position: absolute;
  top: 30px;
  left: 100px;
  z-index: 9999;
}
</style>