GCSGUI/src/components/toolbar.vue

<!--
  文件描述：工具条
  创建时间：2024/4/16 10:54
  创建人：Zhaipeixiu
-->
<script setup>
import { DuplicateSharp,Layers,ChevronBack,ChevronForward,CreateOutline} from '@vicons/ionicons5'
import { RulerAlt} from '@vicons/carbon'
import { TerrainSharp} from '@vicons/material'
import { DrawPolygon} from '@vicons/fa'
import { useMessage } from 'naive-ui'
import {ref} from "vue";
const message = useMessage();
let file;

let options = [
    {
      label: 'Drive My Car',
      value: 'Drive My Car'
    }
];

let layerValue = ref('test');
let barIsOpen = ref(true);
let MeasureOptions = [
  {
    label: '距离测量',
    key: 'distance'
  },
  {
    label: '面积测量',
    key: 'area'
  },
  {
    label: '清除',
    key: 'clear'
  },
]

let DrawOptions = [
  {
    label: '多边形',
    key: 'polygon'
  },
  {
    label: '矩形',
    key: 'rec'
  },{
    label: '圆形',
    key: 'circle'
  },
  {
    label: '清除',
    key: 'clear'
  },
]

function handleDrawSelect(key) {
  if(key === 'clear') {
    if(window.measureViewer.clearDraw()){
      message.warning('无可清除图形')
    }
  }
  else{
    window.measureViewer.drawGraphics(key)
  }
}

// 测量菜单选中事件
function handleSelect(key) {
  if(key === 'distance') {
    measure();
  }
  else if(key === 'area') {
    measureArea()
  }else if(key === 'clear') {
    measureEnd()
  }
}

function handleFile(event) {
  file = event.target.files[0]
  console.log(file)
  let kmlDataPromise = window.Cesium.KmlDataSource.load(file, {
    camera: window.viewer.scene.camera,
    canvas: window.viewer.scene.canvas,
    screenOverlayContainer: window.viewer.container,
    clampToGround: true,
  });
  console.log(kmlDataPromise);
  kmlDataPromise.then(function (dataSource) {
    // console.log(dataSource);
    window.viewer.dataSources.add(dataSource);
    window.viewer.flyTo(dataSource);
  });
}

/**
 * 多点距离测量
 */
function measure(){
  window.measureViewer.clearDisEntity()
  window.measureViewer.activate()
}

/**
 * 清除面积测量和多点距离测量
 */
function measureEnd(){
  if(window.measureViewer.vertexEntities.length>0 || window.measureViewer.activeShapePoints.length>0){
    window.measureViewer.deactivate()
    window.measureViewer.stopAreaMeasure()
    window.measureViewer.clearDisEntity()
    window.measureViewer.clearAreaEntity()
    window.measureViewer.viewer.scene.requestRender()
  }else{
    message.warning('无可清除元素')
  }
}

/**
 * 面积测量
 */
function measureArea() {
  window.measureViewer.clearAreaEntity()
  window.measureViewer.activateAreaMeasure();
}

</script>

<template>
  <n-flex id="panel">
    <n-popselect v-model:value="layerValue" :options="options" size="medium">
      <n-button tertiary circle type="warning">
        <template #icon>
          <n-icon><Layers/></n-icon>
        </template>
      </n-button>
    </n-popselect>
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
        <n-button tertiary circle type="warning">
          <template #icon>
            <n-icon><DuplicateSharp /></n-icon>
          </template>
        </n-button>
      </template>
      <span> 添加数据 </span>
    </n-tooltip>
    <n-tooltip placement="bottom" trigger="hover">
      <template #trigger>
      <n-button tertiary circle type="warning">
        <template #icon>
          <n-icon><TerrainSharp/></n-icon>
        </template>
      </n-button>
        </template>
    <span> 地形分析 </span>
    </n-tooltip>
    <n-button tertiary circle type="warning">
      <template #icon>
        <n-icon><CreateOutline/></n-icon>
      </template>
    </n-button>
    <n-dropdown :options="MeasureOptions" @select="handleSelect">
    <n-button tertiary circle type="warning">
      <template #icon>
      <n-icon><RulerAlt/></n-icon>
      </template>
    </n-button>
    </n-dropdown>
    <n-dropdown :options="DrawOptions" @select="handleDrawSelect">
    <n-button tertiary circle type="warning">
      <template #icon>
        <n-icon><DrawPolygon/></n-icon>
      </template>
    </n-button>
    </n-dropdown>
    <n-button tertiary circle type="warning">
      <template #icon>
<!--        ChevronBack,ChevronForward,-->
        <n-icon><ChevronBack/></n-icon>
      </template>
    </n-button>
  </n-flex>
</template>

<style scoped>
#panel{
  position: absolute;
  top: 10px;
  left: 2px;
  background: rgba(21, 21, 21, 0.73);
  border-radius: 7px;
}
</style>