chore: remove large file and update .gitignore

src/views/progress/progressPaper/index.vue

@@ -1,52 +1,54 @@
 <template>
-  <div class="header flex justify-between">
-    <div class="tips flex items-center justify-between">
-      <div class="dot1">未提交</div>
-      <div class="dot2">已提交</div>
-      <div class="dot3">已选择,待提交</div>
-      <el-tooltip class="box-item" effect="dark" content="右键拖动生成套索区域选中/取消图形" placement="bottom">
-        <i class="iconfont icon-wenhao"></i>
-      </el-tooltip>
-    </div>
-    <el-form :model="queryParams" ref="form" label-width="80px" inline class="flex items-center">
-      <el-form-item label="请选择项目：" prop="pid" label-width="100" style="margin-bottom: 0; color: #fff">
-        <el-select v-model="selectedProjectId" placeholder="请选择" @change="handleSelect" clearable>
-          <el-option v-for="item in ProjectList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="请选择方阵：" prop="pid" label-width="100" style="margin-bottom: 0">
-        <!-- <el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
+  <div v-loading="geoTiffLoading" class="flex h100vh">
+    <div class="header flex justify-between">
+      <div class="tips flex items-center justify-between">
+        <div class="dot1">未提交</div>
+        <div class="dot2">已提交</div>
+        <div class="dot3">已选择,待提交</div>
+        <el-tooltip class="box-item" effect="dark" content="右键拖动生成套索区域选中/取消图形" placement="bottom">
+          <i class="iconfont icon-wenhao"></i>
+        </el-tooltip>
+      </div>
+      <el-form :model="queryParams" ref="form" label-width="80px" inline class="flex items-center">
+        <el-form-item label="请选择项目：" prop="pid" label-width="100" style="margin-bottom: 0; color: #fff">
+          <el-select v-model="selectedProjectId" placeholder="请选择" @change="handleSelect" clearable>
+            <el-option v-for="item in ProjectList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="请选择方阵：" prop="pid" label-width="100" style="margin-bottom: 0">
+          <!-- <el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
           <el-option v-for="item in matrixOptions" :key="item.id" :label="item.matrixName" :value="item.id" />
         </el-select> -->
-        <el-cascader
-          :options="matrixOptions"
-          placeholder="请选择"
-          @change="handleChange"
-          :props="{ value: 'matrixId', label: 'name' }"
-          v-model="queryParams.matrixId"
-          clearable
-        />
-      </el-form-item>
-    </el-form>
-  </div>
-  <div class="ol-map" id="olMap"></div>
-  <div class="aside">
-    <el-tree
-      style="max-width: 600px"
-      :data="progressCategoryList"
-      ref="treeRef"
-      @check-change="handleCheckChange"
-      :props="treeProps"
-      :load="loadNode"
-      node-key="id"
-      lazy
-      :render-content="renderContent"
-      check-strictly
-      :expand-on-click-node="false"
-    />
-  </div>
-  <div class="submit">
-    <el-button type="primary" size="default" @click="submit" :loading="loading">提交</el-button>
+          <el-cascader
+            :options="matrixOptions"
+            placeholder="请选择"
+            @change="handleChange"
+            :props="{ value: 'matrixId', label: 'name' }"
+            v-model="queryParams.matrixId"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="ol-map" id="olMap"></div>
+    <div class="aside">
+      <el-tree
+        style="max-width: 600px"
+        :data="progressCategoryList"
+        ref="treeRef"
+        @check-change="handleCheckChange"
+        :props="treeProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+        :render-content="renderContent"
+        check-strictly
+        :expand-on-click-node="false"
+      />
+    </div>
+    <div class="submit">
+      <el-button type="primary" size="default" @click="submit" :loading="loading">提交</el-button>
+    </div>
   </div>
 </template>
 
@@ -54,9 +56,9 @@
 import Map from 'ol/Map'; // OpenLayers的主要类，用于创建和管理地图
 import View from 'ol/View'; // OpenLayers的视图类，定义地图的视图属性
 import { Tile as TileLayer, WebGLTile } from 'ol/layer'; // OpenLayers的瓦片图层类
-import { GeoTIFF, Raster, XYZ } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
+import { Raster, XYZ } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
 import { defaults as defaultControls, defaults, FullScreen, MousePosition, ScaleLine } from 'ol/control';
-import { fromLonLat } from 'ol/proj';
+import { fromLonLat, toLonLat, transform, transformExtent } from 'ol/proj';
 import { useUserStoreHook } from '@/store/modules/user';
 import { getProjectSquare, listProgressCategory, addDaily, workScheduleListPosition } from '@/api/progress/plan';
 import { ProgressCategoryVO, progressPlanDetailForm } from '@/api/progress/plan/types';
@@ -73,10 +75,13 @@ import { FeatureCollection, Geometry } from 'geojson';
 import { MapViewFitter } from '@/utils/setMapCenter';
 import PointerInteraction from 'ol/interaction/Pointer';
 import { Coordinate } from 'ol/coordinate';
