地图样式优化

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

@@ -1,4 +1,6 @@
 let map = null; // 地图实例
+let graphicLayer = null; // 图形图层
+let graphicLayerList = []; // 图形图层列表
 let treeData = []; // 组织机构树数据
 let nodeId = ""; // 当前选中的节点ID
 let cablewayList = []; // 索道列表
@@ -342,28 +344,102 @@ function getLocationInfo(id) {
 }
 
 // 百度地图初始化
-function initMap() {
+async function initMap() {
+    // if (map) {
+    //     map.destroy();
+    //     map = null;
+    // }
+    // if (!mars3d.Util.webglreport()) {
+    //     mars3d.Util.webglerror();
+    // }
+
+    // try {
+    //     mapConfig.scene.center.lat = intLat || 31.686288;
+    //     mapConfig.scene.center.lng = intLng || 117.229619;
+    //     map = new mars3d.Map("map-box", mapConfig);
+    //     let graphicLayer = new mars3d.layer.GraphicLayer();
+    //     map.addLayer(graphicLayer);
+
+    //     addAllMapPoints(graphicLayer);
+    //     addMapLine(graphicLayer);
+    //     addMapAThousandFields(graphicLayer);
+    // } catch (error) {
+    //     console.log("初始化地图出错", error);
+    //     haoutil.alert(error?.message, "出错了");
+    // }
+
+    try {
+        // 1. 彻底清理旧地图实例
+        if (map) {
+            // 移除所有自定义图层
+            if (graphicLayer) {
+                graphicLayerList.forEach((e) => {
+                    graphicLayer.removeGraphic(e);
+                });
+                // graphicLayer.clear();
+                // map.removeLayer(graphicLayer, true); // true表示彻底销毁
+                // graphicLayer = null;
+            }
+
+            // 销毁地图实例
+            // map.destroy();
+            // map = null;
+
+            // // 强制垃圾回收（非必要但建议）
+            // if (window.gc) window.gc();
+
+            // 5. 添加内容
+
+            const centerPoint = [intLng, intLat];
+
+            // 方式1：直接飞向目标点
+            map.flyToPoint(centerPoint, {
+                radius: 5000, // 可视范围半径（米）
+                duration: 2, // 飞行时间（秒）
+                heading: 0, // 视角方向（0-360度）
+                pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
+            });
+            await addAllMapPoints();
+            await addMapLine();
+            await addMapAThousandFields();
+        } else {
+            // 2. WebGL兼容性检查
+            if (!mars3d.Util.webglreport()) {
+                mars3d.Util.webglerror();
+                return;
+            }
+
+            // 3. 初始化新地图
+            mapConfig.scene.center.lat = intLat || 31.686288;
+            mapConfig.scene.center.lng = intLng || 117.229619;
+            map = new mars3d.Map("map-box", mapConfig);
+
+            // 4. 创建新的图形图层
+            graphicLayer = new mars3d.layer.GraphicLayer();
+
+            const centerPoint = [intLng, intLat];
+
+            // 方式1：直接飞向目标点
+            map.flyToPoint(centerPoint, {
+                radius: 5000, // 可视范围半径（米）
+                duration: 5, // 飞行时间（秒）
+                heading: 0, // 视角方向（0-360度）
+                pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
+            });
+
+            map.addLayer(graphicLayer);
+
+            // 5. 添加内容
+            await addAllMapPoints();
+            await addMapLine();
+            await addMapAThousandFields();
+        }
+    } catch (error) {
+        // 失败时也清理残留
         if (map) {
             map.destroy();
             map = null;
         }
-    if (!mars3d.Util.webglreport()) {
-        mars3d.Util.webglerror();
-    }
-
-    try {
-        mapConfig.scene.center.lat = intLat || 31.686288;
-        mapConfig.scene.center.lng = intLng || 117.229619;
-        map = new mars3d.Map("map-box", mapConfig);
-        let graphicLayer = new mars3d.layer.GraphicLayer();
-        map.addLayer(graphicLayer);
-
-        addAllMapPoints(graphicLayer);
-        addMapLine(graphicLayer);
-        addMapAThousandFields(graphicLayer);
-    } catch (error) {
-        console.log("初始化地图出错", error);
-        haoutil.alert(error?.message, "出错了");
     }
 }
 
@@ -436,7 +512,7 @@ function connectPointsWithLine(graphicLayer, points) {
 }
 
 // 添加标点
-function addAllMapPoints(graphicLayer) {
+async function addAllMapPoints() {
     const iconTypeList = {
         // 1: "../../img/digitalSignage/icon_three.png",
         1: "../../img/digitalSignage/icon_three_new.png",
@@ -474,11 +550,15 @@ function addAllMapPoints(graphicLayer) {
                     position: [
                         pointData.cablewaTransPointVoList[0].lng,
                         pointData.cablewaTransPointVoList[0].lat,
+                        1000,
                     ],
                     style: {
                         image: iconTypeList[12],
-                        width: 20,
+                        width: 30,
-                        height: 20,
+                        height: 30,
+                        scale: 1,
+                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                         clampToGround: true,
                     },
                 });
@@ -524,6 +604,8 @@ function addAllMapPoints(graphicLayer) {
                 });
 
                 graphicLayer.addGraphic(billboard);
+
+                graphicLayerList.push(billboard);
             }
         });
     }
