feat:demo

张含笑

2025-10-27 70df9429bb56fc293cf7891cb261c2403c0bcb6e

feat:demo

 src/assets/images/layerManagement/newcon_box.png

 src/styles/common.scss

@@ -3,6 +3,9 @@
@import './base.scss';
@import './tool.scss';
@import './element-ui.scss';
// 地图编辑样式
@import './mapEdit.scss';

a {
  text-decoration: none;
  color: #333;

 src/styles/mapEdit.scss

New file
@@ -0,0 +1,59 @@
.create-wayline-box {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 130px;
    height: 70px;

    .create-wayline-menu {
        background: url('@/assets/images/layerManagement/newcon_box.png') no-repeat center / 100% 100%;
        margin: 15px;

        div {
            color: #fff;
            width: 90px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: bold;
            font-size: 12px;

            &:hover {
                background-color: rgba(0, 0, 0, 0.3);
            }
        }
    }
}

.planar-polygon-edit-tooltip {
    position: absolute;
    top: 0px;
    left: 0px;


    .planar-polygon-edit-menu {
        padding: 4px 0px;
        transform: translate(24px, 10px);
     
        background: url('@/assets/images/layerManagement/newcon_box.png') no-repeat center / 100% 100%;
        border-radius: 4px;

        div {
            color: #fff;
            width: 90px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: bold;
            font-size: 12px;

            &:hover {
                background-color: rgba(0, 0, 0, 0.3);
            }
        }
    }
}

 src/views/layerManagement/components/utils.js

@@ -164,6 +164,8 @@
                ind: pointIndex, // 索引记录
            },
        })
	
		
    }
    // 清除不在范围内的点
    removeLastInvalidPoint() {
@@ -308,11 +310,11 @@
        this.removeMenuPopup()

        const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
        const isStartPoint = pickedAllEntity.find(i => i.id.name === '起飞点')
	
        const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
        const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)

        if (isStartPoint) return


        // 如果不是绘制模式
        if (!this.drawingMode) {
@@ -349,10 +351,11 @@
    }

    // 鼠标右键点击（弹出菜单）
    handleRightClick(click) {
    handleRightClick(click) {	
        console.log('click',click);
		
        const that = this
        if (that.drawingMode) return

        that.removeMenuPopup()

        const pickedAllEntity = that.viewer.scene.drillPick(click.position).filter(i => i.id)
@@ -367,10 +370,12 @@
            pickedEntity = isPolygon
            tooltipEvent = that.delPolygon
            menuType = 'polygon'
		
        } else if (isEditPoint) {
            pickedEntity = isEditPoint
            tooltipEvent = that.delPoint
            menuType = 'edit-point'
			
        }

        if (pickedEntity && this.isDeleteTheArea) {
@@ -469,6 +474,7 @@
        menuPopup.id = 'planarPolygonEditMenu'
        menuPopup.className = 'planar-polygon-edit-menu'


        const menuItems =
            type === 'polygon'
                ? [{ title: '删除测区', class: 'del-planar-polygon' }]
@@ -480,6 +486,7 @@
            titleDiv.className = item.class
            menuPopup.appendChild(titleDiv)
        })
	
        this.isPreviewMode = true
        menuPopupVBox.appendChild(menuPopup)
        return menuPopupVBox
@@ -540,7 +547,7 @@
    initPolygon(viewer, positions, isPurePreview = false) {
        this.initHandler(viewer)
        this.isPureSpotPreview = isPurePreview
        this.startDrawing()
        // this.startDrawing()
        let newPosition = positions.map(item => {
            return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item.height))
        })
@@ -571,7 +578,7 @@
    // 初始化事件处理器
    initHandler(viewer) {
        this.viewer = viewer
        this.startDrawing()
        // this.startDrawing()

        if (!this.handler) {
            this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

 src/views/layerManagement/index.vue

@@ -3,20 +3,29 @@
    <div class="layerContainer">
      <!-- 地图 -->
      <div id="layMap" class="ztzf-cesium"></div>
      <div class="draw-control">
        <div @click="startDraw">开始绘制多边形</div>
      </div>
    </div>
  </basic-container>
</template>

<script setup>
import { DrawPolygon } from '@/views/layerManagement/components/utils'
import { DrawPolygon } from '@/views/layerManagement/components/utils';
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import _, { cloneDeep, throttle } from 'lodash'
import _, { cloneDeep, throttle } from 'lodash';
import { ElButton } from 'element-plus';

let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
// 地图

// 初始化绘制工具实例
const drawPolygonExample = new DrawPolygon();

// 地图初始化
const initMap = () => {
  publicCesiumInstance = new PublicCesium({
    dom: 'layMap',
@@ -28,21 +37,40 @@

  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;

  drawPolygonExample.initHandler(viewer);
};
const drawPolygonExample = new DrawPolygon()
const loadPlanarRoute =async(positions = null, save = false)=>{

}
// 开启绘制模式（按钮点击触发）
const startDraw = () => {
  // 清除之前的绘制内容，重新开启绘制
  drawPolygonExample.removeEntities();
  drawPolygonExample.startDrawing();
};

const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200)
drawPolygonExample.subscribe('getShowWaringTip', data => {
	
})
// 处理绘制完成后的多边形坐标（示例）
const loadPlanarRoute = async (positions = null, save = false) => {
  if (!positions || positions.length < 3) return;
  console.log('绘制的多边形顶点坐标（Cartesian3）：', positions);
  //坐标转换
  const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions);
  const latLngPositions = cartographics.map(cartographic => ({
    lng: Cesium.Math.toDegrees(cartographic.longitude),
    lat: Cesium.Math.toDegrees(cartographic.latitude),
    height: cartographic.height || 0,
  }));
  console.log('转换后的经纬度坐标：', latLngPositions);
};

const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
    throttleLoadPlanarRoute(data)
})
// 销毁
  throttleLoadPlanarRoute(data);
});

// 地图销毁
const destroyMap = () => {
  drawPolygonExample.destroy();

  if (viewer) {
    viewer.destroy();
    viewer = null;
@@ -53,6 +81,7 @@
onMounted(() => {
  initMap();
});

onBeforeUnmount(() => {
  destroyMap();
});
@@ -60,12 +89,21 @@

<style scoped lang="scss">
.layerContainer {
     width: 100%;
    height: 100vh;
  position: relative;
  width: 100%;
  height: 100vh;
  #layMap {
    width: 100%;
   height: 100%;
   
    height: 100%;
  }
}

// 绘制控制按钮样式
.draw-control {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100; // 确保按钮在地图上方
  color: red;
}
</style>