feat:添加编辑

张含笑

2025-08-26 9dc2df9cbfb540219cbaf2da40166b85d3fc6240

 src/views/resource/components/DrawPolygon.vue

@@ -1,312 +1,312 @@
<template>
   <div></div>
  <div></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import * as Cesium from 'cesium';

import { ElMessage } from 'element-plus'
import { sdfwUpdate } from '@/api/home/territory'
import { ElMessage } from 'element-plus';
import { sdfwUpdate } from '@/api/home/territory';

let curPolygonPosition = []
let savePolygonPosition = []
let curPolygon = null
let curPolygonEntity = null
let curPolygonObj = null
let curPolygonPosition = [];
let savePolygonPosition = [];
let curPolygon = null;
let curPolygonEntity = null;
let curPolygonObj = null;

let menuPanel = null
let saveMenuPanel = null
let menuPanel = null;
let saveMenuPanel = null;

const selectionIds = inject('selectionIds')
const clearSelect = inject('clearSelect')
// const getTableList = inject('getTableList')
const selectionIds = inject('selectionIds');
const clearSelect = inject('clearSelect');
const getTableList = inject('getTableList')

const viewInstance = inject('viewInstance')
const homeViewer = inject('homeViewer')
const viewInstance = inject('viewInstance');
const homeViewer = inject('homeViewer');

function preventDefault(event) {
   event.preventDefault()
  event.preventDefault();

   return
  return;
}

function init() {
   // let draw = new Draw(homeViewer.value);
   // draw.drawPlane();
   curPolygon = new Cesium.PolygonHierarchy()
   curPolygonEntity = new Cesium.Entity()
   homeViewer.value.scene.globe.depthTestAgainstTerrain = true
  // let draw = new Draw(homeViewer.value);
  // draw.drawPlane();
  curPolygon = new Cesium.PolygonHierarchy();
  curPolygonEntity = new Cesium.Entity();
  homeViewer.value.scene.globe.depthTestAgainstTerrain = true;

   viewInstance.value.addLeftClickEvent(null, addPlanerPointEvent, 'drawCustomPolygon')
   viewInstance.value.addRightClickEvent(null, addPlanarMenuEvent, 'drawCustomPolygon')
   viewInstance.value.addMouseHandler(null, mouseMoveEvent, 'drawCustomPolygon')
  viewInstance.value.addLeftClickEvent(null, addPlanerPointEvent, 'drawCustomPolygon');
  viewInstance.value.addRightClickEvent(null, addPlanarMenuEvent, 'drawCustomPolygon');
  viewInstance.value.addMouseHandler(null, mouseMoveEvent, 'drawCustomPolygon');
}

function mouseMoveEvent(movement, viewer) {
   const mouseInfo = viewInstance.value.getMouseInfoAll(movement.endPosition)
  const mouseInfo = viewInstance.value.getMouseInfoAll(movement.endPosition);

   const { x, y } = mouseInfo.windowPosition
  const { x, y } = mouseInfo.windowPosition;

   if (!menuPanel) {
      menuPanel = createMenuPanel()
      viewer.container.appendChild(menuPanel)
   }
  if (!menuPanel) {
    menuPanel = createMenuPanel();
    viewer.container.appendChild(menuPanel);
  }

   menuPanel.style.transform = `translate3d(${x}px, ${y}px, 0)`
  menuPanel.style.transform = `translate3d(${x}px, ${y}px, 0)`;

   if (
      curPolygonObj &&
      mouseInfo.surfacePosition &&
      mouseInfo.surfacePosition != null &&
      curPolygonPosition.length >= 1
   ) {
      curPolygonPosition.pop()
      curPolygonPosition.push(mouseInfo.surfacePosition)
  if (
    curPolygonObj &&
    mouseInfo.surfacePosition &&
    mouseInfo.surfacePosition != null &&
    curPolygonPosition.length >= 1
  ) {
    curPolygonPosition.pop();
    curPolygonPosition.push(mouseInfo.surfacePosition);

      curPolygon.positions.pop()
      curPolygon.positions.push(mouseInfo.surfacePosition)
   }
    curPolygon.positions.pop();
    curPolygon.positions.push(mouseInfo.surfacePosition);
  }
}

