diff --git a/src/main/resources/static/css/synthesisQuery/digitalSignage.css b/src/main/resources/static/css/synthesisQuery/digitalSignage.css index c79f5a0..985cfeb 100644 --- a/src/main/resources/static/css/synthesisQuery/digitalSignage.css +++ b/src/main/resources/static/css/synthesisQuery/digitalSignage.css @@ -145,14 +145,15 @@ body { } .legend-box .legend-item { + padding: 0 6px; display: flex; align-items: center; - justify-content: space-around; + justify-content: space-between; font-size: 13px; } .legend-box .legend-item img { - width: 18px; + width: 14px; height: 18px; } diff --git a/src/main/resources/static/img/digitalSignage/action_1.png b/src/main/resources/static/img/digitalSignage/action_1.png new file mode 100644 index 0000000..69875e2 Binary files /dev/null and b/src/main/resources/static/img/digitalSignage/action_1.png differ diff --git a/src/main/resources/static/img/digitalSignage/action_2.png b/src/main/resources/static/img/digitalSignage/action_2.png new file mode 100644 index 0000000..f58ae2b Binary files /dev/null and b/src/main/resources/static/img/digitalSignage/action_2.png differ diff --git a/src/main/resources/static/img/digitalSignage/action_3.png b/src/main/resources/static/img/digitalSignage/action_3.png new file mode 100644 index 0000000..036d157 Binary files /dev/null and b/src/main/resources/static/img/digitalSignage/action_3.png differ diff --git a/src/main/resources/static/img/digitalSignage/action_4.png b/src/main/resources/static/img/digitalSignage/action_4.png new file mode 100644 index 0000000..496728c Binary files /dev/null and b/src/main/resources/static/img/digitalSignage/action_4.png differ diff --git a/src/main/resources/static/img/digitalSignage/action_5.png b/src/main/resources/static/img/digitalSignage/action_5.png new file mode 100644 index 0000000..4e1e62f Binary files /dev/null and b/src/main/resources/static/img/digitalSignage/action_5.png differ diff --git a/src/main/resources/static/img/digitalSignage/action_6.png b/src/main/resources/static/img/digitalSignage/action_6.png new file mode 100644 index 0000000..792d2c3 Binary files /dev/null and b/src/main/resources/static/img/digitalSignage/action_6.png differ diff --git a/src/main/resources/static/img/digitalSignage/action_7.png b/src/main/resources/static/img/digitalSignage/action_7.png new file mode 100644 index 0000000..c7c7509 Binary files /dev/null and b/src/main/resources/static/img/digitalSignage/action_7.png differ diff --git a/src/main/resources/static/js/synthesisQuery/digitalSignage.js b/src/main/resources/static/js/synthesisQuery/digitalSignage.js index 492a5fe..8c0381d 100644 --- a/src/main/resources/static/js/synthesisQuery/digitalSignage.js +++ b/src/main/resources/static/js/synthesisQuery/digitalSignage.js @@ -11,38 +11,48 @@ let isMap = true; // 是否是地图模式 let projectTitle = ""; // 项目名称 // 图例数据 const legendData = [ + { + name: "协调完成", + value: 0, + icon: "../../img/digitalSignage/action_3.png", + }, { name: "基础开挖", value: 0, - icon: "../../img/digitalSignage/yellow.png", + icon: "../../img/digitalSignage/action_2.png", }, { - name: "开挖完成", + name: "基础开挖完成", value: 0, - icon: "../../img/digitalSignage/green.png", + icon: "../../img/digitalSignage/action_5.png", }, { - name: "浇筑完成", + name: "基础浇筑", value: 0, - icon: "../../img/digitalSignage/blue.png", + icon: "../../img/digitalSignage/action_7.png", + }, + { + name: "基础浇筑完成", + value: 0, + icon: "../../img/digitalSignage/action_4.png", }, { name: "铁塔组立", value: 0, - icon: "../../img/digitalSignage/orange.png", + icon: "../../img/digitalSignage/action_6.png", }, { - name: "组塔完成", + name: "铁塔组立完成", value: 0, icon: "../../img/digitalSignage/zt_red.png", }, { - name: "架线完成", + name: "架线施工完成", value: 0, icon: "../../img/digitalSignage/zt_purple.png", }, { - name: "附件安装", + name: "附件安装完成", value: 0, icon: "../../img/digitalSignage/zt_green.png", }, @@ -66,7 +76,7 @@ const legendData = [ // 地图配置项 const config = { polyline: { - strokeWeight: 1, // 线条宽度 + strokeWeight: 2, // 线条宽度 strokeOpacity: 0.9, // 透明度 strokeStyle: "dashed", // solid(实线)或dashed(虚线) enableEditing: false, // 是否可编辑 @@ -138,13 +148,14 @@ function getLocationInfo(id) { // 百度地图初始化 function initMap() { if (map) { + map.clearOverlays(); map = null; } map = new BMapGL.Map("map-box"); // 以第一个点为中心初始化地图 map.centerAndZoom(new BMapGL.Point(intLng, intLat), 15); - map.setTilt(73); //设置地图的倾斜角度 + // map.setTilt(73); //设置地图的倾斜角度 map.enableScrollWheelZoom(true); // 启用滚轮缩放 // map.setTilt(60); // 设置地图倾斜角度 @@ -157,6 +168,7 @@ function initMap() { // 每次初始化的时候清除所有标点以及线 map.clearOverlays(); + // map.clearLines(); var styleJson = [ // 隐藏道路 { @@ -239,48 +251,59 @@ function initMap() { }); } - setTimeout(() => { - addAllMapPoints(); - addMapLine(); - }, 500); + // setTimeout(() => { + + // }, 500); + + addAllMapPoints(); + addMapLine(); } // 添加标点 function addAllMapPoints() { // 清除地图上所有现有的标记 - // map.clearOverlays(); - + map.clearOverlays(); + clearAllOverlays(); // const bounds = []; const bounds = []; // 使用对象记录已添加的点，避免重复 const addedPoints = {}; const iconTypeList = { - 1: "/gzDigitalSignage/img/digitalSignage/yellow.png", - 2: "/gzDigitalSignage/img/digitalSignage/green.png", - 3: "/gzDigitalSignage/img/digitalSignage/blue.png", - 4: "/gzDigitalSignage/img/digitalSignage/orange.png", - 5: "/gzDigitalSignage/img/digitalSignage/zt_red.png", - 6: "/gzDigitalSignage/img/digitalSignage/zt_purple.png", - 7: "/gzDigitalSignage/img/digitalSignage/zt_green.png", - 0: "/gzDigitalSignage/img/digitalSignage/white.png", - 9: "/gzDigitalSignage/img/digitalSignage/sd.png", - 11: "/gzDigitalSignage/img/digitalSignage/zt_white.png", - 20: "/gzDigitalSignage/img/digitalSignage/project.png", + 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", + 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", }; // 绘制索道标点 + + const getPointKey = (lon, lat) => { + return `${parseFloat(lon).toFixed(6)},${parseFloat(lat).toFixed(6)}`; + }; if (cablewayList && cablewayList.length > 0) { cablewayList.forEach((pointData, index) => { // const pointKey = `117.132663,31.877325`; - const pointKey = `${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 @@ -289,10 +312,10 @@ function addAllMapPoints() { bounds.push(point); // 检查图标是否存在，不存在则使用默认图标 - const iconUrl = iconTypeList[9]; // 默认使用第一个图标 - const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 38), { - anchor: new BMapGL.Size(20, 25), // 修正锚点位置为中心底部 - imageSize: new BMapGL.Size(40, 38), // 与实际图片尺寸一致 + 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 marker = new BMapGL.Marker(point, { icon: myIcon }); @@ -370,9 +393,9 @@ function addAllMapPoints() { const point = new BMapGL.Point(intLng, intLat); bounds.push(point); const iconUrl = iconTypeList[20]; - const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 38), { - anchor: new BMapGL.Size(20, 25), // 修正锚点位置为中心底部 - imageSize: new BMapGL.Size(40, 38), // 与实际图片尺寸一致 + const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 21), { + anchor: new BMapGL.Size(20, 35), // 修正锚点位置为中心底部 + imageSize: new BMapGL.Size(20, 21), // 与实际图片尺寸一致 }); const marker = new BMapGL.Marker(point, { icon: myIcon }); @@ -420,95 +443,215 @@ function addAllMapPoints() { map.addOverlay(marker); } + const markerList = []; + // 绘制杆塔 if (towerList && towerList.length > 0) { + // 存储所有覆盖物 + const overlays = []; + + // 进度状态对应的矩形颜色 + 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, index) => { const pointKey = `${pointData.baiduLon},${pointData.baiduLat}`; - // const pointKey = `116.254,39.965`; - // 如果该坐标点已经添加过标记，则跳过 - // if (addedPoints[pointKey]) { - // console.warn(`重复的点坐标被跳过: ${pointKey}`); - // return; - // } + if (addedPoints[pointKey]) { + console.warn(`重复的点坐标被跳过: ${pointKey}`); + return; + } + addedPoints[pointKey] = true; - // addedPoints[pointKey] = true; - - // if (pointData.towerProgress == 0) return; const point = new BMapGL.Point( pointData.baiduLon, pointData.baiduLat ); bounds.push(point); - // 检查图标是否存在，不存在则使用默认图标 - const iconUrl = iconTypeList[pointData.towerProgress]; // 默认使用第一个图标 - const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 38), { - anchor: new BMapGL.Size(16, 20), // 修正锚点位置为中心底部 - imageSize: new BMapGL.Size(40, 38), // 与实际图片尺寸一致 + // 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 marker = new BMapGL.Marker(point, { icon: myIcon }); + map.addOverlay(marker); + overlays.push(marker); - // 添加信息窗口 - let infoContent = ""; + if (pointData.towerProgress == 3) { + const towerPouringVos = pointData.towerPouringVos; - // 索道 - infoContent = ` -
-