-import { fromBlob, fromUrl, fromArrayBuffer, Pool } from 'geotiff';
-
+import GeoTIFF, { fromBlob, fromUrl, fromArrayBuffer, Pool } from 'geotiff';
 import GeoTIFFSource from 'ol/source/GeoTIFF';
-
+import ImageLayer from 'ol/layer/Image';
+import Static from 'ol/source/ImageStatic';
+import proj4 from 'proj4';
+import { register } from 'ol/proj/proj4';
+import gcoord from 'gcoord';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const orthophoto = '@/assets/images/orthophoto.tif';
 const selector = ref<LassoSelector | null>(null);
@@ -100,6 +105,7 @@ const submitForm = ref<progressPlanDetailForm>({
   finishedDetailIdList: [] as string[]
 });
 const loading = ref(false);
+const geoTiffLoading = ref(false);
 const matrixOptions = ref([]);
 const matrixValue = ref<number | undefined>(matrixOptions.value.length > 0 ? matrixOptions.value[0].id : undefined);
 const progressCategoryList = ref<ProgressCategoryVO[]>([]);
@@ -400,32 +406,55 @@ const getList = async () => {
   }
 };
 
+const imageExtent = ref(null);
+const imageLayer = ref(null);
+const initGeoTiff = 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');
+  // 转为 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);
+
+  imageExtent.value = [...minXY, ...maxXY];
+
+  imageLayer.value = new ImageLayer({
+    source: new Static({
+      url: imageUrl,
+      imageExtent: imageExtent.value,
+      projection: 'EPSG:3857'
+    })
+  });
+  console.log('imageExtent', imageExtent.value);
+};
+
 let map: any = null;
 const layerData = reactive<any>({});
 const centerPosition = ref(fromLonLat([107.12932403398425, 23.805564054229908]));
 const initOLMap = () => {
-  const source = new GeoTIFF({
-    sources: [
-      {
-        url: '../../../assets/images/orthophoto.tif'
-      }
-    ],
-    convertToRGB: true // 将色彩系统转换为RGB
-  });
-  source.on('change', () => {
-    const state = source.getState();
-    console.log('GeoTIFF 加载状态:', state);
-    if (state === 'ready') {
-      console.log('✅ GeoTIFF 加载成功');
-    } else if (state === 'error') {
-      console.error('❌ GeoTIFF 加载失败');
-    }
-  });
-  const tiffLayer = new WebGLTile({
-    source: source
-  });
-
   // 创造地图实例
+  const borderLayer = createExtentBorderLayer(imageExtent.value);
   map = new Map({
     // 设置地图容器的ID
     target: 'olMap',
@@ -444,7 +473,8 @@ const initOLMap = () => {
         source: new XYZ({
           url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
         })
-      })
+      }),
+      imageLayer.value
     ],
     // 设置地图的视图参数
     // View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
@@ -463,12 +493,18 @@ const initOLMap = () => {
       zoom: false,
       rotate: false,
       attribution: false
-    }),
+    }).extend([new ScaleLine()]),
     interactions: defaultInteractions({
       doubleClickZoom: false // 禁用双击缩放
     })
   });
   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) => {
@@ -488,6 +524,12 @@ const initOLMap = () => {
       }
     });
   });
+  map.on('moveend', (e: any) => {
+    // console.log('地图移动', e);
+    // 获取当前缩放级别
+    var zoomLevel = map.getView().getZoom();
+    console.log('当前缩放级别：', zoomLevel);
+  });
 
   // 4. 添加 pointermove 鼠标悬停事件
   let lastFeature: Feature | null = null;
@@ -542,6 +584,38 @@ 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({
@@ -714,9 +788,12 @@ const toggleFeatureHighlight = (feature: Feature, addIfNotExist = true) => {
   }
 };
 
-onMounted(() => {
+onMounted(async () => {
   // 地图初始化
+  geoTiffLoading.value = true;
+  await initGeoTiff();
   initOLMap();
+  geoTiffLoading.value = false;
   map.addLayer(sharedLayer);
   selector.value = new LassoSelector(map, sharedSource, (features, isInvert = false) => {
     features.forEach((feature) => {
@@ -736,6 +813,7 @@ onMounted(() => {
 
   enableMiddleMousePan(map);
   getList();
+  creatPoint(fromLonLat([107.13149145799198, 23.804125705140834]), 'Point', '1', '测试点1', '1');
 });
 
 function enableMiddleMousePan(map: Map) {
@@ -758,9 +836,9 @@ function enableMiddleMousePan(map: Map) {
   map.addInteraction(middleButtonDragPan);
 
   // 禁用中键点击默认滚动行为（浏览器可能会出现滚动箭头）
-  map.getViewport().addEventListener('mousedown', (e) => {
-    if (e.button === 1) e.preventDefault();
-  });
+  // map.getViewport().addEventListener('mousedown', (e) => {
+  //   if (e.button === 1) e.preventDefault();
+  // });
 }
 </script>