feat:地图加载

张含笑

2025-10-27 12e68e6acc270263c0bea2baf72f3853eafe93e2

 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%;