68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
|
import { fromUrl } from 'geotiff'; // 假设你用的是这个包
|
|||
|
|
import { transform } from 'ol/proj';
|
|||
|
|
import { fromLonLat } from 'ol/proj';
|
|||
|
|
import ImageLayer from 'ol/layer/Image';
|
|||
|
|
import Static from 'ol/source/ImageStatic';
|
|||
|
|
import gcoord from 'gcoord';
|
|||
|
|
|
|||
|
|
export class GeoTiffLoader {
|
|||
|
|
imageExtent: number[] = [];
|
|||
|
|
imageLayer: ImageLayer<Static> | null = null;
|
|||
|
|
tiffUrl: string;
|
|||
|
|
|
|||
|
|
constructor(tiffUrl: string) {
|
|||
|
|
this.tiffUrl = tiffUrl;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async init() {
|
|||
|
|
const tiff = await fromUrl(this.tiffUrl);
|
|||
|
|
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 })) as Uint8Array;
|
|||
|
|
|
|||
|
|
// 创建 Canvas
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = width;
|
|||
|
|
canvas.height = height;
|
|||
|
|
const ctx = canvas.getContext('2d')!;
|
|||
|
|
const imageData = ctx.createImageData(width, height);
|
|||
|
|
|
|||
|
|
// 设置 RGBA 数据
|
|||
|
|
imageData.data.set(rasters);
|
|||
|
|
ctx.putImageData(imageData, 0, 0);
|
|||
|
|
|
|||
|
|
// 转成 Data URL
|
|||
|
|
const imageUrl = canvas.toDataURL();
|
|||
|
|
|
|||
|
|
// 坐标转换
|
|||
|
|
const minLonLat = transform([bbox[0], bbox[1]], 'EPSG:32648', 'EPSG:4326');
|
|||
|
|
const maxLonLat = transform([bbox[2], bbox[3]], 'EPSG:32648', 'EPSG:4326');
|
|||
|
|
|
|||
|
|
// 转为 GCJ02 坐标系
|
|||
|
|
// 这里断言为[number, number, number]，补0做三维坐标
|
|||
|
|
const gcjMin = gcoord.transform([minLonLat[0], minLonLat[1], 0], gcoord.WGS84, gcoord.GCJ02);
|
|||
|
|
const gcjMax = gcoord.transform([maxLonLat[0], maxLonLat[1], 0], gcoord.WGS84, gcoord.GCJ02);
|
|||
|
|
|
|||
|
|
// 再转为 EPSG:3857
|
|||
|
|
const minXY = fromLonLat(gcjMin);
|
|||
|
|
const maxXY = fromLonLat(gcjMax);
|
|||
|
|
|
|||
|
|
this.imageExtent = [...minXY, ...maxXY];
|
|||
|
|
|
|||
|
|
this.imageLayer = new ImageLayer({
|
|||
|
|
source: new Static({
|
|||
|
|
url: imageUrl,
|
|||
|
|
imageExtent: this.imageExtent,
|
|||
|
|
projection: 'EPSG:3857'
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('imageExtent', this.imageExtent);
|
|||
|
|
}
|
|||
|
|
}
|