标点优化

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() {
                  <div class="map-container-item-ropeway">
                      <span>最大坡度</span>
                      <span>${pointData.maxSlope} °</span>
-                 </div>                      
+                 </div>
              </div>`;
 
             // 创建信息窗口，禁用默认样式
@@ -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() {
          <div class="map-container">
                  <h4>
                      ${projectTitle}
-                 </h4>    
+                 </h4>
          </div>`;
 
         // 创建信息窗口，禁用默认样式
@@ -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 = `
             <div class="map-container">
                 <h4>${pointData.towerName}</h4>
@@ -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 = `
+//                 <div class="map-container">
+//                     <h4>索道运输</h4>
+//                     <div class="map-container-item-ropeway">
+//                         <span>索道位置</span>
+//                         <span>${pointData.towerName}</span>
+//                     </div>
+//                     <div class="map-container-item-ropeway">
+//                         <span>索道长度</span>
+//                         <span>${pointData.cablewayLength} KM</span>
+//                     </div>
+//                     <div class="map-container-item-ropeway">
+//                         <span>最大载重</span>
+//                         <span>${pointData.maxHeight} kg</span>
+//                     </div>
+//                     <div class="map-container-item-ropeway">
+//                         <span>安全距离</span>
+//                         <span>${pointData.safetyDistance} m</span>
+//                     </div>
+//                     <div class="map-container-item-ropeway">
+//                         <span>最大坡度</span>
+//                         <span>${pointData.maxSlope} °</span>
+//                     </div>
+//                 </div>`;
+
+//             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 = `
+//                 <div class="map-container">
+//                     <h4>${projectTitle}</h4>
+//                 </div>`;
+
+//             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 = `
+//                     <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 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 = `
+//                     <div class="map-container-cross">
+//                         <div class="map-container-1 map-container">
+//                             <h4>${pointData.towerInfoVo.towerName}</h4>
+//                             <div class="map-container-item">
+//                                 <span>基础开挖</span>
+//                                 <span>${
+//                                     pointData.towerInfoVo.time1 || "/"
+//                                 }</span>
+//                             </div>
+//                             <div class="map-container-item">
+//                                 <span>开挖完成</span>
+//                                 <span>${
+//                                     pointData.towerInfoVo.time2 || "/"
+//                                 }</span>
+//                             </div>
+//                             <div class="map-container-item">
+//                                 <span>浇筑完成</span>
+//                                 <span>${
+//                                     pointData.towerInfoVo.time3 || "/"
+//                                 }</span>
+//                             </div>
+//                             <div class="map-container-item">
+//                                 <span>铁塔组立</span>
+//                                 <span>${
+//                                     pointData.towerInfoVo.time4 || "/"
+//                                 }</span>
+//                             </div>
+//                             <div class="map-container-item">
+//                                 <span>组塔完成</span>
+//                                 <span>${
+//                                     pointData.towerInfoVo.time5 || "/"
+//                                 }</span>
+//                             </div>
+//                             <div class="map-container-item">
+//                                 <span>架线完成</span>
+//                                 <span>${
+//                                     pointData.towerInfoVo.time6 || "/"
+//                                 }</span>
+//                             </div>
+//                             <div class="map-container-item">
+//                                 <span>附件安装</span>
+//                                 <span>${
+//                                     pointData.towerInfoVo.time7 || "/"
+//                                 }</span>
+//                             </div>
+//                         </div>
+//                         <div class="map-container-2 map-container">
+//                             <h4>交叉跨越信息 ( ${pointData.spanTowerName} )</h4>
+//                             <div class="map-container-item-ropeway">
+//                                 <span>上层线路</span>
+//                                 <span>${pointData.upperLine}</span>
+//                             </div>
+//                             <div class="map-container-item-ropeway">
+//                                 <span>下层线路</span>
+//                                 <span>${pointData.lowerLine}</span>
+//                             </div>
+//                             <div class="map-container-item-ropeway">
+//                                 <span>交叉角度</span>
+//                                 <span>${pointData.intersectionAngle} °</span>
+//                             </div>
+//                             <div class="map-container-item-ropeway">
+//                                 <span>垂直距离</span>
+//                                 <span>${pointData.verticalDistance} m</span>
+//                             </div>
+//                             <div class="map-container-item-ropeway">
+//                                 <span>安全裕度</span>
+//                                 <span>${pointData.safetyMargin} °</span>
+//                             </div>
+//                         </div>
+//                     </div>`;
+
+//                 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();
     // 清除可能遗留的自定义覆盖物