@@ -531,11 +613,15 @@ function addAllMapPoints(graphicLayer) {
     // 绘制项目部
     if (intLng && intLat) {
         const billboard = new mars3d.graphic.BillboardEntity({
-            position: [intLng, intLat],
+            position: [intLng, intLat, 1000],
             style: {
                 image: iconTypeList[20],
-                width: 20,
+                width: 30,
-                height: 20,
+                height: 30,
+
+                scale: 1,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                 clampToGround: true,
             },
         });
@@ -557,16 +643,27 @@ function addAllMapPoints(graphicLayer) {
         });
 
         graphicLayer.addGraphic(billboard);
+        graphicLayerList.push(billboard);
     }
 
     // 绘制杆塔
     if (towerList && towerList.length > 0) {
         towerList.forEach((pointData, index) => {
+            // const isEven = index % 2 === 0;
+            // const verticalOrigin = isEven
+            //     ? Cesium.VerticalOrigin.BOTTOM
+            //     : Cesium.VerticalOrigin.TOP;
+            // const pixelOffsetY = isEven ? 60 : -60;
+
             const isEven = index % 2 === 0;
-            const verticalOrigin = isEven
+            // 标点垂直方向设置
+            const billboardVerticalOrigin = Cesium.VerticalOrigin.BOTTOM; // 标点固定底部对齐
+
+            // 标签位置设置
+            const labelVerticalOrigin = isEven
                 ? Cesium.VerticalOrigin.BOTTOM
                 : Cesium.VerticalOrigin.TOP;
-            const pixelOffsetY = isEven ? 60 : -60;
+            const pixelOffsetY = isEven ? 60 : -60; // 调整偏移量（根据标点大小适当调整）
 
             const iconUrl = iconTypeList[parseInt(pointData.towerProgress)];
             const billboard = new mars3d.graphic.BillboardEntity({
@@ -575,26 +672,12 @@ function addAllMapPoints(graphicLayer) {
                     image: iconUrl,
                     width: 30,
                     height: 30,
-                    clampToGround: true,
+                    scale: 1,
-                    // 添加Label
-                    label: {
-                        text: pointData.towerName,
-                        font_size: 12, // 适当增大字号（最小建议12）
-                        font_family: "Microsoft YaHei", // 指定清晰字体（如宋体、Arial）
-                        color: "#FFFFFF",
-                        background: true,
-                        backgroundColor: "#000000",
-                        backgroundOpacity: 0.7, // 背景透明度（0-1）
-                        pixelOffset: new Cesium.Cartesian2(0, pixelOffsetY),
-                        verticalOrigin: verticalOrigin,
                     horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                        outline: true,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-                        outlineColor: "#000000", // 轮廓色与背景色一致
+                    clampToGround: true,
-                        outlineWidth: 2, // 加粗轮廓
+                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
-                        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 强制填充+轮廓
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
-                        scale: 0.8, // 轻微放大（可选）
-                        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 避免被地形遮挡
-                    },
                 },
                 // 其他属性
                 attr: {
@@ -603,6 +686,51 @@ function addAllMapPoints(graphicLayer) {
                 },
             });
 
+            const graphic = new mars3d.graphic.LabelEntity({
+                position: new mars3d.LngLatPoint(
+                    pointData.baiduLon,
+                    pointData.baiduLat
+                ),
+                style: {
+                    // text: pointData.towerName,
+                    // font_size: 12,
+                    // font_family: "楷体",
+                    // color: "#FFFFFF",
+                    // background: true,
+                    // backgroundColor: "#000000",
+                    // backgroundOpacity: 0.8,
+                    // // outline: true,
+                    // // outlineColor: "#000000",
+                    // outlineWidth: 2,
+                    // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    // verticalOrigin: verticalOrigin,
+                    // visibleDepth: false,
+                    // clampToGround: true,
+
+                    text: pointData.towerName,
+                    font_size: 12,
+                    font_family: "楷体",
+                    color: "#FFFFFF",
+                    background: true,
+                    backgroundColor: "#000000",
+                    backgroundOpacity: 0.8,
+                    outlineWidth: 2,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: labelVerticalOrigin, // 动态设置上下位置
+                    pixelOffset: new Cesium.Cartesian2(0, pixelOffsetY), // Y轴偏移
+                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 贴地
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
+                    scaleByDistance: new Cesium.NearFarScalar(
+                        1000,
+                        1.0,
+                        100000,
+                        0.5
+                    ), // 随距离缩放
+                },
+                attr: { remark: "示例1" },
+            });
+            graphicLayer.addGraphic(graphic);
+
             // 添加点击事件
             billboard.on(mars3d.EventType.click, function (event) {
                 // console.log("点击了标点", event.graphic.attr);
@@ -658,6 +786,9 @@ function addAllMapPoints(graphicLayer) {
             });
 
             graphicLayer.addGraphic(billboard);
+
+            graphicLayerList.push(billboard);
+            graphicLayerList.push(graphic);
         });
     }
 
@@ -665,11 +796,14 @@ function addAllMapPoints(graphicLayer) {
     if (crossingListNew.length > 0) {
         crossingListNew.forEach((pointData, index) => {
             const billboard = new mars3d.graphic.BillboardEntity({
-                position: [pointData.baiduLon, pointData.baiduLat],
+                position: [pointData.baiduLon, pointData.baiduLat, 1000],
                 style: {
                     image: iconTypeList[21],
-                    width: 20,
+                    width: 30,
-                    height: 20,
+                    height: 30,
+                    scale: 1,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                     clampToGround: true,
                 },
             });
@@ -780,6 +914,7 @@ function addAllMapPoints(graphicLayer) {
             });
 
             graphicLayer.addGraphic(billboard);
+            graphicLayerList.push(billboard);
         });
     }
 }
@@ -799,6 +934,7 @@ function connectPointsWithLine(graphicLayer, points) {
         attr: { name: "高压线路" },
     });
     graphicLayer.addGraphic(polyline);
+    graphicLayerList.push(polyline);
 }
 
 function clearAllOverlays() {
@@ -823,7 +959,7 @@ function calculateBounds(points) {
 }
 
 // 添加标点折线（智能绘制虚实线）
-function addMapLine(graphicLayer) {
+async function addMapLine() {
     // 存储所有线段
     const segments = [];
     // 绘制杆塔线
@@ -1016,7 +1152,7 @@ function getSegmentColor(startPoint, endPoint) {
 }
 
 // 绘制牵张场地区域图
-function addMapAThousandFields(graphicLayer) {
+async function addMapAThousandFields() {
     if (aThousandFieldsList.length > 0) {
         aThousandFieldsList.forEach((item) => {
             if (
@@ -1057,10 +1193,12 @@ function addMapAThousandFields(graphicLayer) {
                             outline: true, // 是否显示边框
                             outlineWidth: 2, // 边框宽度(像素)
                             outlineColor: "#00FFFF", // 边框颜色
+                            clampToGround: true,
                         },
                         attr: { remark: "示例区域" },
                     });
                     graphicLayer.addGraphic(graphic);
+                    graphicLayerList.push(graphic);
                 }
             }
         });