- ${pointData.towerName} -

-
- 基础开挖 - ${pointData.time1 || "/"} -
-
- 基础开挖完成 - ${pointData.time2 || "/"} -
-
- 基础浇筑完成 - ${pointData.time3 || "/"} -
-
- 铁塔组立 - ${pointData.time4 || "/"} -
-
- 铁塔组立完成 - ${pointData.time5 || "/"} -
-
- 架线施工完成 - ${pointData.time6 || "/"} -
-
`; + // 矩形大小（经纬度差值） + const rectangleSize = 0.0015; // 可根据需要调整 + + // 计算矩形四个顶点坐标 + const rectanglePoints = [ + new BMapGL.Point( + point.lng - rectangleSize, + point.lat - rectangleSize + ), // 西南(A) + new BMapGL.Point( + point.lng - rectangleSize, + point.lat + rectangleSize + ), // 西北(B) + new BMapGL.Point( + point.lng + rectangleSize, + point.lat + rectangleSize + ), // 东北(C) + new BMapGL.Point( + point.lng + rectangleSize, + point.lat - rectangleSize + ), // 东南(D) + ]; + + // 1. 绘制完整矩形背景 + 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); + overlays.push(backgroundRect); + + // 2. 在四个顶点添加彩色小圆点 + towerPouringVos.forEach((e, index) => { + const cornerColor = + progressColors[e.finishStatus] || "#888"; // 默认灰色 + + // 创建圆形覆盖物 + const circle = new BMapGL.Circle( + rectanglePoints[index], + 20, + { + // 5米半径 + strokeColor: cornerColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: cornerColor, + fillOpacity: 1, + // 设置zIndex使圆点显示在最上层 + enableEditing: false, + enableMassClear: false, + } + ); + map.addOverlay(circle); + overlays.push(circle); + }); + } + + if (pointData.towerProgress == 4) { + // 矩形大小（经纬度差值） + const rectangleSize = 0.0015; // 可根据需要调整 + // 计算矩形四个顶点坐标 + const rectanglePoints = [ + new BMapGL.Point( + point.lng - rectangleSize, + point.lat - rectangleSize + ), // 西南(A) + new BMapGL.Point( + point.lng - rectangleSize, + point.lat + rectangleSize + ), // 西北(B) + new BMapGL.Point( + point.lng + rectangleSize, + point.lat + rectangleSize + ), // 东北(C) + new BMapGL.Point( + point.lng + rectangleSize, + point.lat - rectangleSize + ), // 东南(D) + ]; + + // 1. 绘制完整矩形背景 + 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); + overlays.push(backgroundRect); + + // 2. 在四个顶点添加彩色小圆点 + const cornerColor = progressColors[1] || "#888"; // 默认灰色 + + // 创建圆形覆盖物 + + rectanglePoints.forEach((e) => { + const circle = new BMapGL.Circle(e, 20, { + // 5米半径 + strokeColor: cornerColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: cornerColor, + fillOpacity: 1, + // 设置zIndex使圆点显示在最上层 + enableEditing: false, + enableMassClear: false, + }); + map.addOverlay(circle); + overlays.push(circle); + }); + } + + // 3. 添加信息窗口（原有代码保持不变） + let infoContent = ` +
+

