<!-- 文件描述:工具条 创建时间: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>