feat:地图加载

张含笑

2025-10-27 12e68e6acc270263c0bea2baf72f3853eafe93e2

feat:地图加载

 src/styles/element-ui.scss

@@ -149,6 +149,28 @@
    }
  }
}
.ztzf-input {
    .el-input__wrapper {
        padding: 0 8px !important;
        background: #012a50;
        box-shadow: none !important;
        border: 1px solid #51a8ff;

        .el-input__inner {
            color: #ffffff;

            &::placeholder {
                color: #8ac3fd;
            }
        }
    }

    &.is-disabled {
        .el-input__wrapper {
            background-color: #012a50;
        }
    }
}
//======以下针对表格功能 增删查改样式和弹窗=========
.ztzf-dialog-mange {
  .el-dialog__body {

 src/views/layerManagement/components/leftList.vue

New file
@@ -0,0 +1,209 @@
<template>
  <div class="table-overlay">
    <div class="topBar">
      <div
        v-for="(item, index) in tabData"
        :key="index"
        :class="{ 'active-tab': activeTab === index }"
        @click="activeTab = index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="searchBox">
      <el-input
        class="ztzf-input inputName"
        v-model="formData.dkbh"
        placeholder="图斑名称"
      ></el-input>
      <div class="searchAndReset">
        <div class="reset" @click="reset">重置</div>
        <div class="search" @click="search">搜索</div>
      </div>
    </div>
    <div class="btnGroups">
      <el-button type="primary">新增围栏</el-button>
      <el-button type="success">新增文件夹</el-button>
      <el-button type="info" @click="selectAll">全选</el-button>
    </div>
    <div class="tableListBox">
      <el-tree
        v-model="checkedKeys"
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="{
          label: 'name',
          children: 'children',
        }"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const formData = {
  isPush: undefined,
  page: 1,
  isGenerated: undefined,
  pageSize: 17,
  dkbh: '',
  patchesName: '',
};
const tabData = ref([
  {
    name: '电子围栏',
    type: '0',
  },
  {
    name: '自定义禁飞区',
    type: '1',
  },
  {
    name: '国土空间规划',
    type: '2',
  },
]);

const activeTab = ref(0);
const handelClick = val => {
  activeTab.value = val.type;
};
const reset = () => {};
const search = () => {};
const treeData = ref([
  {
    id: 'group1',
    name: '道路裂缝识别',
    children: [
      { id: 'road1', name: '桃花路' },
      { id: 'road2', name: '洪城路' },
      { id: 'road3', name: '中山路' },
    ],
  },
  {
    id: 'group2',
    name: '电动车识别',
    children: [
      { id: 'electric1', name: '桃新大道' },
      { id: 'electric2', name: '昌南大道' },
    ],
  },
]);

const checkedKeys = ref([]); // 存储勾选的节点key
// 全选方法
const selectAll = () => {
  const allKeys = [];
  // 递归收集所有节点的id
  const collectKeys = data => {
    data.forEach(item => {
      allKeys.push(item.id);
      if (item.children) {
        collectKeys(item.children);
      }
    });
  };
  collectKeys(treeData.value);
  checkedKeys.value = allKeys;
  console.log('全选', checkedKeys.value);
};
</script>

<style scoped lang="scss">
.table-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 99%;
  z-index: 99;
  width: 377px;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px 8px 8px 8px;
  padding: 6px 10px 0 10px 10px 0 10px;
}

.topBar {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 16px;

  div {
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;

    &:hover {
      color: #409eff; // 悬停颜色
    }

    &.active-tab {
      color: #409eff; // 激活颜色

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;

        width: 60%;
        height: 2px;
        background-color: #409eff;
      }
    }
  }
}
.searchBox {
  display: flex;
  margin-top: 10px;
  .searchAndReset {
    width: 182px;
    display: flex;
    justify-content: right;
    align-items: center;
    margin-right: 10px;
    .reset,
    .search {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 32px;
      cursor: pointer;
    }

    .reset {
      margin-right: 7px;
      background: #0d2b38;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #84cbd3;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
    }

    .search {
      background: #1e2d51;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #c5d6ff;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
    }
  }
}
.btnGroups {
  margin-top: 10px;
  display: flex;
}
.tableListBox {
}
</style>

 src/views/layerManagement/components/rightEdit.vue

New file
@@ -0,0 +1,33 @@
<template>
 <div class="rightContainer">
    右侧编辑
 </div>
</template>

<script setup >
/**
 * @description rightEdit
 * @date 2025-10-27 (周一) 15:06:00
 */
defineOptions({
 name: 'rightEdit'
})


</script>

<style scoped lang="scss">
.rightContainer {
 top: 0;
  right: 0;
  height: 99%;
  z-index: 99;
  width: 377px;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);

  border-radius: 8px 8px 8px 8px;
  padding: 6px 10px 0 10px;
}
</style>

 src/views/layerManagement/components/utils.js

@@ -351,9 +351,7 @@
    }

    // 鼠标右键点击（弹出菜单）
    handleRightClick(click) {	
        console.log('click',click);
		
    handleRightClick(click) {		
        const that = this
        if (that.drawingMode) return
        that.removeMenuPopup()
@@ -547,7 +545,8 @@
    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))
        })
@@ -578,7 +577,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,14 +3,18 @@
    <div class="layerContainer">
      <!-- 地图 -->
      <div id="layMap" class="ztzf-cesium"></div>
      <div class="draw-control">
      <!-- <div class="draw-control">
        <div @click="startDraw">开始绘制多边形</div>
      </div>
      </div> -->
   <leftList></leftList>

    </div>
  </basic-container>
</template>

<script setup>
import RightEdit from '@/views/layerManagement/components/rightEdit.vue'
import leftList from '@/views/layerManagement/components/leftList.vue'
import { DrawPolygon } from '@/views/layerManagement/components/utils';
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
@@ -37,16 +41,15 @@

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

  drawPolygonExample.initHandler(viewer);
};

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

// 处理绘制完成后的多边形坐标（示例）
const loadPlanarRoute = async (positions = null, save = false) => {
@@ -77,13 +80,28 @@
  }
  publicCesiumInstance = null;
};

// 阻止浏览器默认
const preventDefault = event => {
    event.preventDefault()
    return
}
const cesiumContextMenu = (isAdd = true) => {
    let cesium = document.getElementById('layMap')
    if (!cesium) return
    if (isAdd) {
        cesium.addEventListener('contextmenu', preventDefault)
    } else {
        cesium.removeEventListener('contextmenu', preventDefault)
    }
}
onMounted(() => {
  initMap();
  cesiumContextMenu()
});

onBeforeUnmount(() => {
  destroyMap();
  cesiumContextMenu(false)
});
</script>

@@ -91,7 +109,7 @@
.layerContainer {
  position: relative;
  width: 100%;
  height: 100vh;
 height: 90vh;
  #layMap {
    width: 100%;
    height: 100%;