feat:接口获取数据

张含笑

2025-10-28 b4fc9cc11229924fd7520f21bf1f2592aa450c8a

 src/views/layerManagement/index.vue

@@ -2,7 +2,7 @@
  <basic-container>
    <div class="layerContainer">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tabs v-model="activeType" @tab-click="handleClick">
          <el-tab-pane v-for="tab in tabData" :key="tab.type" :label="tab.name" :name="tab.type">
          </el-tab-pane>
        </el-tabs>
@@ -10,7 +10,7 @@
      <!-- 地图 -->
      <div class="mapContainer">
        <div id="layMap" class="ztzf-cesium"></div>
        <leftList @update:coverData="handleCoverDataUpdate"></leftList>
        <leftList @update:coverData="handleCoverDataUpdate" :activeName="activeName"></leftList>
      </div>
    </div>
  </basic-container>
@@ -24,7 +24,8 @@
import { PublicCesium } from '@/utils/cesium/publicCesium';
import _, { cloneDeep, throttle } from 'lodash';
import { ElButton } from 'element-plus';
const activeName = ref('0');
const activeName = ref('电子围栏');
const activeType = ref('0');
const tabData = ref([
  {
    name: '电子围栏',
@@ -42,14 +43,31 @@

const handleClick = tab => {
  const clickedTab = tabData.value.find(item => item.type === tab.paneName);
  activeName.value = clickedTab.type;

  activeType.value = clickedTab.type;
  activeName.value = clickedTab.name;
};
const layerData = ref({
  selectData:[],//选中的数据
})
provide('layerData', layerData)
const selectDataList = ref([])
// 解析 geo_data 并转换为 DrawPolygon 所需的坐标格式
const parseGeoDataToPositions = (geoDataStr, altitude) => {
  try {
    // 解析 JSON 字符串为 GeoJSON 对象
    const geoData = JSON.parse(geoDataStr);
    // 仅处理 Polygon 类型的地理数据
    if (geoData.type !== 'Polygon') return [];

    // 提取 coordinates（取第一个面，忽略孔洞），并补充高度
    const coordinates = geoData.coordinates[0];
    return coordinates.map(([lng, lat]) => ({
      lng: Number(lng),
      lat: Number(lat),
      height: Number(altitude) || 0, // 高度默认取数据中的 altitude，无则为 0
    }));
  } catch (error) {
    console.error('解析 geo_data 失败：', error);
    return [];
  }
};

const selectDataList = ref([]);
// 提取图斑坐标
function polygonWktToTargetArray(wktPolygon, defaultHeight = 140.6) {
  try {
@@ -98,42 +116,30 @@
    return []; // 异常时返回空数组
  }
}
 
const handleCoverDataUpdate = (data) => {

const handleCoverDataUpdate = data => {
  selectDataList.value = data;
  console.log('从子组件接收到的数据:', selectDataList.value);
  
  // 数据更新后立即加载到地图
// console.log('获取的',selectDataList.value);

  if (selectDataList.value.length > 0) {
    loadDataToMap(selectDataList.value);
  } else {
    drawPolygonExample.removeEntities();
  }
};
// 加载数据到地图
const loadDataToMap = (dataList) => {
const loadDataToMap = dataList => {
  // 清空之前的绘制内容
  drawPolygonExample.removeEntities();
  
  //  遍历数据列表（支持多条数据，此处取第一条示例）
  const targetData = dataList[0];
  if (!targetData || !targetData.dkfw) return; // 检查数据和WKT字段是否存在
  dataList.forEach(item => {
    // 转换坐标格式
    const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
    if (positions.length < 3) return; // 少于3个点无法构成多边形

  const wktPoints = polygonWktToTargetArray(targetData.dkfw);
  if (wktPoints.length < 3) {
    console.error("解析后的坐标点不足3个，无法形成多边形");
    return;
  }
  const positionsWithHeight = wktPoints.map(point => ({
    ...point,
    height: 140.6 
  }));


  drawPolygonExample.initPolygon(
    viewer,                // Cesium viewer 实例
    positionsWithHeight,   // 带高程的经纬度坐标数组
    false                  // 是否纯预览模式（false 表示可编辑）
  );
    // 调用 DrawPolygon 的 initPolygon 方法渲染多边形
    drawPolygonExample.initPolygon(viewer, positions, true);
  });
};

let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
@@ -156,13 +162,6 @@
  viewInstance.value = publicCesiumInstance;
  drawPolygonExample.initHandler(viewer);
};

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

// 处理绘制完成后的多边形坐标（示例）
const loadPlanarRoute = async (positions = null, save = false) => {