feat:demo

张含笑

2025-10-27 70df9429bb56fc293cf7891cb261c2403c0bcb6e

 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>