<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>
