From 6741365a87cd1ed58d3b042c67d01c27666c9ed0 Mon Sep 17 00:00:00 2001 From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com> Date: Wed, 21 May 2025 15:08:23 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=82=B9=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{action_5.png => icon_five.png} | Bin .../{action_4.png => icon_four.png} | Bin .../{action_1.png => icon_one.png} | Bin .../{action_7.png => icon_seven.png} | Bin .../{action_6.png => icon_six.png} | Bin .../{action_3.png => icon_three.png} | Bin .../{action_2.png => icon_two.png} | Bin .../js/synthesisQuery/digitalSignage.js | 532 ++++++++++++++++-- 8 files changed, 479 insertions(+), 53 deletions(-) rename src/main/resources/static/img/digitalSignage/{action_5.png => icon_five.png} (100%) rename src/main/resources/static/img/digitalSignage/{action_4.png => icon_four.png} (100%) rename src/main/resources/static/img/digitalSignage/{action_1.png => icon_one.png} (100%) rename src/main/resources/static/img/digitalSignage/{action_7.png => icon_seven.png} (100%) rename src/main/resources/static/img/digitalSignage/{action_6.png => icon_six.png} (100%) rename src/main/resources/static/img/digitalSignage/{action_3.png => icon_three.png} (100%) rename src/main/resources/static/img/digitalSignage/{action_2.png => icon_two.png} (100%) diff --git a/src/main/resources/static/img/digitalSignage/action_5.png b/src/main/resources/static/img/digitalSignage/icon_five.png similarity index 100% rename from src/main/resources/static/img/digitalSignage/action_5.png rename to src/main/resources/static/img/digitalSignage/icon_five.png diff --git a/src/main/resources/static/img/digitalSignage/action_4.png b/src/main/resources/static/img/digitalSignage/icon_four.png similarity index 100% rename from src/main/resources/static/img/digitalSignage/action_4.png rename to src/main/resources/static/img/digitalSignage/icon_four.png diff --git a/src/main/resources/static/img/digitalSignage/action_1.png b/src/main/resources/static/img/digitalSignage/icon_one.png similarity index 100% rename from src/main/resources/static/img/digitalSignage/action_1.png rename to src/main/resources/static/img/digitalSignage/icon_one.png diff --git a/src/main/resources/static/img/digitalSignage/action_7.png b/src/main/resources/static/img/digitalSignage/icon_seven.png similarity index 100% rename from src/main/resources/static/img/digitalSignage/action_7.png rename to src/main/resources/static/img/digitalSignage/icon_seven.png diff --git a/src/main/resources/static/img/digitalSignage/action_6.png b/src/main/resources/static/img/digitalSignage/icon_six.png similarity index 100% rename from src/main/resources/static/img/digitalSignage/action_6.png rename to src/main/resources/static/img/digitalSignage/icon_six.png diff --git a/src/main/resources/static/img/digitalSignage/action_3.png b/src/main/resources/static/img/digitalSignage/icon_three.png similarity index 100% rename from src/main/resources/static/img/digitalSignage/action_3.png rename to src/main/resources/static/img/digitalSignage/icon_three.png diff --git a/src/main/resources/static/img/digitalSignage/action_2.png b/src/main/resources/static/img/digitalSignage/icon_two.png similarity index 100% rename from src/main/resources/static/img/digitalSignage/action_2.png rename to src/main/resources/static/img/digitalSignage/icon_two.png diff --git a/src/main/resources/static/js/synthesisQuery/digitalSignage.js b/src/main/resources/static/js/synthesisQuery/digitalSignage.js index 8c0381d..44e4b8a 100644 --- a/src/main/resources/static/js/synthesisQuery/digitalSignage.js +++ b/src/main/resources/static/js/synthesisQuery/digitalSignage.js @@ -14,32 +14,32 @@ const legendData = [ { name: "协调完成", value: 0, - icon: "../../img/digitalSignage/action_3.png", + icon: "../../img/digitalSignage/icon_three.png", }, { name: "基础开挖", value: 0, - icon: "../../img/digitalSignage/action_2.png", + icon: "../../img/digitalSignage/icon_two.png", }, { name: "基础开挖完成", value: 0, - icon: "../../img/digitalSignage/action_5.png", + icon: "../../img/digitalSignage/icon_five.png", }, { name: "基础浇筑", value: 0, - icon: "../../img/digitalSignage/action_7.png", + icon: "../../img/digitalSignage/icon_seven.png", }, { name: "基础浇筑完成", value: 0, - icon: "../../img/digitalSignage/action_4.png", + icon: "../../img/digitalSignage/icon_four.png", }, { name: "铁塔组立", value: 0, - icon: "../../img/digitalSignage/action_6.png", + icon: "../../img/digitalSignage/icon_six.png", }, { name: "铁塔组立完成", @@ -149,6 +149,7 @@ function getLocationInfo(id) { function initMap() { if (map) { map.clearOverlays(); + clearAllOverlays(); map = null; } map = new BMapGL.Map("map-box"); @@ -251,30 +252,27 @@ function initMap() { }); } - // setTimeout(() => { - - // }, 500); - - addAllMapPoints(); - addMapLine(); + setTimeout(() => { + addAllMapPoints(); + addMapLine(); + }, 1000); } // 添加标点 function addAllMapPoints() { - // 清除地图上所有现有的标记 map.clearOverlays(); - clearAllOverlays(); + // 清除地图上所有现有的标记 // const bounds = []; const bounds = []; // 使用对象记录已添加的点，避免重复 const addedPoints = {}; const iconTypeList = { - 1: "../../img/digitalSignage/action_3.png", - 2: "../../img/digitalSignage/action_2.png", - 3: "../../img/digitalSignage/action_5.png", - 4: "../../img/digitalSignage/action_7.png", - 5: "../../img/digitalSignage/action_4.png", - 6: "../../img/digitalSignage/action_6.png", + 1: "../../img/digitalSignage/icon_three.png", + 2: "../../img/digitalSignage/icon_two.png", + 3: "../../img/digitalSignage/icon_five.png", + 4: "../../img/digitalSignage/icon_seven.png", + 5: "../../img/digitalSignage/icon_four.png", + 6: "../../img/digitalSignage/icon_six.png", 7: "../../img/digitalSignage/zt_red.png", 8: "../../img/digitalSignage/zt_purple.png", 9: "../../img/digitalSignage/zt_green.png", @@ -292,18 +290,18 @@ function addAllMapPoints() { if (cablewayList && cablewayList.length > 0) { cablewayList.forEach((pointData, index) => { // const pointKey = `117.132663,31.877325`; - const pointKey = getPointKey( - pointData.baiduLon, - pointData.baiduLat - ); + // const pointKey = getPointKey( + // pointData.baiduLon, + // pointData.baiduLat + // ); - // // 如果该坐标点已经添加过标记，则跳过 - if (addedPoints[pointKey]) { - console.warn(`重复的点坐标被跳过: ${pointKey}`); - return; - } + // // // 如果该坐标点已经添加过标记，则跳过 + // if (addedPoints[pointKey]) { + // console.warn(`重复的点坐标被跳过: ${pointKey}`); + // return; + // } - addedPoints[pointKey] = true; + // addedPoints[pointKey] = true; const point = new BMapGL.Point( pointData.baiduLon, pointData.baiduLat @@ -313,9 +311,9 @@ function addAllMapPoints() { // 检查图标是否存在，不存在则使用默认图标 const iconUrl = iconTypeList[11]; // 默认使用第一个图标 - const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 21), { - anchor: new BMapGL.Size(10, 40), // 修正锚点位置为中心底部 - imageSize: new BMapGL.Size(20, 21), // 与实际图片尺寸一致 + const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 40), { + anchor: new BMapGL.Size(30, 30), // 修正锚点位置为中心底部 + imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致 }); const marker = new BMapGL.Marker(point, { icon: myIcon }); @@ -349,7 +347,7 @@ function addAllMapPoints() {
最大坡度 ${pointData.maxSlope} ° -
+ `; // 创建信息窗口，禁用默认样式 @@ -390,12 +388,19 @@ function addAllMapPoints() { // 绘制项目部 if (intLng && intLat) { + const pointKey = getPointKey(intLng, intLat); + // // 如果该坐标点已经添加过标记，则跳过 + if (addedPoints[pointKey]) { + console.warn(`重复的点坐标被跳过: ${pointKey}`); + return; + } + addedPoints[pointKey] = true; const point = new BMapGL.Point(intLng, intLat); bounds.push(point); const iconUrl = iconTypeList[20]; - const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 21), { - anchor: new BMapGL.Size(20, 35), // 修正锚点位置为中心底部 - imageSize: new BMapGL.Size(20, 21), // 与实际图片尺寸一致 + const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 40), { + anchor: new BMapGL.Size(20, 40), // 修正锚点位置为中心底部 + imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致 }); const marker = new BMapGL.Marker(point, { icon: myIcon }); @@ -405,7 +410,7 @@ function addAllMapPoints() {

${projectTitle} -

+
`; // 创建信息窗口，禁用默认样式 @@ -443,8 +448,6 @@ function addAllMapPoints() { map.addOverlay(marker); } - const markerList = []; - // 绘制杆塔 if (towerList && towerList.length > 0) { // 存储所有覆盖物 @@ -459,7 +462,12 @@ function addAllMapPoints() { }; towerList.forEach((pointData, index) => { - const pointKey = `${pointData.baiduLon},${pointData.baiduLat}`; + const pointKey = getPointKey( + pointData.baiduLon, + pointData.baiduLat + ); + + // // 如果该坐标点已经添加过标记，则跳过 if (addedPoints[pointKey]) { console.warn(`重复的点坐标被跳过: ${pointKey}`); return; @@ -473,10 +481,21 @@ function addAllMapPoints() { bounds.push(point); // 1. 创建主标记点 - const iconUrl = iconTypeList[pointData.towerProgress]; - const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 40), { - anchor: new BMapGL.Size(10, 35), - imageSize: new BMapGL.Size(20, 40), + const iconUrl = iconTypeList[parseInt(pointData.towerProgress)]; + + let X = 40; + let Y = 40; + let anchorX = 20; + let anchorY = 20; + if ([1, 2, 3, 5, 6].includes(pointData.towerProgress)) { + X = 15; + Y = 33.75; + anchorX = 7.5; + anchorY = 30; + } + const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(X, Y), { + anchor: new BMapGL.Size(anchorX, anchorY), + imageSize: new BMapGL.Size(X, Y), }); const marker = new BMapGL.Marker(point, { icon: myIcon }); @@ -602,7 +621,7 @@ function addAllMapPoints() { }); } - // 3. 添加信息窗口（原有代码保持不变） + // 3. 添加信息窗口 let infoContent = `

${pointData.towerName}

@@ -684,14 +703,16 @@ function addAllMapPoints() { // 绘制交叉跨越 if (crossingListNew.length > 0) { crossingListNew.forEach((pointData, index) => { - const pointKey = `${pointData.baiduLon},${pointData.baiduLat}`; - // const pointKey = `116.254,39.965`; - // 如果该坐标点已经添加过标记，则跳过 + const pointKey = getPointKey( + pointData.baiduLon, + pointData.baiduLat + ); + + // // 如果该坐标点已经添加过标记，则跳过 if (addedPoints[pointKey]) { console.warn(`重复的点坐标被跳过: ${pointKey}`); return; } - addedPoints[pointKey] = true; const point = new BMapGL.Point( pointData.baiduLon, @@ -701,9 +722,9 @@ function addAllMapPoints() { // 检查图标是否存在，不存在则使用默认图标 const iconUrl = iconTypeList[21]; // 默认使用第一个图标 - const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 38), { - anchor: new BMapGL.Size(16, 20), // 修正锚点位置为中心底部 - imageSize: new BMapGL.Size(40, 38), // 与实际图片尺寸一致 + const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 40), { + anchor: new BMapGL.Size(20, 20), // 修正锚点位置为中心底部 + imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致 }); const marker = new BMapGL.Marker(point, { icon: myIcon }); @@ -831,6 +852,411 @@ function addAllMapPoints() { } } +// function addAllMapPoints() { +// map.clearOverlays(); +// const bounds = []; +// const addedPoints = {}; + +// // 预加载所有图标 +// const iconTypeList = { +// 1: "../../img/digitalSignage/icon_three.png", +// 2: "../../img/digitalSignage/action_2.png", +// 3: "../../img/digitalSignage/action_5.png", +// 4: "../../img/digitalSignage/action_7.png", +// 5: "../../img/digitalSignage/action_4.png", +// 6: "../../img/digitalSignage/action_6.png", +// 7: "../../img/digitalSignage/zt_red.png", +// 8: "../../img/digitalSignage/zt_purple.png", +// 9: "../../img/digitalSignage/zt_green.png", +// 0: "../../img/digitalSignage/white.png", +// 11: "../../img/digitalSignage/sd.png", +// 20: "../../img/digitalSignage/project.png", +// 21: "../../img/digitalSignage/zt_white.png", +// }; + +// // 预加载所有图标 +// Object.values(iconTypeList).forEach((url) => { +// new Image().src = url; +// }); + +// const getPointKey = (lon, lat) => +// `${parseFloat(lon).toFixed(6)},${parseFloat(lat).toFixed(6)}`; + +// // 创建标记的通用函数 +// const createMarker = ( +// point, +// iconKey, +// size, +// anchor, +// imageSize, +// infoContent +// ) => { +// const iconUrl = iconTypeList[iconKey] || iconTypeList[0]; // 默认使用白色图标 +// const icon = new BMapGL.Icon( +// iconUrl, +// new BMapGL.Size(size.width, size.height), +// { +// anchor: new BMapGL.Size(anchor.width, anchor.height), +// imageSize: new BMapGL.Size(imageSize.width, imageSize.height), +// } +// ); + +// const marker = new BMapGL.Marker(point, { icon }); + +// if (infoContent) { +// const infoWindow = new BMapGL.InfoWindow(infoContent, { +// width: 0, +// height: 0, +// offset: new BMapGL.Size(0, -20), +// enableAutoPan: true, +// enableCloseOnClick: true, +// }); + +// marker.addEventListener("click", function () { +// this.openInfoWindow(infoWindow); +// setTimeout(removeBubbleArrow, 50); +// }); +// } + +// return marker; +// }; + +// // 移除百度地图默认气泡箭头 +// const removeBubbleArrow = () => { +// const infoWindowElements = +// document.getElementsByClassName("BMap_bubble_pop"); +// if (infoWindowElements.length > 0) { +// const popup = infoWindowElements[0]; +// const arrows = popup.getElementsByClassName("BMap_bubble_arrow"); +// while (arrows[0]) { +// arrows[0].parentNode.removeChild(arrows[0]); +// } +// popup.style.background = +// popup.style.border = +// popup.style.boxShadow = +// "none"; +// } +// }; + +// // 绘制索道标点 +// if (cablewayList?.length > 0) { +// cablewayList.forEach((pointData) => { +// const point = new BMapGL.Point( +// pointData.baiduLon, +// pointData.baiduLat +// ); +// bounds.push(point); + +// const infoContent = ` +//
+//

索道运输

+//
+// 索道位置 +// ${pointData.towerName} +//
+//
+// 索道长度 +// ${pointData.cablewayLength} KM +//
+//
+// 最大载重 +// ${pointData.maxHeight} kg +//
+//
+// 安全距离 +// ${pointData.safetyDistance} m +//
+//
+// 最大坡度 +// ${pointData.maxSlope} ° +//
+//
`; + +// const marker = createMarker( +// point, +// 11, +// { width: 20, height: 21 }, +// { width: 10, height: 40 }, +// { width: 20, height: 21 }, +// infoContent +// ); + +// map.addOverlay(marker); +// }); +// } + +// // 绘制项目部 +// if (intLng && intLat) { +// const pointKey = getPointKey(intLng, intLat); +// if (!addedPoints[pointKey]) { +// addedPoints[pointKey] = true; +// const point = new BMapGL.Point(intLng, intLat); +// bounds.push(point); + +// const infoContent = ` +//
+//

${projectTitle}

+//
`; + +// const marker = createMarker( +// point, +// 20, +// { width: 20, height: 21 }, +// { width: 20, height: 35 }, +// { width: 20, height: 21 }, +// infoContent +// ); + +// map.addOverlay(marker); +// } +// } + +// // 绘制杆塔 +// if (towerList?.length > 0) { +// const progressColors = { +// 0: "rgba(255, 0, 0, 0.3)", +// 3: "rgba(255, 165, 0, 0.3)", +// 1: "rgba(0, 255, 0, 0.3)", +// }; + +// towerList.forEach((pointData) => { +// const pointKey = getPointKey( +// pointData.baiduLon, +// pointData.baiduLat +// ); +// if (!addedPoints[pointKey]) { +// addedPoints[pointKey] = true; +// const point = new BMapGL.Point( +// pointData.baiduLon, +// pointData.baiduLat +// ); +// bounds.push(point); + +// // 创建主标记点 +// const infoContent = ` +//
+//

${pointData.towerName}

+//
+// 基础开挖 +// ${pointData.time1 || "/"} +//
+//
+// 基础开挖完成 +// ${pointData.time2 || "/"} +//
+//
+// 基础浇筑完成 +// ${pointData.time3 || "/"} +//
+//
+// 铁塔组立 +// ${pointData.time4 || "/"} +//
+//
+// 铁塔组立完成 +// ${pointData.time5 || "/"} +//
+//
+// 架线施工完成 +// ${pointData.time6 || "/"} +//
+//
`; + +// const marker = createMarker( +// point, +// pointData.towerProgress, +// { width: 20, height: 40 }, +// { width: 10, height: 35 }, +// { width: 20, height: 40 }, +// infoContent +// ); + +// map.addOverlay(marker); + +// // 添加标签 +// const label = new BMapGL.Label(pointData.towerName, { +// position: point, +// offset: new BMapGL.Size(-15, -70), +// }); +// label.setStyle({ +// color: "#fff", +// fontSize: "20px", +// backgroundColor: "transparent", +// border: "none", +// padding: "0", +// }); +// map.addOverlay(label); + +// // 处理特殊进度状态 +// if ([3, 4].includes(pointData.towerProgress)) { +// const rectangleSize = 0.0015; +// const rectanglePoints = [ +// new BMapGL.Point( +// point.lng - rectangleSize, +// point.lat - rectangleSize +// ), +// new BMapGL.Point( +// point.lng - rectangleSize, +// point.lat + rectangleSize +// ), +// new BMapGL.Point( +// point.lng + rectangleSize, +// point.lat + rectangleSize +// ), +// new BMapGL.Point( +// point.lng + rectangleSize, +// point.lat - rectangleSize +// ), +// ]; + +// // 绘制背景矩形 +// const backgroundRect = new BMapGL.Polygon(rectanglePoints, { +// strokeColor: "#333", +// strokeWeight: 1, +// strokeOpacity: 0.8, +// fillColor: "rgba(200, 200, 200, 0.2)", +// fillOpacity: 0.4, +// }); +// map.addOverlay(backgroundRect); + +// // 添加四个角点 +// const pointsToMark = +// pointData.towerProgress === 3 +// ? pointData.towerPouringVos || [] +// : Array(4).fill({ finishStatus: 1 }); + +// pointsToMark.forEach((e, index) => { +// const cornerColor = +// progressColors[e.finishStatus] || "#888"; +// const circle = new BMapGL.Circle( +// rectanglePoints[index], +// 20, +// { +// strokeColor: cornerColor, +// strokeWeight: 2, +// strokeOpacity: 0.8, +// fillColor: cornerColor, +// fillOpacity: 1, +// enableEditing: false, +// enableMassClear: false, +// } +// ); +// map.addOverlay(circle); +// }); +// } +// } +// }); +// } + +// // 绘制交叉跨越 +// if (crossingListNew.length > 0) { +// crossingListNew.forEach((pointData) => { +// const pointKey = getPointKey( +// pointData.baiduLon, +// pointData.baiduLat +// ); +// if (!addedPoints[pointKey]) { +// addedPoints[pointKey] = true; +// const point = new BMapGL.Point( +// pointData.baiduLon, +// pointData.baiduLat +// ); +// bounds.push(point); + +// const infoContent = ` +//
+//
+//

${pointData.towerInfoVo.towerName}

+//
+// 基础开挖 +// ${ +// pointData.towerInfoVo.time1 || "/" +// } +//
+//
+// 开挖完成 +// ${ +// pointData.towerInfoVo.time2 || "/" +// } +//
+//
+// 浇筑完成 +// ${ +// pointData.towerInfoVo.time3 || "/" +// } +//
+//
+// 铁塔组立 +// ${ +// pointData.towerInfoVo.time4 || "/" +// } +//
+//
+// 组塔完成 +// ${ +// pointData.towerInfoVo.time5 || "/" +// } +//
+//
+// 架线完成 +// ${ +// pointData.towerInfoVo.time6 || "/" +// } +//
+//
+// 附件安装 +// ${ +// pointData.towerInfoVo.time7 || "/" +// } +//
+//
+//
+//

交叉跨越信息 ( ${pointData.spanTowerName} )

+//
+// 上层线路 +// ${pointData.upperLine} +//
+//
+// 下层线路 +// ${pointData.lowerLine} +//
+//
+// 交叉角度 +// ${pointData.intersectionAngle} ° +//
+//
+// 垂直距离 +// ${pointData.verticalDistance} m +//
+//
+// 安全裕度 +// ${pointData.safetyMargin} ° +//
+//
+//
`; + +// const marker = createMarker( +// point, +// 21, +// { width: 40, height: 38 }, +// { width: 16, height: 20 }, +// { width: 40, height: 38 }, +// infoContent +// ); + +// map.addOverlay(marker); +// } +// }); +// } + +// // 调整视野 +// if (bounds.length > 0) { +// map.setViewport(calculateBounds(bounds), { +// zoomFactor: 0.5, +// }); +// } +// } + function clearAllOverlays() { map.clearOverlays(); // 清除可能遗留的自定义覆盖物