feat:地图渲染添加点

张含笑

2025-10-30 c711e82c4b1685a4b00884d7aab70d9d3b0265ff

 src/views/layerManagement/index.vue

@@ -74,7 +74,7 @@
provide('layerParams', layerParams);
const handleClick = tab => {
  const clickedTab = tabData.value.find(item => item.type === tab.paneName);
  console.log(clickedTab, '5555')

  activeType.value = clickedTab.type;
  activeName.value = clickedTab.name;
};
@@ -86,7 +86,7 @@
viewer.entities.removeAll();
  layerParams.value.editDetailData = val;
  drawPolygonExample.editThePatch(true);
  const positions = parseGeoDataToPositions(val.geo_data, val.altitude);
  const positions = parseGeoDataToPositions(val.geo_data, val.altitude); 
  if (positions.length < 3) return; // 少于3个点无法构成多边形
   drawPolygonExample.drawTheArea(true)
  drawPolygonExample.initPolygon(viewer, positions, true);
@@ -107,7 +107,6 @@
// 点击显示区域
const handleCoverDataUpdate = data => {
  selectDataList.value = data;

  if (selectDataList.value.length > 0) {
    loadDataToMap(selectDataList.value);
  } else {
@@ -120,12 +119,12 @@
  // 存储所有有效坐标，用于后续定位
  tbJwdList = [];
  dataList.forEach(item => {
    const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
    let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
    positions.push(positions[0])
    if (positions.length < 3) {
      console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
      return;
    }

    tbJwdList.push(...positions);
    //  转换为 Cesium 所需的 [lng, lat, lng, lat, ...] 扁平数组格式
    let degreesArray = [];
@@ -232,9 +231,10 @@

// 编辑/绘制
const loadPlanarRoute = async (positions = null, save = false) => {

  if (positions) {
    curPolygonPosition = positions.map(item => {
      let cartographic = Cesium.Cartographic.fromCartesian(item);
      let cartographic = Cesium.Cartographic.fromCartesian(item);  
      let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
      let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
      let height = Cesium.Math.toDegrees(cartographic.height); //高度
@@ -245,21 +245,22 @@
      };
    });
  }

  
  let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
  polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat]);
  // console.log('绘制的多边形顶点坐标（Cartesian3）：', polygon);
layerParams.value.polygonPosition = polygon
  console.log('polygon', layerParams.value.polygonPosition);
};
const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
drawPolygonExample.subscribe('getPolygonPositions', data => {
  throttleLoadPlanarRoute(data);
});
  let polygonString = JSON.stringify(polygon);
  // polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat]);
  layerParams.value.polygonPosition = polygonString
  
  };
  const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
  drawPolygonExample.subscribe('getPolygonPositions', data => {
    throttleLoadPlanarRoute(data);
  });

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

  if (viewer) {
    viewer.destroy();
    viewer = null;