地图模式切换功能补全

src/main/resources/static/css/synthesisQuery/digitalSignage.css

@@ -306,3 +306,39 @@ body {
 .layui-icon {
     color: #fff !important;
 }
+
+.switch-btn-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    z-index: 999;
+}
+
+.switch-btn-item {
+    width: 80px;
+    height: 38px;
+    line-height: 38px;
+    text-align: center;
+    border-radius: 5px;
+    background-color: #fff;
+    color: 000;
+    cursor: pointer;
+}
+
+.switch-btn-box .switch-btn-item:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.switch-btn-box .switch-btn-item:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.active {
+    background-color: #8ea8e0;
+    color: #fff;
+}

src/main/resources/static/js/synthesisQuery/digitalSignage.js

@@ -7,6 +7,7 @@ let crossingList = []; // 跨越列表
 let crossingListNew = []; // 跨越列表
 let intLng = 116.254; // 初始经度
 let intLat = 39.965; // 初始纬度
+let isMap = true; // 是否是地图模式
 // 图例数据
 const legendData = [
     {
@@ -256,15 +257,22 @@ function initMap() {
         },
     ];
 
-    map.setMapType(BMAP_EARTH_MAP); // 地球模式
+    if (isMap) {
-    map.setDisplayOptions({
+        map.setMapType(BMAP_EARTH_MAP); // 地球模式
-        poiText: false, // 隐藏POI文字
+        map.setDisplayOptions({
-        poiIcon: false, // 隐藏POI图标
+            poiText: false, // 隐藏POI文字
-        building: false, // 隐藏建筑物
+            poiIcon: false, // 隐藏POI图标
-    });
+            building: false, // 隐藏建筑物
-    map.setMapStyleV2({
+        });
-        styleJson,
+    } else {
-    });
+        map.setMapType(BMAP_NORMAL_MAP); // 普通模式
+    }
+
+    if (isMap) {
+        map.setMapStyleV2({
+            styleJson,
+        });
+    }
 
     // 添加地图控件（可选）
     // map.addControl(new BMapGL.NavigationControl());
@@ -1114,4 +1122,22 @@ document.addEventListener("DOMContentLoaded", function () {
             drawer.classList.remove("open");
         }
     });
+
+    const switchBtnItemMap = document.querySelector(".map-btn");
+    const switchBtnItemMix = document.querySelector(".mix-btn");
+    if (isMap) {
+        switchBtnItemMap.classList.add("active");
+    }
+    switchBtnItemMap.addEventListener("click", function () {
+        getLocationInfo(nodeId);
+        switchBtnItemMap.classList.add("active");
+        switchBtnItemMix.classList.remove("active");
+        isMap = true;
+    });
+    switchBtnItemMix.addEventListener("click", function () {
+        getLocationInfo(nodeId);
+        switchBtnItemMix.classList.add("active");
+        switchBtnItemMap.classList.remove("active");
+        isMap = false;
+    });
 });

src/main/resources/static/pages/synthesisQuery/digitalSignage.html

@@ -90,6 +90,16 @@
 
         <!-- 打开弹框的三角 -->
         <div class="open-drawer-box"></div>
+
+        <!-- 右上角切换按钮 -->
+        <div class="switch-btn-box">
+            <div class="switch-btn-item map-btn">
+                地图
+            </div>
+            <div class="switch-btn-item mix-btn">
+                混合
+            </div>
+        </div>
     </div>
 </body>
 <script src="../../js/synthesisQuery/digitalSignage.js" charset="UTF-8" type="text/javascript"></script>