diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js index 723925f8..eaab0514 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js @@ -9,7 +9,7 @@ import { EventTopics } from "@screen/utils/enum.js"; import { debounce, cloneDeep } from "lodash"; import Vue from "vue"; -import { markerClusterIns, getContent } from "./map"; +import { markerClusterIns, getContent, getLatAndLng } from "./map"; const cameraIcon = { // 球机 "00": require("@screen/images/deviceType/ball_active.svg"), @@ -273,11 +273,7 @@ function lngLatMapHandle(markers, cb) { markers.forEach((markerData) => { const lnglat = markerData.lnglat; if (lnglat) { - const getLatAndLng = () => { - if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] }; - else return lnglat; - }; - const { lat, lng } = getLatAndLng(); + const { lat, lng } = getLatAndLng(lnglat); const lngLatStr = `${lng}/${lat}`; cb(lngLatStr, markerData); } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js index 4feedb0e..3ad07135 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js @@ -67,7 +67,6 @@ export class MarkerCluster { "font-size:15px; background:#641f14; color:#a86358;", data ); - console.log(); this.markerCluster.addData(data); console.log( "%c [ this.markerCluster ]-234-「map.js」", @@ -254,8 +253,27 @@ export class MarkerCluster { (removeData) => removeData === item ); const { stakeMark } = item.extData; - window.graphInstance.removeNode(stakeMark); - + const existNode = graphInstance.getCellById(stakeMark); + const lnglat = item.lnglat; + if (lnglat) { + const { lat, lng } = getLatAndLng(lnglat); + const lngLatStr = `${lng}/${lat}`; + const lngLatArr = lngLatMap[lngLatStr]; //已是移除后的数据集 + console.log(lngLatArr, lngLatArr?.length, "length"); + if (existNode) { + window.graphInstance.removeNode(existNode.id); + if (lngLatArr) { + if (lngLatArr.length === 0) console.log(); + // window.graphInstance.removeNode(stakeMark); + else { + //移除并重新添加 + // window.graphInstance.removeNode(stakeMark); + console.log("重新ADD", lngLatArr); + // addInGraphHandle(lngLatArr); + } + } //else window.graphInstance.removeNode(stakeMark); + } + } if (findIndex > -1) this.data.splice(findIndex, 1); }); @@ -345,11 +363,7 @@ export function marksAddInGraph(data) { for (let markerData of data || []) { const lnglat = markerData.lnglat; if (lnglat) { - const getLatAndLng = () => { - if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] }; - else return lnglat; - }; - const { lat, lng } = getLatAndLng(); + const { lat, lng } = getLatAndLng(lnglat); const lngLatStr = `${lng}/${lat}`; const data = lngLatMap[lngLatStr]; addInGraphHandle(data); @@ -370,7 +384,7 @@ export function addInGraphHandle(data) { ) - 54.394) * window.canvasRatio + - window.canvasWidth * 0.0755; //K54+394 开始到K208+979计算的比例尺 + window.canvasWidth * window.offsetRatio; //K54+394 开始到K208+979计算的比例尺 const node = {}; if (data.length === 1) { @@ -408,4 +422,9 @@ export function addInGraphHandle(data) { } } +export function getLatAndLng(lnglat) { + if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] }; + else return lnglat; +} + export const markerClusterIns = new MarkerCluster(); diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue index ef1f2f34..7b4a4367 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue @@ -248,6 +248,7 @@ export default { const ratio = ((width - width * 0.08 * 2) / allActualDis); //减去俩侧空白区域 才是画布要计算的比例 window.canvasRatio = ratio; window.canvasWidth = width; + window.offsetRatio = 0.0755; this.list.forEach(item => this.allInstance += item.distance); for (let index in this.list) { @@ -256,17 +257,17 @@ export default { await this.drawTag(info, graph); } //文字覆盖问题修复 - graph.getCellById("K79+010").translate(-10, 0) - graph.getCellById("K83+885").translate(-10, 0); - graph.getCellById("K86+499").translate(10, 0); + graph.getCellById("K79+010_底部文字").translate(-10, 0) + graph.getCellById("K83+885_底部文字").translate(-10, 0); + graph.getCellById("K86+499_底部文字").translate(10, 0); - graph.getCellById("K114+405").translate(-10, 0); - graph.getCellById("K117+878").translate(10, 0); + graph.getCellById("K114+405_底部文字").translate(-10, 0); + graph.getCellById("K117+878_底部文字").translate(10, 0); - graph.getCellById("K159+156").translate(8, 0); + graph.getCellById("K159+156_底部文字").translate(8, 0); - graph.getCellById("K155+652").translate(-10, 0); - graph.getCellById("K190+495").translate(10, 0); + graph.getCellById("K155+652_底部文字").translate(-10, 0); + graph.getCellById("K190+495_底部文字").translate(10, 0); }, async drayLine(text, graph, isFoot = false) { @@ -333,14 +334,14 @@ export default { }); imageNode.translate(width * 0.07, 0); - for (var i = 0; i < info.name.length; i++) { + for (var i = 0; i < info.name.length; i++) { // const imageLabelNode = graph.addNode({ label: info.name[i], x: this.translateX, y: i * 15, attrs: { text: { fill: "#ffffff", fontSize: 12 } } }); - imageLabelNode.translate(width * 0.0755, 50 + y); + imageLabelNode.translate(width * window.offsetRatio, 50 + y); } // 修改文字位置 - const buttomLabelNode = graph.addNode({ label: info.code, x: this.translateX, y: 175, attrs: { text: { fill: "#ffffff", fontSize: 10.5 } }, id: info.code }); - buttomLabelNode.translate(width * 0.0755, 0); + const buttomLabelNode = graph.addNode({ label: info.code, x: this.translateX, y: 175, attrs: { text: { fill: "#ffffff", fontSize: 10.5 } }, id: info.code + "_底部文字" }); + buttomLabelNode.translate(width * window.offsetRatio, 0); }, loadImage(url) {