function addPlanerPointEvent(click, pick) {
   const { position } = click
  const { position } = click;

   const mouseInfo = viewInstance.value.getMouseInfoAll(position)
  const mouseInfo = viewInstance.value.getMouseInfoAll(position);

   if (mouseInfo.surfacePosition && mouseInfo.surfacePosition != null) drawCustomPolygon(mouseInfo)
  if (mouseInfo.surfacePosition && mouseInfo.surfacePosition != null) drawCustomPolygon(mouseInfo);
}

function addPlanarMenuEvent(click, pick, viewer) {
   if (savePolygonPosition.length <= 2) {
      ElMessage.warning('当前绘制无法形成面，请继续绘制或取消绘制！！')
  if (savePolygonPosition.length <= 2) {
    ElMessage.warning('当前绘制无法形成面，请继续绘制或取消绘制！！');

      return
   }
   const { position } = click
    return;
  }
  const { position } = click;

   const mouseInfo = viewInstance.value.getMouseInfoAll(position)
  const mouseInfo = viewInstance.value.getMouseInfoAll(position);

   remove()
   removeMenuPanel()
  remove();
  removeMenuPanel();

   if (mouseInfo.surfacePosition && mouseInfo.surfacePosition != null) drawCustomPolygon(mouseInfo)
  if (mouseInfo.surfacePosition && mouseInfo.surfacePosition != null) drawCustomPolygon(mouseInfo);

   const { x, y } = position
   saveMenuPanel = createSaveMenuPanel()
   saveMenuPanel.addEventListener('click', saveMenuClickEvent)
   saveMenuPanel.style.transform = `translate3d(${x}px, ${y}px, 0)`
   viewer.container.appendChild(saveMenuPanel)
  const { x, y } = position;
  saveMenuPanel = createSaveMenuPanel();
  saveMenuPanel.addEventListener('click', saveMenuClickEvent);
  saveMenuPanel.style.transform = `translate3d(${x}px, ${y}px, 0)`;
  viewer.container.appendChild(saveMenuPanel);
}

function createSaveMenuPanel() {
   const menuPanel = document.createElement('div')
   menuPanel.className = 'planar-menu-panel'
  const menuPanel = document.createElement('div');
  menuPanel.className = 'planar-menu-panel';

   const arr = [
      { title: '提交绘制', class: 'save-draw' },
      { title: '重新绘制', class: 'anew-draw' },
   ]
  const arr = [
    { title: '提交绘制', class: 'save-draw' },
    { title: '重新绘制', class: 'anew-draw' },
  ];

   arr.forEach(item => {
      const title = document.createElement('div')
      title.innerText = item.title
      title.className = item.class
      menuPanel.appendChild(title)
   })
  arr.forEach(item => {
    const title = document.createElement('div');
    title.innerText = item.title;
    title.className = item.class;
    menuPanel.appendChild(title);
  });

   return menuPanel
  return menuPanel;
}

function saveMenuClickEvent(e) {
   const className = e.target.className
   if (className === 'save-draw') {
      updatePolygon()
   }
   if (className == 'anew-draw') {
      cancel()
   }
  const className = e.target.className;
  if (className === 'save-draw') {
    updatePolygon();
  }
  if (className == 'anew-draw') {
    cancel();
  }

   removeSaveMenuPanel()
  removeSaveMenuPanel();
}

function removeSaveMenuPanel() {
   if (saveMenuPanel) {
      homeViewer.value.container?.removeChild(saveMenuPanel)
      saveMenuPanel.removeEventListener('click', saveMenuClickEvent)
      saveMenuPanel = null
   }
  if (saveMenuPanel) {
    homeViewer.value.container?.removeChild(saveMenuPanel);
    saveMenuPanel.removeEventListener('click', saveMenuClickEvent);
    saveMenuPanel = null;
  }
}

