知识库图片预览,自定义瓦片渲染
This commit is contained in:
@ -407,111 +407,9 @@ const getList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const imageExtent = ref(null);
|
||||
const imageLayer = ref(null);
|
||||
import { get as getProjection } from 'ol/proj';
|
||||
|
||||
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);
|
||||
|
||||
// 1. 你的原始瓦片的边界（来自 .tfw 或你知道的数据）
|
||||
|
||||
// 1. 你的 bbox 是 WGS84 经纬度
|
||||
const bbox = [107.13149481208748, 23.80411597354268, 107.13487254421389, 23.80801427852998];
|
||||
|
||||
// 2. 转成 GCJ02（高德坐标系）
|
||||
const gcjMin = gcoord.transform([bbox[0], bbox[1]], gcoord.WGS84, gcoord.GCJ02);
|
||||
const gcjMax = gcoord.transform([bbox[2], bbox[3]], gcoord.WGS84, gcoord.GCJ02);
|
||||
|
||||
// 3. 再转换成 EPSG:3857，用于 OpenLayers
|
||||
const minXY = fromLonLat(gcjMin);
|
||||
const maxXY = fromLonLat(gcjMax);
|
||||
|
||||
// 4. 组成瓦片范围 extent
|
||||
const tileExtent = [...minXY, ...maxXY];
|
||||
console.log('tileExtent', tileExtent);
|
||||
|
||||
// 5. 创建 tileGrid
|
||||
const tileGrid = createXYZ({
|
||||
extent: tileExtent,
|
||||
tileSize: 256,
|
||||
minZoom: 10,
|
||||
maxZoom: 18
|
||||
});
|
||||
|
||||
// 6. 使用 Web Mercator 投影 EPSG:3857
|
||||
const projection = getProjection('EPSG:3857');
|
||||
|
||||
// 7. 创建瓦片图层
|
||||
imageLayer.value = new TileLayer({
|
||||
source: new XYZ({
|
||||
projection,
|
||||
tileGrid,
|
||||
tileUrlFunction: (tileCoord) => {
|
||||
if (!tileCoord) return '';
|
||||
let [z, x, y] = tileCoord;
|
||||
console.log(z, x, y);
|
||||
y = Math.pow(2, z) - y - 1;
|
||||
return `http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/${z}/${x}/${y}`;
|
||||
}
|
||||
})
|
||||
});
|
||||
const source = imageLayer.value.getSource();
|
||||
const projections = source.getProjection();
|
||||
|
||||
console.log('图层使用的坐标系:', projections?.getCode());
|
||||
};
|
||||
|
||||
let map: any = null;
|
||||
const layerData = reactive<any>({});
|
||||
const centerPosition = ref(fromLonLat([107.12932403398425, 23.805564054229908]));
|
||||
const initOLMap = () => {
|
||||
console.log(111);
|
||||
// const scoure = new TileLayer({
|
||||
// // 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
|
||||
// source: new XYZ({
|
||||
// url: 'http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/{z}/{x}/{y}'
|
||||
// })
|
||||
// });
|
||||
// console.log(scoure);
|
||||
|
||||
map = new Map({
|
||||
// 设置地图容器的ID
|
||||
target: 'olMap',
|
||||
@ -519,20 +417,19 @@ const initOLMap = () => {
|
||||
layers: [
|
||||
// 高德地图
|
||||
// TileLayer表示一个瓦片图层，它由一系列瓦片（通常是图片）组成，用于在地图上显示地理数据。
|
||||
|
||||
new TileLayer({
|
||||
// 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
|
||||
source: new XYZ({
|
||||
url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
|
||||
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
|
||||
maxZoom: 18
|
||||
})
|
||||
}),
|
||||
new TileLayer({
|
||||
// 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
|
||||
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'
|
||||
url: 'http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/{z}/{x}/{y}'
|
||||
})
|
||||
})
|
||||
// imageLayer.value
|
||||
// imageLayer.value
|
||||
],
|
||||
// 设置地图的视图参数
|
||||
// View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
|
||||
@ -541,7 +438,7 @@ const initOLMap = () => {
|
||||
center: centerPosition.value, //地图中心点
|
||||
zoom: 15, // 缩放级别
|
||||
minZoom: 0, // 最小缩放级别
|
||||
// maxZoom: 18, // 最大缩放级别
|
||||
// maxZoom: 19, // 最大缩放级别
|
||||
constrainResolution: true // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
|
||||
// projection: 'EPSG:4326' // 投影坐标系，默认是3857
|
||||
}),
|
||||
@ -848,8 +745,6 @@ const toggleFeatureHighlight = (feature: Feature, addIfNotExist = true) => {
|
||||
|
||||
onMounted(async () => {
|
||||
// 地图初始化
|
||||
// geoTiffLoading.value = true;
|
||||
await initGeoTiff();
|
||||
initOLMap();
|
||||
// geoTiffLoading.value = false;
|
||||
map.addLayer(sharedLayer);
|
||||
|
||||
Reference in New Issue
Block a user