重构进度填报

src/views/progress/progressPaper/index.vue

@@ -454,12 +454,6 @@ const initOLMap = () => {
     })
   });
   map.on('click', (e: any) => {
-    var coordinate = e.coordinate;
-
-    // 将投影坐标转换为经纬度坐标
-    var lonLatCoordinate = toLonLat(coordinate);
-    // 输出转换后的经纬度坐标
-    console.log('经纬度坐标：', lonLatCoordinate);
     const zoom = map.getView().getZoom();
     const scale = Math.max(zoom / 10, 1); // 缩放比例，根据需要调整公式
     map.forEachFeatureAtPixel(e.pixel, (feature: Feature) => {
@@ -539,38 +533,6 @@ const initOLMap = () => {
   });
 };
 
-// 你已有的 imageExtent 是 [minX, minY, maxX, maxY]
-const createExtentBorderLayer = (extent: number[]) => {
-  // 构造矩形坐标，闭合成环，顺序可以是顺时针或逆时针
-  const coords = [
-    [
-      [extent[0], extent[1]],
-      [extent[0], extent[3]],
-      [extent[2], extent[3]],
-      [extent[2], extent[1]],
-      [extent[0], extent[1]]
-    ]
-  ];
-
-  const polygonFeature = new Feature(new Polygon(coords));
-
-  polygonFeature.setStyle(
-    new Style({
-      stroke: new Stroke({
-        color: 'red', // 你想要的边框颜色
-        width: 3 // 线宽
-      }),
-      fill: null // 不填充，纯边框
-    })
-  );
-
-  return new VectorLayer({
-    source: new VectorSource({
-      features: [polygonFeature]
-    })
-  });
-};
-
 const highlightStyle = (name, scale) => {
   return new Style({
     stroke: new Stroke({
@@ -721,7 +683,7 @@ const addPointToMap = (features: Array<any>) => {
 };
 
 //选中几何图形
-const toggleFeatureHighlight = (feature: Feature, addIfNotExist = true) => {
+const toggleFeatureHighlight = (feature: Feature) => {
   const zoom = map.getView().getZoom();
   const scale = Math.max(zoom / 10, 1);
   if (feature.get('status') === '2') return;
@@ -730,41 +692,35 @@ const toggleFeatureHighlight = (feature: Feature, addIfNotExist = true) => {
   const isHighlighted = feature.get('highlighted') === true;
 
   if (isHighlighted) {
+    // 如果是反选或 toggle 模式，允许取消
     feature.setStyle(defaultStyle(feature.get('name'), scale));
     feature.set('highlighted', false);
     const id = feature.get('id');
     const idx = submitForm.value.finishedDetailIdList.indexOf(id);
     if (idx > -1) submitForm.value.finishedDetailIdList.splice(idx, 1);
-  } else if (addIfNotExist) {
+  } else {
     feature.setStyle(highlightStyle(feature.get('name'), scale));
     feature.set('highlighted', true);
     const id = feature.get('id');
-    if (!submitForm.value.finishedDetailIdList.includes(id)) submitForm.value.finishedDetailIdList.push(id);
+    if (!submitForm.value.finishedDetailIdList.includes(id)) {
+      submitForm.value.finishedDetailIdList.push(id);
+    }
   }
 };
 
 onMounted(async () => {
   // 地图初始化
   initOLMap();
-  // geoTiffLoading.value = false;
   map.addLayer(sharedLayer);
   selector.value = new LassoSelector(map, sharedSource, (features, isInvert = false) => {
     features.forEach((feature) => {
-      if (isInvert) {
-        // Shift + 左键 -> 只执行取消选中
-        if (feature.get('highlighted') === true) {
-          toggleFeatureHighlight(feature, false); // 取消选中，addIfNotExist = false
-        }
-      } else {
-        // 普通左键 -> 只执行选中
-        if (feature.get('highlighted') !== true) {
-          toggleFeatureHighlight(feature, true); // 选中，addIfNotExist = true
-        }
-      }
+      console.log(feature.get('status'));
+
+      toggleFeatureHighlight(feature);
     });
   });
 
-  enableMiddleMousePan(map);
+  // enableMiddleMousePan(map);
   getList();
   creatPoint(fromLonLat([107.13149145799198, 23.804125705140834]), 'Point', '1', '测试点1', '1');
 });

src/views/progress/progressPaper/test.vue

@@ -1,156 +0,0 @@
-<template>
-  <div ref="mapContainer" class="map-container"></div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TileLayer from 'ol/layer/Tile';
-import XYZ from 'ol/source/XYZ';
-import TileGrid from 'ol/tilegrid/TileGrid';
-import { fromLonLat, transform, transformExtent } from 'ol/proj';
-import { fromUrl } from 'geotiff';
-import gcoord from 'gcoord';
-import ImageLayer from 'ol/layer/Image';
-import Static from 'ol/source/ImageStatic';
-import { Feature } from 'ol';
-import { Polygon } from 'ol/geom';
-import { Stroke, Style } from 'ol/style';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-const mapContainer = ref<HTMLDivElement | null>(null);
-
-// 您提供的经纬度范围（EPSG:4326）
-const extent4326 = [107.13149481208748, 23.80411597354268, 107.13487254421389, 23.80801427852998];
-
-// 计算中心点（经纬度）
-const centerLon = (extent4326[0] + extent4326[2]) / 2;
-const centerLat = (extent4326[1] + extent4326[3]) / 2;
-
-// 转换 extent 到 EPSG:3857
-const extent3857 = transformExtent(extent4326, 'EPSG:4326', 'EPSG:3857');
-
-// 生成 resolutions（256像素瓦片）
-const resolutions = Array.from({ length: 20 }, (_, z) => 156543.03392804097 / Math.pow(2, z));
-
-onMounted(async () => {
-  // const tiff = await fromUrl('/image/clean_rgba_cleaned.tif');
-  // const image = await tiff.getImage();
-  // const width = image.getWidth();
-  // const height = image.getHeight();
-  // const bbox = image.getBoundingBox(); // [minX, minY, maxX, maxY]
-  // console.log('bbox', bbox);
-  // const rasters = await image.readRasters({ interleave: true });
-  // // 创建 Canvas
-  // const canvas = document.createElement('canvas');
-  // canvas.width = width;
-  // canvas.height = height;
-  // const ctx = canvas.getContext('2d')!;
-  // const imageData: any = ctx.createImageData(width, height);
-  // // 设置 RGBA 数据
-  // imageData.data.set(rasters); // ✅ 完整设置，不用手动循环
-  // ctx.putImageData(imageData, 0, 0);
-  // // 将 canvas 转成 Data URL 用作图层 source
-  // const imageUrl = canvas.toDataURL();
-  // // 转换为 WGS84 经纬度
-  // const minLonLat = transform([bbox[0], bbox[1]], 'EPSG:32648', 'EPSG:4326');
-  // const maxLonLat = transform([bbox[2], bbox[3]], 'EPSG:32648', 'EPSG:4326');
-  // console.log('minLonLat', minLonLat);
-  // console.log('maxLonLat', maxLonLat);
-  // // 转为 GCJ02（高德地图坐标系）
-  // const gcjMin = gcoord.transform(minLonLat as [number, number, number], gcoord.WGS84, gcoord.GCJ02);
-  // const gcjMax = gcoord.transform(maxLonLat as [number, number, number], gcoord.WGS84, gcoord.GCJ02);
-  // // 再转 EPSG:3857 供 OpenLayers 使用
-  // const minXY = fromLonLat(gcjMin);
-  // const maxXY = fromLonLat(gcjMax);
-
-  let imageExtent = [11926280.148303444, 2729254.667731837, 11926657.474014785, 2729714.281185133];
-  console.log('imageExtent', imageExtent);
-  console.log('extent3857', extent3857);
-  if (!mapContainer.value) return;
-  const tileGrid = new TileGrid({
-    extent: imageExtent,
-    origin: [-20037508.342789244, 20037508.342789244], // Web Mercator 左上角
-    resolutions,
-    tileSize: 256
-  });
-  // 高德卫星图图层 (EPSG:3857)
-  const gaodeLayer = new TileLayer({
-    source: new XYZ({
-      url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-      maxZoom: 19,
-      wrapX: true
-    }),
-    opacity: 1
-  });
-
-  // 自定义瓦片图层（EPSG:3857）
-  const customLayer = new TileLayer({
-    source: new XYZ({
-      url: 'http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/{z}/{x}/{y}'
-      // extent: imageExtent
-    })
-  });
-  const layer = customLayer; // eg: TileLayer<XYZ>
-  const source = layer.getSource();
-  const projection = source?.getProjection();
-
-  console.log('图层坐标系:', projection?.getCode());
-  const borderLayer = createExtentBorderLayer(imageExtent);
-  const testLayer = createExtentBorderLayer([
-    ...fromLonLat([107.13149481208748, 23.80411597354268]),
-    ...fromLonLat([107.13487254421389, 23.80801427852998])
-  ]);
-  // 创建地图
-  const map = new Map({
-    target: mapContainer.value,
-    layers: [gaodeLayer, customLayer, borderLayer, testLayer],
-    view: new View({
-      projection: 'EPSG:3857',
-      center: fromLonLat([centerLon, centerLat]),
-      zoom: 16,
-      minZoom: 10
-      // extent: extent3857 // 限制视图范围
-    })
-  });
-});
-
-const createExtentBorderLayer = (extent: number[]) => {
-  // 构造矩形坐标，闭合成环，顺序可以是顺时针或逆时针
-  const coords = [
-    [
-      [extent[0], extent[1]],
-      [extent[0], extent[3]],
-      [extent[2], extent[3]],
-      [extent[2], extent[1]],
-      [extent[0], extent[1]]
-    ]
-  ];
-
-  const polygonFeature = new Feature(new Polygon(coords));
-
-  polygonFeature.setStyle(
-    new Style({
-      stroke: new Stroke({
-        color: 'red', // 你想要的边框颜色
-        width: 3 // 线宽
-      }),
-      fill: null // 不填充，纯边框
-    })
-  );
-
-  return new VectorLayer({
-    source: new VectorSource({
-      features: [polygonFeature]
-    })
-  });
-};
-</script>
-
-<style scoped>
-.map-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>