function createMenuPanel() {
   const menuPanel = document.createElement('div')
   menuPanel.className = 'planar-menu-panel'
  const menuPanel = document.createElement('div');
  menuPanel.className = 'planar-menu-panel';

   const title = document.createElement('div')
   title.innerText = '左击选择点位，右击结束'
   title.className = 'proof-custom-add-polygon'
   menuPanel.appendChild(title)
  const title = document.createElement('div');
  title.innerText = '左击选择点位，右击结束';
  title.className = 'proof-custom-add-polygon';
  menuPanel.appendChild(title);

   return menuPanel
  return menuPanel;
}

function removeMenuPanel() {
   if (menuPanel) {
      homeViewer.value.container?.removeChild(menuPanel)
      menuPanel = null
   }
  if (menuPanel) {
    homeViewer.value.container?.removeChild(menuPanel);
    menuPanel = null;
  }
}

function drawCustomPolygon(point) {
   if (curPolygonPosition.length == 0) {
      curPolygonPosition.push(point.surfacePosition.clone())
      curPolygon.positions.push(point.surfacePosition.clone())
   }
  if (curPolygonPosition.length == 0) {
    curPolygonPosition.push(point.surfacePosition.clone());
    curPolygon.positions.push(point.surfacePosition.clone());
  }

   savePolygonPosition.push(point.wgs84SurfacePosition)
   curPolygonPosition.push(point.surfacePosition.clone())
   curPolygon.positions.push(point.surfacePosition.clone())
  savePolygonPosition.push(point.wgs84SurfacePosition);
  curPolygonPosition.push(point.surfacePosition.clone());
  curPolygon.positions.push(point.surfacePosition.clone());

   if (!curPolygonObj) {
      curPolygonEntity.polyline = {
         width: 2,
         material: Cesium.Color.WHITE,
         clampToGround: false,
      }
  if (!curPolygonObj) {
    curPolygonEntity.polyline = {
      width: 2,
      material: Cesium.Color.WHITE,
      clampToGround: false,
    };

      curPolygonEntity.polyline.positions = new Cesium.CallbackProperty(function () {
         return curPolygonPosition
      }, false)
    curPolygonEntity.polyline.positions = new Cesium.CallbackProperty(function () {
      return curPolygonPosition;
    }, false);

      curPolygonEntity.polygon = {
         hierarchy: new Cesium.CallbackProperty(function () {
            return curPolygon
         }, false),
    curPolygonEntity.polygon = {
      hierarchy: new Cesium.CallbackProperty(function () {
        return curPolygon;
      }, false),

         material: Cesium.Color.fromCssColorString('#00ffff').withAlpha(0.4),
         clampToGround: false,
      }
      curPolygonEntity.name = 'customProofPolygon'
      material: Cesium.Color.fromCssColorString('#00ffff').withAlpha(0.4),
      clampToGround: false,
    };
    curPolygonEntity.name = 'customProofPolygon';

      curPolygonEntity._id = 'customProofPolygon'
      curPolygonObj = homeViewer.value.entities.add(curPolygonEntity)
   }
    curPolygonEntity._id = 'customProofPolygon';
    curPolygonObj = homeViewer.value.entities.add(curPolygonEntity);
  }
}

function clearPlanar() {
   homeViewer.value.entities.remove(curPolygonObj)
   curPolygonObj = null
   curPolygon = null
   curPolygonEntity = null
   curPolygonPosition = []
   savePolygonPosition = []
  homeViewer.value.entities.remove(curPolygonObj);
  curPolygonObj = null;
  curPolygon = null;
  curPolygonEntity = null;
  curPolygonPosition = [];
  savePolygonPosition = [];
}

function remove() {
   viewInstance.value.removeLeftClickEvent('drawCustomPolygon')
   viewInstance.value.removeRightClickEvent('drawCustomPolygon')
   viewInstance.value.removeMouseHandler('drawCustomPolygon')
  viewInstance.value.removeLeftClickEvent('drawCustomPolygon');
  viewInstance.value.removeRightClickEvent('drawCustomPolygon');
  viewInstance.value.removeMouseHandler('drawCustomPolygon');
}

const emit = defineEmits(['upDateDrawState'])
const emit = defineEmits(['upDateDrawState']);

