1

wangjuncheng

2025-06-06 7217e02e098b94e421b5a85ec13e0cd2ed35fbeb

 src/components/menu/flowRate_waterLevel.vue

@@ -1,13 +1,48 @@
<template>
   <div style="display: flex;justify-content: space-between;">
      <!-- 选点按钮 -->
      <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
         <img v-if="!isPickingActive" src="@/assets/img/timeline/流速.png" style="width: 28px;height: 28px;" />
         <img v-else src="@/assets/img/timeline/已流速.png" style="width: 28px;height: 28px;" />
      </div>
      <div @click="endCalculation">
         <img src="@/assets/img/timeline/清除.png" style="width: 26px;height: 26px;" />
      </div>
      <el-tooltip class="box-item" effect="dark" placement="top" show-after="1000">
         <template #content>
            水深/流速分析功能说明：
            <br /><br />
            🔹 点击按钮切换状态：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;- 白色：关闭拾取功能（不可选点）
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;- 黄色：开启拾取功能（可点击地图选择分析点）
            <br /><br />
            🔹 使用流程：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;1. 点击按钮切换为黄色状态 ➜ 开始拾取坐标点
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;2. 在地图上点击所需位置 ➜ 添加水深/流速分析点
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;3. 完成选点后，请将按钮切回白色 ➜ 关闭拾取功能
            <br /><br />
            ⚠️ 温馨提示：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;使用完毕请务必关闭拾取功能，避免误操作影响其他功能。
         </template>
         <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
            <img v-if="!isPickingActive" src="@/assets/img/timeline/流速.png" style="width: 28px;height: 28px;" />
            <img v-else src="@/assets/img/timeline/已流速.png" style="width: 28px;height: 28px;" />
         </div>
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" placement="top" show-after="1000">
         <template #content>
            清除所有分析坐标点及分析结果：
            <br /><br />
            🔁 功能说明：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;点击后将移除地图上的所有水深/流速分析点以及相关分析图表
            <br /><br />
            ⚠️ 温馨提示：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;此操作会清空当前分析进度，请确认后再执行
         </template>
         <div @click="endCalculation">
            <img src="@/assets/img/timeline/清除.png" style="width: 26px;height: 26px;" />
         </div>
      </el-tooltip>
   </div>
</template>

@@ -41,7 +76,7 @@
   const cartesian = viewer.scene.pickPosition(windowPosition);
   if (!cartesian) return null;
   const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
   cartographic.height += 200.0;
   cartographic.height += 110.0;
   return {
      cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
      longitude: Cesium.Math.toDegrees(cartographic.longitude),
@@ -82,7 +117,7 @@
   const cylinderEntity = viewer.entities.add({
      position: groundPosition, // 底部位置
      cylinder: {
         length: 190.0,
         length: 100.0,
         topRadius: 1.0,
         bottomRadius: 1.0,
         material: Cesium.Color.YELLOW,
@@ -122,7 +157,6 @@
      if (position) {
         const index = pickedPoints.value.length;
         addPointToViewer(position, index);
         console.log('执行加点工作');

      }
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -132,7 +166,6 @@
   if (!handler.value) {
      initPickHandler();
   }

   isPickingActive.value = true;
   ElMessage.success(`开始--流量流速--拾取坐标功能，请点击地图选择点位！选取完请及时关闭，避免影响其他功能！`);
}
@@ -144,13 +177,11 @@
   }
   isPickingActive.value = false;
}

function togglePick() {
   if (isPickingActive.value) {
      stopPicking();
      isPickingActive.value = false;
      ElMessage.info('已关闭--流量流速--拾取点坐标功能！');
      console.log(pickedPoints.value, '最终选取的点');
   } else {
      startPicking();
      isPickingActive.value = true;
@@ -192,6 +223,7 @@
   });
   pickedPoints.value = [];
}

defineExpose({
   endCalculation,
   stopPicking