From af252cd65edfbfda21c7c86d0ef78af0cf51f916 Mon Sep 17 00:00:00 2001 From: gcw_IJ7DAiVL Date: Fri, 24 Oct 2025 09:02:28 +0800 Subject: [PATCH] fix --- public/data/points.json | 8 +- src/views/home/home.vue | 234 +++++++++++++++++++++++----------------- 2 files changed, 138 insertions(+), 104 deletions(-) diff --git a/public/data/points.json b/public/data/points.json index 94e5f44..9bc4135 100644 --- a/public/data/points.json +++ b/public/data/points.json @@ -1,16 +1,16 @@ { - "startPoint": "114.26344,27.800982", - "endPoint": "114.284668,27.794961", + "startPoint": "114.312888,27.796612", + "endPoint": "114.336525,27.767989", "viaPoints": [ { "time": "1694352000000", - "points": "114.272329,27.797299" + "points": "114.334239,27.779261" } ], "avoidPoints": [ { "time": "1694352003000", - "points": "114.27882,27.792857" + "points": "" } ], "avoidAreas": [ diff --git a/src/views/home/home.vue b/src/views/home/home.vue index 984a75b..c70be3c 100644 --- a/src/views/home/home.vue +++ b/src/views/home/home.vue @@ -2,11 +2,21 @@
- - - - - + + + + + + + + + + + + + + +
清除
确定
路线隐蔽规划
@@ -32,12 +42,12 @@
参数
- + - + - +
- +
- +
隐蔽添加
- + - + @@ -120,17 +130,17 @@
- + - + - + + console.log(window.getComputedStyle(n).fontFamily) +) this.viewer = null await this.getMapOption() this.$nextTick(async () => { @@ -477,6 +490,9 @@ export default { pitch: -35, }, }, + defaultLabelStyle: { + font: '16px "DengXian",sans-serif', + } // basemaps: [ // { // id: "image-tdss", @@ -1278,10 +1294,16 @@ export default { (viaPoint) => viaPoint.style.time !== row.time ) } else { - const graphic = this.viaPoints.find( - (viaPoint) => viaPoint.style.time === row.time - ) - this.updatePointPosition(graphic, row.points) + if (this.viaPoints.length > 0) { + const graphic = this.viaPoints.find( + (viaPoint) => viaPoint.style.time === row.time + ) + this.updatePointPosition(graphic, row.points) + } else { + const time = new Date().getTime() + row.time = time + this.addPointToMap('viaPoints', row, time) + } } } else if (type === 'avoidPoints') { if (!row.points) { @@ -1304,10 +1326,16 @@ export default { (avoidPoint) => avoidPoint.style.time !== row.time ) } else { - const graphic = this.avoidPoints.find( - (avoidPoint) => avoidPoint.style.time === row.time - ) - this.updatePointPosition(graphic, row.points) + if (this.avoidPoints.length > 0) { + const graphic = this.avoidPoints.find( + (avoidPoint) => avoidPoint.style.time === row.time + ) + this.updatePointPosition(graphic, row.points) + } else { + const time = new Date().getTime() + row.time = time + this.addPointToMap('avoidPoints', row, time) + } } } else if (type === 'avoidAreas') { if (!row.points) { @@ -1330,10 +1358,16 @@ export default { (avoidArea) => avoidArea.style.time !== row.time ) } else { - const graphic = this.avoidAreas.find( - (avoidArea) => avoidArea.style.time === row.time - ) - this.updatePolygonPosition(graphic, row.points) + if (this.avoidAreas.length > 0) { + const graphic = this.avoidAreas.find( + (avoidArea) => avoidArea.style.time === row.time + ) + this.updatePolygonPosition(graphic, row.points) + } else { + const time = new Date().getTime() + row.time = time + this.addPolygonToMap('avoidAreas', row, time) + } } } }, @@ -1922,86 +1956,86 @@ export default { const coordsToUse = isForward ? segCoords : [...segCoords].reverse(); // === 使用第一个版本的精细连接逻辑，但加入第二个版本的途经点切片 === - const lastPt = segmentPath[segmentPath.length - 1]; - const firstOfSeg = coordsToUse[0]; + const lastPt = segmentPath[segmentPath.length - 1]; + const firstOfSeg = coordsToUse[0]; - const distLastToFirst = this.calculateDistance(lastPt, firstOfSeg); - - // 如果是途经点，需要找到终点垂足在当前位置 - const endPerpNearest = this.findNearestPointWithIndex(coordsToUse, endConnection.perpendicularPoint); - const endNi = endPerpNearest.index; + const distLastToFirst = this.calculateDistance(lastPt, firstOfSeg); + + // 如果是途经点，需要找到终点垂足在当前位置 + const endPerpNearest = this.findNearestPointWithIndex(coordsToUse, endConnection.perpendicularPoint); + const endNi = endPerpNearest.index; - if (distLastToFirst < 1e-6) { - // 精度上相同，直接接上（跳过第一个） - // 如果是途经点，需要切片到垂足 - if (endConnection.type === 'via') { - segmentPath.push(...coordsToUse.slice(1, endNi + 1)); - // 保存垂直点之后的路网后半截 - viaPerpRemainingCoords = coordsToUse.slice(endNi); - } else { - segmentPath.push(...coordsToUse.slice(1)); - } - } else { - // 找到 coordsToUse 上与 lastPt 最近的索引 - const nearestInfo = this.findNearestPointWithIndex(coordsToUse, lastPt); - const ni = nearestInfo.index; - - // === 整合第二个版本的途经点切片逻辑 === - if (endConnection.type === 'via') { - // 途经点处理：统一以终点垂足为切片终点 - if (ni <= endNi) { - segmentPath.push(...coordsToUse.slice(ni, endNi + 1)); - // 关键：保存垂直点之后的路网后半截（供后续路径延续） - viaPerpRemainingCoords = coordsToUse.slice(endNi); - } else { - const reversedSlice = coordsToUse.slice(endNi, ni + 1).reverse(); - segmentPath.push(...reversedSlice); - // 关键：保存垂直点之后的路网后半截（反向场景需要反转回去） - const originalRemaining = coordsToUse.slice(endNi); - viaPerpRemainingCoords = originalRemaining.reverse(); - } - } else { - // 非途经点：使用第一个版本的完整连接逻辑 - if (ni === 0) { - // 从头开始接（直接接） - segmentPath.push(...coordsToUse); - } else if (ni === coordsToUse.length - 1) { - // 最近点是段尾 —— 说明我们需要反向接（取反转） - const rev = [...coordsToUse].reverse(); - // 以 rev 的第一个点连接 - if (this.calculateDistance(lastPt, rev[0]) < 1e-6) { - segmentPath.push(...rev.slice(1)); + if (distLastToFirst < 1e-6) { + // 精度上相同，直接接上（跳过第一个） + // 如果是途经点，需要切片到垂足 + if (endConnection.type === 'via') { + segmentPath.push(...coordsToUse.slice(1, endNi + 1)); + // 保存垂直点之后的路网后半截 + viaPerpRemainingCoords = coordsToUse.slice(endNi); } else { - // 否则直接把最近点加入并向最近端延伸（避免断链） - segmentPath.push(coordsToUse[ni]); - // 选择靠近终点的方向延伸（更短的一侧） - const distToStart = this.calculateDistance(coordsToUse[ni], coordsToUse[0]); - const distToEnd = this.calculateDistance(coordsToUse[ni], coordsToUse[coordsToUse.length - 1]); - if (distToStart <= distToEnd) { - const toStart = coordsToUse.slice(0, ni).reverse(); - segmentPath.push(...toStart); - } else { - const toEnd = coordsToUse.slice(ni + 1); - segmentPath.push(...toEnd); - } + segmentPath.push(...coordsToUse.slice(1)); } } else { - // 最近点在中间：选择向起点或终点延伸，取较短的一侧 - segmentPath.push(coordsToUse[ni]); - const distToStart = this.calculateDistance(coordsToUse[ni], coordsToUse[0]); - const distToEnd = this.calculateDistance(coordsToUse[ni], coordsToUse[coordsToUse.length - 1]); - if (distToStart <= distToEnd) { - const toStart = coordsToUse.slice(0, ni).reverse(); - segmentPath.push(...toStart); + // 找到 coordsToUse 上与 lastPt 最近的索引 + const nearestInfo = this.findNearestPointWithIndex(coordsToUse, lastPt); + const ni = nearestInfo.index; + + // === 整合第二个版本的途经点切片逻辑 === + if (endConnection.type === 'via') { + // 途经点处理：统一以终点垂足为切片终点 + if (ni <= endNi) { + segmentPath.push(...coordsToUse.slice(ni, endNi + 1)); + // 关键：保存垂直点之后的路网后半截（供后续路径延续） + viaPerpRemainingCoords = coordsToUse.slice(endNi); + } else { + const reversedSlice = coordsToUse.slice(endNi, ni + 1).reverse(); + segmentPath.push(...reversedSlice); + // 关键：保存垂直点之后的路网后半截（反向场景需要反转回去） + const originalRemaining = coordsToUse.slice(endNi); + viaPerpRemainingCoords = originalRemaining.reverse(); + } } else { - const toEnd = coordsToUse.slice(ni + 1); - segmentPath.push(...toEnd); + // 非途经点：使用第一个版本的完整连接逻辑 + if (ni === 0) { + // 从头开始接（直接接） + segmentPath.push(...coordsToUse); + } else if (ni === coordsToUse.length - 1) { + // 最近点是段尾 —— 说明我们需要反向接（取反转） + const rev = [...coordsToUse].reverse(); + // 以 rev 的第一个点连接 + if (this.calculateDistance(lastPt, rev[0]) < 1e-6) { + segmentPath.push(...rev.slice(1)); + } else { + // 否则直接把最近点加入并向最近端延伸（避免断链） + segmentPath.push(coordsToUse[ni]); + // 选择靠近终点的方向延伸（更短的一侧） + const distToStart = this.calculateDistance(coordsToUse[ni], coordsToUse[0]); + const distToEnd = this.calculateDistance(coordsToUse[ni], coordsToUse[coordsToUse.length - 1]); + if (distToStart <= distToEnd) { + const toStart = coordsToUse.slice(0, ni).reverse(); + segmentPath.push(...toStart); + } else { + const toEnd = coordsToUse.slice(ni + 1); + segmentPath.push(...toEnd); + } + } + } else { + // 最近点在中间：选择向起点或终点延伸，取较短的一侧 + segmentPath.push(coordsToUse[ni]); + const distToStart = this.calculateDistance(coordsToUse[ni], coordsToUse[0]); + const distToEnd = this.calculateDistance(coordsToUse[ni], coordsToUse[coordsToUse.length - 1]); + if (distToStart <= distToEnd) { + const toStart = coordsToUse.slice(0, ni).reverse(); + segmentPath.push(...toStart); + } else { + const toEnd = coordsToUse.slice(ni + 1); + segmentPath.push(...toEnd); + } + } } } } } - } - } // 如果没有任何有效的路段，返回空路径 if (!hasValidSegment) { this.$message.warning('整段路径中没有找到任何符合条件的路段');