function updatePolygon() {
   let polygon = savePolygonPosition.reduce((pre, cur) => {
      pre.push(`${cur.lng} ${cur.lat}`)
      return pre
   }, [])
   polygon.push(polygon[0])
   console.log('绘制',`POLYGON((${polygon.join(',')}))`);
ElMessage.success('重新绘制图斑成功！！')
if (selectionIds.value) {
            emit('upDateDrawState')
            selectionIds.value = null
            clearSelect()
         }
  let polygon = savePolygonPosition.reduce((pre, cur) => {
    pre.push(`${cur.lng} ${cur.lat}`);
    return pre;
  }, []);
  polygon.push(polygon[0]);
  console.log('绘制', `POLYGON((${polygon.join(',')}))`);
  ElMessage.success('重新绘制图斑成功！！');
  if (selectionIds.value) {
    emit('upDateDrawState');
    selectionIds.value = null;
    clearSelect();
  }
getTableList()
  // 接口
  // sdfwUpdate({
  //    ids: selectionIds.value,
  //    sdfw: `POLYGON((${polygon.join(',')}))`,
  // })
  //    .then(res => {
  //       if (selectionIds.value) {
  //          emit('upDateDrawState')
  //          selectionIds.value = null
  //          // clearSelect()
  //       }

// 接口
   // sdfwUpdate({
   //    ids: selectionIds.value,
   //    sdfw: `POLYGON((${polygon.join(',')}))`,
   // })
   //    .then(res => {
   //       if (selectionIds.value) {
   //          emit('upDateDrawState')
   //          selectionIds.value = null
   //          // clearSelect()
   //       }
  //       if (res.data.code !== 0) return ElMessage.error(res.message)
  //       ElMessage.success('重新绘制图斑成功！！')

   //       if (res.data.code !== 0) return ElMessage.error(res.message)
   //       ElMessage.success('重新绘制图斑成功！！')

   //       // getTableList()
   //    })
   //    .catch(e => {
   //       cancel()
   //    })
  //       // getTableList()
  //    })
  //    .catch(e => {
  //       cancel()
  //    })
}

function cancel() {
   remove()
   removeMenuPanel()
   clearPlanar()
  remove();
  removeMenuPanel();
  clearPlanar();

   init()
  init();
}

onMounted(() => {
   document.addEventListener('contextmenu', preventDefault)
  document.addEventListener('contextmenu', preventDefault);

   init()
})
  init();
});

onBeforeUnmount(() => {
   document.removeEventListener('contextmenu', preventDefault)
  document.removeEventListener('contextmenu', preventDefault);

   remove()
   removeMenuPanel()
   removeSaveMenuPanel()
   clearPlanar()
  remove();
  removeMenuPanel();
  removeSaveMenuPanel();
  clearPlanar();

   homeViewer.value.scene.globe.depthTestAgainstTerrain = false
})
  homeViewer.value.scene.globe.depthTestAgainstTerrain = false;
});
</script>

<style lang="scss" scoped>
p {
   text-indent: 2em;
   color: #ffffff;
   font-size: 18px;
  text-indent: 2em;
  color: #ffffff;
  font-size: 18px;
}

.export-btns {
   margin-top: 44px;
   display: flex;
   align-items: center;
   justify-content: space-around;
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-around;

   .el-button {
      background-color: transparent !important;
   }
  .el-button {
    background-color: transparent !important;
  }
}
.proof-custom-add-polygon {
    position: absolute;
    left: 20px;
    background: rgba(0, 0, 0, .6);
    white-space: nowrap;
    border-radius: 4px;
  position: absolute;
  left: 20px;
  background: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  border-radius: 4px;

    &::after {
        content: '';
        position: absolute;
        left: -3px;
        top: calc(50% - 2px);
        width: 0;
        height: 0;
        border-top: 4px solid rgba(0, 0, 0, .6);
        border-left: 4px solid rgba(0, 0, 0, .6);
        border-right: 4px solid transparent;
        border-bottom: 4px solid transparent;
        transform: rotate(-45deg);
    }
  &::after {
    content: '';
    position: absolute;
    left: -3px;
    top: calc(50% - 2px);
    width: 0;
    height: 0;
    border-top: 4px solid rgba(0, 0, 0, 0.6);
    border-left: 4px solid rgba(0, 0, 0, 0.6);
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transform: rotate(-45deg);
  }
}
</style>