diff --git a/src/main/resources/static/js/synthesisQuery/digitalSignage-new.js b/src/main/resources/static/js/synthesisQuery/digitalSignage-new.js index 49b3eb6..869c773 100644 --- a/src/main/resources/static/js/synthesisQuery/digitalSignage-new.js +++ b/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() { - if (map) { - map.destroy(); - map = null; - } - if (!mars3d.Util.webglreport()) { - mars3d.Util.webglerror(); - } +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 { - 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); + // 1. 彻底清理旧地图实例 + if (map) { + // 移除所有自定义图层 + if (graphicLayer) { + graphicLayerList.forEach((e) => { + graphicLayer.removeGraphic(e); + }); + // graphicLayer.clear(); + // map.removeLayer(graphicLayer, true); // true表示彻底销毁 + // graphicLayer = null; + } - addAllMapPoints(graphicLayer); - addMapLine(graphicLayer); - addMapAThousandFields(graphicLayer); + // 销毁地图实例 + // 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) { - console.log("初始化地图出错", error); - haoutil.alert(error?.message, "出错了"); + // 失败时也清理残留 + if (map) { + map.destroy(); + map = null; + } } } @@ -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, - height: 20, + width: 30, + 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, - height: 20, + width: 30, + 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, + scale: 1, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, clampToGround: true, - // 添加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, - outlineColor: "#000000", // 轮廓色与背景色一致 - outlineWidth: 2, // 加粗轮廓 - style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 强制填充+轮廓 - scale: 0.8, // 轻微放大（可选） - disableDepthTestDistance: Number.POSITIVE_INFINITY, // 避免被地形遮挡 - }, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置 + 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, - height: 20, + width: 30, + 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); } } });