增加标点

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;
 }
 

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 = `
-                <div class="map-container">
-                        <h4>
-                            ${pointData.towerName}
-                        </h4>
-                        <div class="map-container-item">
-                            <span>基础开挖</span>
-                            <span>${pointData.time1 || "/"}</span>
-                        </div>
-                        <div class="map-container-item">
-                            <span>基础开挖完成</span>
-                            <span>${pointData.time2 || "/"}</span>
-                        </div>
-                        <div class="map-container-item">
-                            <span>基础浇筑完成</span>
-                            <span>${pointData.time3 || "/"}</span>
-                        </div>
-                        <div class="map-container-item">
-                            <span>铁塔组立</span>
-                            <span>${pointData.time4 || "/"}</span>
-                        </div>
-                        <div class="map-container-item">
-                            <span>铁塔组立完成</span>
-                            <span>${pointData.time5 || "/"}</span>
-                        </div>
-                        <div class="map-container-item">
-                            <span>架线施工完成</span>
-                            <span>${pointData.time6 || "/"}</span>
-                        </div>
-                </div>`;
+                // 矩形大小（经纬度差值）
+                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 = `
+            <div class="map-container">
+                <h4>${pointData.towerName}</h4>
+                <div class="map-container-item">
+                    <span>基础开挖</span>
+                    <span>${pointData.time1 || "/"}</span>
+                </div>
+                <div class="map-container-item">
+                    <span>基础开挖完成</span>
+                    <span>${pointData.time2 || "/"}</span>
+                </div>
+                <div class="map-container-item">
+                    <span>基础浇筑完成</span>
+                    <span>${pointData.time3 || "/"}</span>
+                </div>
+                <div class="map-container-item">
+                    <span>铁塔组立</span>
+                    <span>${pointData.time4 || "/"}</span>
+                </div>
+                <div class="map-container-item">
+                    <span>铁塔组立完成</span>
+                    <span>${pointData.time5 || "/"}</span>
+                </div>
+                <div class="map-container-item">
+                    <span>架线施工完成</span>
+                    <span>${pointData.time6 || "/"}</span>
+                </div>
+            </div>`;
 
-            // 创建信息窗口，禁用默认样式
             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";