二维GIS高程

src/views/progress/progressPaper/index.vue

@@ -53,8 +53,8 @@
 <script lang="ts" setup>
 import Map from 'ol/Map'; // OpenLayers的主要类，用于创建和管理地图
 import View from 'ol/View'; // OpenLayers的视图类，定义地图的视图属性
-import { Tile as TileLayer } from 'ol/layer'; // OpenLayers的瓦片图层类
-import { XYZ } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
+import { Tile as TileLayer, WebGLTile } from 'ol/layer'; // OpenLayers的瓦片图层类
+import { GeoTIFF, 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 { useUserStoreHook } from '@/store/modules/user';
@@ -73,7 +73,12 @@ 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 GeoTIFFSource from 'ol/source/GeoTIFF';
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const orthophoto = '@/assets/images/orthophoto.tif';
 const selector = ref<LassoSelector | null>(null);
 // 获取用户 store
 const userStore = useUserStoreHook();
@@ -398,8 +403,28 @@ const getList = async () => {
 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
+  });
+
   // 创造地图实例
   map = new Map({
     // 设置地图容器的ID