<template>
  <div>
    <div class="header">
      <h3>漫游设置</h3>
      <div class="close" @click="$emit('close')">×</div>
    </div>
    <div class="content">
      <el-row class="content-item">
        <a-button @click="draw()">绘制图形</a-button>
        <a-button @click="draw()">开始漫游</a-button>
      </el-row>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, getCurrentInstance } from 'vue';
import useMapStore from '@/store/modules/maps';

let viewer = useMapStore().$state.viewer;
let cesium = useMapStore().$state.cesium;
//绘制多边形
function draw() {
  var tempPoints = [];
  var handler = new cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  //左键点击操作
  handler.setInputAction(function (click) {
    //调用获取位置信息的接口
    let position = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
    tempPoints.push(position);
    let tempLength = tempPoints.length;
    //调用绘制点的接口
    let point = drawPoint(position);
    if (tempLength > 1) {
      let pointline = drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]]);
    }
    return;
  }, cesium.ScreenSpaceEventType.LEFT_CLICK);
  //右键点击操作
  handler.setInputAction(function (click) {
    tempPoints = [];
    handler.destroy();//关闭事件句柄
    handler = null;
  }, cesium.ScreenSpaceEventType.RIGHT_CLICK);
};
function drawPolyline(positions) {
  if (positions.length < 1) return;
  var polylineGeometry = viewer.entities.add({
    name: "线几何对象",
    polyline: {
      positions: positions,
      width: 5.0,
      material: new cesium.PolylineGlowMaterialProperty({
        color: cesium.Color.GOLD,
      }),
      depthFailMaterial: new cesium.PolylineGlowMaterialProperty({
        color: cesium.Color.GOLD,
      }),
    }
  });
  return polylineGeometry;
};
function drawPoint(position) {
  var pointGeometry = viewer.entities.add({
    name: "点几何对象",
    position: position,
    point: {
      color: cesium.Color.SKYBLUE,
      pixelSize: 10,
      outlineColor: cesium.Color.YELLOW,
      outlineWidth: 3,
      disableDepthTestDistance: Number.POSITIVE_INFINITY
    }
  });
  return pointGeometry;
};
</script>

<style scoped lang="scss">
.header {
  text-align: center;
  position: relative;

  h3 {
    color: #fff;
    line-height: 30px;
  }

  .close {
    position: absolute;
    right: 10px;
    top: -5px;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
  }

  .close:hover {
    color: #ff9a00;
  }
}

.content {
  color: #fff;
  padding: 10px;

  .content-item {
    margin-bottom: 10px;
  }
}
</style>