${pointData.towerName}

+
+ 基础开挖 + ${pointData.time1 || "/"} +
+
+ 基础开挖完成 + ${pointData.time2 || "/"} +
+
+ 基础浇筑完成 + ${pointData.time3 || "/"} +
+
+ 铁塔组立 + ${pointData.time4 || "/"} +
+
+ 铁塔组立完成 + ${pointData.time5 || "/"} +
+
+ 架线施工完成 + ${pointData.time6 || "/"} +
+
`; - // 创建信息窗口，禁用默认样式 const infoWindow = new BMapGL.InfoWindow(infoContent, { - width: 0, // 宽度设为0，让内容决定宽度 - height: 0, // 高度设为0，让内容决定高度 - offset: new BMapGL.Size(0, -20), // 调整偏移量 - enableAutoPan: true, // 自动平移地图 - enableCloseOnClick: true, // 点击地图不关闭 + width: 0, + height: 0, + offset: new BMapGL.Size(0, -20), + enableAutoPan: true, + enableCloseOnClick: true, }); marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); - - // 移除百度地图默认添加的三角箭头 setTimeout(() => { 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 = "none"; popup.style.border = "none"; popup.style.boxShadow = "none"; @@ -516,8 +659,26 @@ function addAllMapPoints() { }, 50); }); - map.addOverlay(marker); + // 4. 添加标签 + const label = new BMapGL.Label(pointData.towerName, { + position: point, + offset: new BMapGL.Size(-15, -70), + }); + map.addOverlay(label); + overlays.push(label); + label.setStyle({ + color: "#fff", + fontSize: "20px", + backgroundColor: "transparent", + border: "none", + padding: "0", + }); }); + + // 添加清除覆盖物的方法（如果需要） + function clearOverlays() { + overlays.forEach((overlay) => map.removeOverlay(overlay)); + } } // 绘制交叉跨越 @@ -539,7 +700,7 @@ function addAllMapPoints() { bounds.push(point); // 检查图标是否存在，不存在则使用默认图标 - const iconUrl = iconTypeList[11]; // 默认使用第一个图标 + 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), // 与实际图片尺寸一致 @@ -670,6 +831,13 @@ function addAllMapPoints() { } } +function clearAllOverlays() { + map.clearOverlays(); + // 清除可能遗留的自定义覆盖物 + const customOverlays = document.querySelectorAll(".BMap_customOverlay"); + customOverlays.forEach((overlay) => overlay.remove()); +} + function calculateBounds(points) { console.log(points, "points999"); var lngs = points.map((p) => p.lng); @@ -697,8 +865,8 @@ function addMapLine() { let lineColor = ""; let lineStyle = ""; if ( - startPoint.towerProgress === 6 && - endPoint.towerProgress === 6 + startPoint.towerProgress === 8 && + endPoint.towerProgress === 8 ) { lineColor = "#5ad8a6"; lineStyle = "solid";