GCSGUI/src/components/toolbar.vue

<!--
  文件描述：工具条
  创建时间：2024/4/16 10:54
  创建人：Zhaipeixiu
-->
<script setup>
import { CashOutline} from '@vicons/ionicons5'
import { NTooltip, useMessage } from 'naive-ui'
// import {UploadFileInfo} from "naive-ui";
// import {DataSource} from "cesium";
import MeasureDistance from "@/assets/js/cesium-map/measureDistance";
import {ref} from "vue";

const message = useMessage();
let file, measureDis;
let options = [
    {
      label: 'Drive My Car',
      value: 'Drive My Car'
    }
];

let layerValue = ref('test');

let MeasureOptions = [
  {
    label: '距离测量',
    key: 'distance'
  },
  {
    label: '面积测量',
    key: 'area'
  },
  {
    label: '清除',
    key: 'clear'
  },
]

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

  }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(){
  measureDis = new MeasureDistance(window.viewer)
  measureDis.activate()
}
function measureEnd(){
  if(measureDis.vertexEntities.length>0){
    measureDis.deactivate()
    measureDis.clear()
    measureDis.viewer.scene.requestRender()
  }else{
    message.warning('无可清除元素')
  }
}
</script>

<template>
  <n-flex id="panel">
    <n-popselect v-model:value="layerValue" :options="options" size="medium">
      <n-button>
        图层管理
      </n-button>
    </n-popselect>
    <n-button>
      添加文件
    </n-button>
    <n-button>
     地形分析
    </n-button>
    <n-button>
     编辑工具
    </n-button>
    <n-dropdown :options="MeasureOptions" @select="handleSelect">
    <n-button tertiary circle type="info">
      <template #icon>
      <n-icon><CashOutline /></n-icon>
      </template>
    </n-button>
    </n-dropdown>
    <n-button>
     绘制工具
    </n-button>
    <n-button>
     显示/隐藏
    </n-button>
  </n-flex>
<!--<div id="panel">-->
<!--  -->
<!--&lt;!&ndash;  <input type="file" @change="handleFile" >&ndash;&gt;-->
<!--  <n-upload action="" @change="handleFinish" >-->
<!--    <n-button secondary type="info" >上传文件</n-button>-->
<!--  </n-upload>-->
<!--  <n-popover trigger="hover">-->
<!--    <template #trigger>-->
<!--      <n-button class="toolbts" @click="measure" size="small" icon="el-icon-edit-outline"></n-button>-->
<!--    </template>-->
<!--    <span>测距</span>-->
<!--  </n-popover>-->

<!--  <n-popover trigger="hover">-->
<!--    <template #trigger>-->
<!--      <n-button class="toolbts" @click="measureEnd" size="small" icon=el-icon-delete></n-button>-->
<!--    </template>-->
<!--    <span>清除</span>-->
<!--  </n-popover>-->
<!--</div>-->
</template>

<style scoped>
#panel{
  position: absolute;
  top: 40px;
  left: 2px;
  width: 50vw;
  height: 1rem;
}
</style>