change

wangjuncheng

2025-05-15 f16045cde17854377084335c478e3cae0d08d6b8

 src/components/monifangzhen/schemeInfo.vue

@@ -1,9 +1,9 @@
<template>
  <div class="listCard">
    <div class="top"><span>方案详情</span>
      <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
      <!-- <div @click="togglePick" :class="['pick-button', { active: isPickingActive }]">
        {{ isPickingActive ? '进行计算' : '开始拾取' }}
      </div>
      </div> -->
    </div>
    <div class="details">
      <div v-if="formattedData.length" class="input-group">
@@ -34,9 +34,7 @@

// 状态管理
const formattedData = ref([]);
const pickedPoints = ref([]);
const handler = ref(null);
const isPickingActive = ref(false);


// 映射表
const areaTypeMap = {
@@ -148,88 +146,90 @@
  },
  { immediate: true }
);
// const pickedPoints = ref([]);
// const handler = ref(null);
// const isPickingActive = ref(false);
// // 拾取相关逻辑
// const viewer = window.viewer;

// 拾取相关逻辑
const viewer = window.viewer;
// function getPickPosition(windowPosition) {
//   if (!viewer) return null;
//   viewer.scene.globe.depthTestAgainstTerrain = true;
//   const cartesian = viewer.scene.pickPosition(windowPosition);
//   if (!cartesian) return null;

function getPickPosition(windowPosition) {
  if (!viewer) return null;
  viewer.scene.globe.depthTestAgainstTerrain = true;
  const cartesian = viewer.scene.pickPosition(windowPosition);
  if (!cartesian) return null;

  const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
//   const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  
  // 在原有高度上增加300米
  cartographic.height += 80.0;
//   // 在原有高度上增加300米
//   cartographic.height += 80.0;

  return {
    cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
    longitude: Cesium.Math.toDegrees(cartographic.longitude),
    latitude: Cesium.Math.toDegrees(cartographic.latitude),
    height: cartographic.height
  };
}
//   return {
//     cartesian: Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height),
//     longitude: Cesium.Math.toDegrees(cartographic.longitude),
//     latitude: Cesium.Math.toDegrees(cartographic.latitude),
//     height: cartographic.height
//   };
// }

function addPointToViewer(point, index) {
  const entity = viewer.entities.add({
    position: point.cartesian,
    billboard: {
      // image: '../path/to/your/icon.png', // 替换为你的图标路径
      width: 32, // 图标宽度
      height: 32, // 图标高度
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    },
    label: {
      text: `Point ${index + 1}\n经度: ${point.longitude.toFixed(6)}\n纬度: ${point.latitude.toFixed(6)}`,
      font: '14pt monospace',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineWidth: 2,
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      pixelOffset: new Cesium.Cartesian2(0, -40), // 调整标签相对于图标的偏移量
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK
    }
  });
// function addPointToViewer(point, index) {
//   const entity = viewer.entities.add({
//     position: point.cartesian,
//     billboard: {
//       // image: '../path/to/your/icon.png', // 替换为你的图标路径
//       width: 32, // 图标宽度
//       height: 32, // 图标高度
//       verticalOrigin: Cesium.VerticalOrigin.BOTTOM
//     },
//     label: {
//       text: `Point ${index + 1}\n经度: ${point.longitude.toFixed(6)}\n纬度: ${point.latitude.toFixed(6)}`,
//       font: '14pt monospace',
//       style: Cesium.LabelStyle.FILL_AND_OUTLINE,
//       outlineWidth: 2,
//       verticalOrigin: Cesium.VerticalOrigin.TOP,
//       pixelOffset: new Cesium.Cartesian2(0, -40), // 调整标签相对于图标的偏移量
//       fillColor: Cesium.Color.WHITE,
//       outlineColor: Cesium.Color.BLACK
//     }
//   });

  // 可选：存储实体引用以便后续操作
  pickedPoints.value.push(entity);
}
//   // 可选：存储实体引用以便后续操作
//   pickedPoints.value.push(entity);
// }

function initPickHandler() {
  if (!viewer?.scene?.canvas) return;
  handler.value = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// function initPickHandler() {
//   if (!viewer?.scene?.canvas) return;
//   handler.value = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  handler.value.setInputAction((movement) => {
    const position = getPickPosition(movement.position);
    if (position) {
      const index = pickedPoints.value.length;
      pickedPoints.value.push(position);
      addPointToViewer(position, index);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
//   handler.value.setInputAction((movement) => {
//     const position = getPickPosition(movement.position);
//     if (position) {
//       const index = pickedPoints.value.length;
//       pickedPoints.value.push(position);
//       addPointToViewer(position, index);
//     }
//   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// }

function togglePick() {
  isPickingActive.value ? stopPicking() : startPicking();
}
// function togglePick() {
//   isPickingActive.value ? stopPicking() : startPicking();
// }

function startPicking() {
  pickedPoints.value = [];
  viewer.entities.removeAll();
  !handler.value && initPickHandler();
  isPickingActive.value = true;
}
// function startPicking() {
//   pickedPoints.value = [];
//   viewer.entities.removeAll();
//   !handler.value && initPickHandler();
//   isPickingActive.value = true;
// }

function stopPicking() {
  if (handler.value) {
    handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.value.destroy();
    handler.value = null;
  }
// function stopPicking() {
//   if (handler.value) {
//     handler.value.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
//     handler.value.destroy();
//     handler.value = null;
//   }

  isPickingActive.value = false;
}
//   isPickingActive.value = false;
// }
</script>

<style lang="less" scoped>