From 64b04286e36ef42ab8a27f17406454b185d48e80 Mon Sep 17 00:00:00 2001 From: Teo <2642673902@qq.com> Date: Wed, 2 Jul 2025 10:45:48 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9F=A5=E8=AF=86=E5=BA=93=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E9=A2=84=E8=A7=88,=E8=87=AA=E5=AE=9A=E4=B9=89=E7=93=A6?= =?UTF-8?q?=E7=89=87=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- src/router/index.ts | 2 +- src/views/progress/progressPaper/index.vue | 115 +----------------- src/views/quality/knowledgeDocument/index.vue | 36 ++++-- .../component/documentsDeails.vue | 10 +- .../component/documentsEdit.vue | 6 +- src/views/safety/knowledgeDocument/index.vue | 114 +++++------------ 7 files changed, 75 insertions(+), 210 deletions(-) diff --git a/.env.development b/.env.development index 8c542b5..cbebb18 100644 --- a/.env.development +++ b/.env.development @@ -9,7 +9,7 @@ VITE_APP_BASE_API = 'http://192.168.110.119:8899' # 无人机接口地址 -VITE_APP_BASE_DRONE_API = 'http://192.168.110.8:9136' +VITE_APP_BASE_DRONE_API = 'http://192.168.110.119:9136' # 应用访问路径 例如使用前缀 /admin/ VITE_APP_CONTEXT_PATH = '/' diff --git a/src/router/index.ts b/src/router/index.ts index 3e6195b..5eb2888 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -106,7 +106,7 @@ export const constantRoutes: RouteRecordRaw[] = [ }, { path: '/progress/progressPaper', - component: () => import('@/views/progress/progressPaper/test.vue'), + component: () => import('@/views/progress/progressPaper/index.vue'), hidden: true }, { diff --git a/src/views/progress/progressPaper/index.vue b/src/views/progress/progressPaper/index.vue index 94f36f7..7ea1a5d 100644 --- a/src/views/progress/progressPaper/index.vue +++ b/src/views/progress/progressPaper/index.vue @@ -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({}); 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); diff --git a/src/views/quality/knowledgeDocument/index.vue b/src/views/quality/knowledgeDocument/index.vue index f01b407..4f9972c 100644 --- a/src/views/quality/knowledgeDocument/index.vue +++ b/src/views/quality/knowledgeDocument/index.vue @@ -100,7 +100,7 @@ 查看修改文件 + -