let map = null; // 地图实例 let treeData = []; // 组织机构树数据 let nodeId = ""; // 当前选中的节点ID let cablewayList = []; // 索道列表 let towerList = []; // 塔列表 let crossingList = []; // 跨越列表 let crossingListNew = []; // 跨越列表 let intLng = 116.254; // 初始经度 let intLat = 39.965; // 初始纬度 let isMap = true; // 是否是地图模式 // 图例数据 const legendData = [ { name: "基础开挖", value: 0, icon: "../../img/digitalSignage/yellow.png", }, { name: "开挖完成", value: 0, icon: "../../img/digitalSignage/green.png", }, { name: "浇筑完成", value: 0, icon: "../../img/digitalSignage/blue.png", }, { name: "铁塔组立", value: 0, icon: "../../img/digitalSignage/orange.png", }, { name: "组塔完成", value: 0, icon: "../../img/digitalSignage/zt_red.png", }, { name: "架线完成", value: 0, icon: "../../img/digitalSignage/zt_purple.png", }, { name: "附件安装", value: 0, icon: "../../img/digitalSignage/zt_green.png", }, { name: "未 开 始", value: 0, icon: "../../img/digitalSignage/white.png", }, { name: "索道运输", value: 0, icon: "../../img/digitalSignage/sd.png", }, // { // name: "项 目 部", // value: 0, // icon: "../../img/digitalSignage/project.png", // }, ]; // 地图配置项 const config = { points: [ { lng: 116.254, // 向西偏移 lat: 39.965, // 向北偏移 title: "点1", type: 1, isCompleted: true, // 是否完成 isCrossing: false, // 是否跨越 }, { lng: 116.263, // 保持适当距离 lat: 39.972, title: "点2", type: 1, isCompleted: true, // 是否完成 isCrossing: false, // 是否跨越 }, { lng: 116.275, // 平滑过渡 lat: 39.958, title: "点3", type: 1, isCompleted: true, // 是否完成 isCrossing: false, // 是否跨越 }, { lng: 116.285, // 继续向东 lat: 39.945, title: "点4", type: 2, isCompleted: true, // 是否完成 isCrossing: false, // 是否跨越 }, { lng: 116.298, // 向南偏移 lat: 39.935, title: "点5", type: 2, isCompleted: false, // 是否完成 isCrossing: false, // 是否跨越 }, { lng: 116.305, // 保持连贯性 lat: 39.925, title: "点6", type: 2, isCompleted: false, // 是否完成 isCrossing: false, // 是否跨越 }, { lng: 116.315, // 最终点 lat: 39.915, title: "点7", type: 3, isCompleted: false, // 是否完成 isCrossing: true, // 是否跨越 }, { lng: 116.325, // 最远点 lat: 39.905, title: "点8", type: 9, isCompleted: false, // 是否完成 isCrossing: true, // 是否跨越 }, ], polyline: { strokeWeight: 1, // 线条宽度 strokeOpacity: 0.9, // 透明度 strokeStyle: "dashed", // solid(实线)或dashed(虚线) enableEditing: false, // 是否可编辑 enableClicking: true, // 是否可点击 }, }; // 获取位置信息 function getLocationInfo(id) { const params = { encryptedData: encryptCBC(JSON.stringify({ id })), }; ajaxRequest( dataUrl + "/backstage/digitalSignage/getTowersInfo", "POST", params, true, function () {}, function (result) { console.log(result, "获取位置信息---"); const { data } = result; crossingList = []; crossingListNew = []; cablewayList = []; towerList = []; if (data.cablewaTransVos.length > 0) { cablewayList = data.cablewaTransVos; } else { cablewayList = []; } if (data.towerInfoVos.length > 0) { towerList = data.towerInfoVos; } else { towerList = []; } if (data.spanInfoVos.length > 0) { crossingList = data.spanInfoVos; } else { crossingList = []; crossingListNew = []; } // 处理一下交叉信息 if (crossingList && crossingList.length > 0) { crossingList.forEach((item) => { if (item.lonAndLat && item.lonAndLat.indexOf(",") > -1) { const lonAndLatList = item.lonAndLat.split(","); lonAndLatList.forEach((lonAndLat, index) => { const lonAndLatItem = lonAndLat.split("@"); crossingListNew.push({ baiduLon: lonAndLatItem[0], baiduLat: lonAndLatItem[1], ...item, }); }); } }); } initMap(); }, function (xhr) { error(xhr); } ); } // 百度地图初始化 function initMap() { if (map) { map = null; } map = new BMapGL.Map("map-box"); // 以第一个点为中心初始化地图 map.centerAndZoom(new BMapGL.Point(intLng, intLat), 15); map.enableScrollWheelZoom(true); // 每次初始化的时候清除所有标点以及线 map.clearOverlays(); var styleJson = [ // 隐藏道路 { featureType: "highway", elementType: "all", stylers: { visibility: "off" }, }, { featureType: "arterial", elementType: "all", stylers: { visibility: "off" }, }, { featureType: "local", elementType: "all", stylers: { visibility: "off" }, }, { featureType: "railway", elementType: "all", stylers: { visibility: "off" }, }, // 保留背景、水域、绿地等(避免地图变空白) { featureType: "background", elementType: "all", stylers: { visibility: "on" }, }, { featureType: "water", elementType: "all", stylers: { visibility: "on" }, }, { featureType: "green", elementType: "all", stylers: { visibility: "on" }, }, // 保留标点和文字(避免自定义点被隐藏) { featureType: "point", elementType: "all", stylers: { visibility: "on" }, }, { featureType: "label", elementType: "all", stylers: { visibility: "on" }, }, ]; if (isMap) { map.setMapType(BMAP_EARTH_MAP); // 地球模式 map.setDisplayOptions({ poiText: false, // 隐藏POI文字 poiIcon: false, // 隐藏POI图标 building: false, // 隐藏建筑物 }); } else { map.setMapType(BMAP_NORMAL_MAP); // 普通模式 // 增加不是纯白的背景色 map.setMapStyleV2({ styleJson: [ { featureType: "background", elementType: "all", stylers: { color: "#f5f5f5" }, }, ], }); } if (isMap) { map.setMapStyleV2({ styleJson, }); } setTimeout(() => { addAllMapPoints(); addMapLine(); }, 500); } // 添加标点 function addAllMapPoints() { // 清除地图上所有现有的标记 // map.clearOverlays(); // 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", 8: "/gzDigitalSignage/img/digitalSignage/white.png", 9: "/gzDigitalSignage/img/digitalSignage/sd.png", 11: "/gzDigitalSignage/img/digitalSignage/zt_white.png", 20: "gzDigitalSignage/img/digitalSignage/project.png", }; // 绘制索道标点 if (cablewayList && cablewayList.length > 0) { cablewayList.forEach((pointData, index) => { // const pointKey = `117.132663,31.877325`; const pointKey = `${pointData.baiduLon},${pointData.baiduLat}`; // 如果该坐标点已经添加过标记,则跳过 // if (addedPoints[pointKey]) { // console.warn(`重复的点坐标被跳过: ${pointKey}`); // return; // } // addedPoints[pointKey] = true; const point = new BMapGL.Point( pointData.baiduLon, pointData.baiduLat ); // const point = new BMapGL.Point(117.132663, 31.877325); 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 marker = new BMapGL.Marker(point, { icon: myIcon }); // 添加信息窗口 let infoContent = ""; // 索道 infoContent = `

索道运输

索道位置 ${pointData.towerName}
索道长度 ${pointData.cablewayLength} KM
最大载重 ${pointData.maxHeight} kg
安全距离 ${pointData.safetyDistance} m
最大坡度 ${pointData.maxSlope} °
`; // 创建信息窗口,禁用默认样式 const infoWindow = new BMapGL.InfoWindow(infoContent, { width: 0, // 宽度设为0,让内容决定宽度 height: 0, // 高度设为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"; } }, 50); }); map.addOverlay(marker); }); } // 绘制项目部 if (intLng && intLat) { 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 marker = new BMapGL.Marker(point, { icon: myIcon }); map.addOverlay(marker); } // 绘制杆塔 if (towerList && towerList.length > 0) { towerList.forEach((pointData, index) => { const pointKey = `${pointData.baiduLon},${pointData.baiduLat}`; // const pointKey = `116.254,39.965`; // 如果该坐标点已经添加过标记,则跳过 // if (addedPoints[pointKey]) { // console.warn(`重复的点坐标被跳过: ${pointKey}`); // return; // } // 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), // 与实际图片尺寸一致 }); const marker = new BMapGL.Marker(point, { icon: myIcon }); // 添加信息窗口 let infoContent = ""; // 索道 infoContent = `

${pointData.towerName}

基础开挖 ${pointData.time1 || "/"}
基础开挖完成 ${pointData.time2 || "/"}
基础浇筑完成 ${pointData.time3 || "/"}
铁塔组立 ${pointData.time4 || "/"}
铁塔组立完成 ${pointData.time5 || "/"}
架线施工完成 ${pointData.time6 || "/"}
`; // 创建信息窗口,禁用默认样式 const infoWindow = new BMapGL.InfoWindow(infoContent, { width: 0, // 宽度设为0,让内容决定宽度 height: 0, // 高度设为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"; } }, 50); }); map.addOverlay(marker); }); } // 绘制交叉跨越 if (crossingListNew.length > 0) { crossingListNew.forEach((pointData, index) => { const pointKey = `${pointData.baiduLon},${pointData.baiduLat}`; // const pointKey = `116.254,39.965`; // 如果该坐标点已经添加过标记,则跳过 if (addedPoints[pointKey]) { console.warn(`重复的点坐标被跳过: ${pointKey}`); return; } addedPoints[pointKey] = true; const point = new BMapGL.Point( pointData.baiduLon, pointData.baiduLat ); bounds.push(point); // 检查图标是否存在,不存在则使用默认图标 const iconUrl = iconTypeList[11]; // 默认使用第一个图标 const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 38), { anchor: new BMapGL.Size(16, 20), // 修正锚点位置为中心底部 imageSize: new BMapGL.Size(40, 38), // 与实际图片尺寸一致 }); const marker = new BMapGL.Marker(point, { icon: myIcon }); // 添加信息窗口 let infoContent = ""; // 交叉信息 infoContent = `

${pointData.towerInfoVo.towerName}

基础开挖 ${pointData.towerInfoVo.time1 || "/"}
开挖完成 ${pointData.towerInfoVo.time2 || "/"}
浇筑完成 ${pointData.towerInfoVo.time3 || "/"}
铁塔组立 ${pointData.towerInfoVo.time4 || "/"}
组塔完成 ${pointData.towerInfoVo.time5 || "/"}
架线完成 ${pointData.towerInfoVo.time6 || "/"}
附件安装 ${pointData.towerInfoVo.time7 || "/"}

交叉跨越信息 ( ${pointData.spanTowerName} )

上层线路 ${pointData.upperLine}
下层线路 ${pointData.lowerLine}
交叉角度 ${pointData.intersectionAngle} °
垂直距离 ${pointData.verticalDistance} m
安全裕度 ${pointData.safetyMargin} °
`; // 创建信息窗口,禁用默认样式 const infoWindow = new BMapGL.InfoWindow(infoContent, { width: 0, // 宽度设为0,让内容决定宽度 height: 0, // 高度设为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"; } }, 50); }); map.addOverlay(marker); }); } // 调整视野使所有点可见 if (bounds.length > 0) { map.setViewport(calculateBounds(bounds), { zoomFactor: 0.5, // 可选:缩放系数(0-1,值越小视野越大) }); } } function calculateBounds(points) { console.log(points, "points999"); var lngs = points.map((p) => p.lng); var lats = points.map((p) => p.lat); var minLng = Math.min(...lngs); var maxLng = Math.max(...lngs); var minLat = Math.min(...lats); var maxLat = Math.max(...lats); return new BMapGL.Bounds( new BMapGL.Point(minLng, minLat), new BMapGL.Point(maxLng, maxLat) ); } // 添加标点折线(智能绘制虚实线) function addMapLine() { // 存储所有线段 const segments = []; // 绘制杆塔线 if (towerList.length > 0) { for (let i = 0; i < towerList.length - 1; i++) { const startPoint = towerList[i]; const endPoint = towerList[i + 1]; let lineColor = ""; let lineStyle = ""; if ( startPoint.towerProgress === 7 && endPoint.towerProgress === 7 ) { lineColor = "#5ad8a6"; lineStyle = "solid"; } else if (startPoint.existSpan === 1 && endPoint.existSpan === 1) { lineColor = "#d81e06"; lineStyle = "dashed"; } else { lineColor = "#fff"; lineStyle = "dashed"; } // 创建线段点数组 const segmentPoints = [ new BMapGL.Point(startPoint.baiduLon, startPoint.baiduLat), new BMapGL.Point(endPoint.baiduLon, endPoint.baiduLat), ]; // 设置线段样式 const segmentOptions = { strokeColor: lineColor, // 根据类型获取颜色 strokeWeight: config.polyline.strokeWeight, strokeOpacity: config.polyline.strokeOpacity, enableEditing: config.polyline.enableEditing, enableClicking: config.polyline.enableClicking, strokeStyle: lineStyle, }; // 创建线段并添加到数组 segments.push(new BMapGL.Polyline(segmentPoints, segmentOptions)); } } // 绘制交叉线路 if (crossingListNew.length > 0) { for (let i = 0; i < crossingListNew.length - 1; i++) { const startPoint = crossingListNew[i]; const endPoint = crossingListNew[i + 1]; // 创建线段点数组 const segmentPoints = [ new BMapGL.Point(startPoint.baiduLon, startPoint.baiduLat), new BMapGL.Point(endPoint.baiduLon, endPoint.baiduLat), ]; // 设置线段样式 const segmentOptions = { strokeColor: "#fff", // 根据类型获取颜色 strokeWeight: config.polyline.strokeWeight, strokeOpacity: config.polyline.strokeOpacity, enableEditing: config.polyline.enableEditing, enableClicking: config.polyline.enableClicking, strokeStyle: "solid", }; // 创建线段并添加到数组 segments.push(new BMapGL.Polyline(segmentPoints, segmentOptions)); } } // 将所有线段添加到地图 segments.forEach((segment) => map.addOverlay(segment)); } // 根据点类型获取线段颜色 function getSegmentColor(startPoint, endPoint) { // 如果两点类型相同,使用该类型对应颜色 if (startPoint.type === endPoint.type) { switch (startPoint.type) { case 1: return "#3388ff"; // 类型1蓝色 case 2: return "#ff9900"; // 类型2橙色 case 3: return "#33cc33"; // 类型3绿色 default: return config.polyline.strokeColor; } } // 类型不同使用默认颜色 return config.polyline.strokeColor; } // 获取组织树数据 function getOrgTreeData() { ajaxRequest( dataUrl + "/backstage/digitalSignage/getProTree", "POST", {}, true, function () {}, function (result) { console.log(result, "组织机构树数据获取成功---"); const { data } = result; // 判断是否有工程 有的话取第一个 if (data && data.length > 0) { setSpreadToNodes(data); treeData = data; // 获取第一个工程 if ( data[0].children && data[0].children.length > 0 && data[0].children[0].children && data[0].children[0].children.length > 0 ) { nodeId = data[0].children[0].children[0].id; if ( data[0].children[0].children[0].lon && data[0].children[0].children[0].lat ) { intLng = data[0].children[0].children[0].lon; intLat = data[0].children[0].children[0].lat; } getScrollData(nodeId); getLegendData(nodeId); getLocationInfo(nodeId); } } }, function (xhr) { error(xhr); } ); } getOrgTreeData(); // 递归 function setSpreadToNodes(nodes, spreadValue = true) { if (!nodes || !Array.isArray(nodes)) return; nodes.forEach((node) => { node.spread = spreadValue; if (node.children && node.children.length > 0) { setSpreadToNodes(node.children, spreadValue); } }); } // 获取左上角滚动数据源 function getScrollData(id) { const scrollData = [ { name: "跨线路", location: "N11-N12999", content: [ { name: "垂直净度", value: "9896", }, { name: "垂直净度", value: "9896", }, { name: "垂直净度", value: "9896", }, ], }, { name: "跨越地点", location: "N11-N12336", content: [ { name: "垂直净度", value: "9896", }, { name: "垂直净度", value: "9896", }, { name: "垂直净度", value: "9896", }, ], }, { name: "跨越地点", location: "N11-N128885", content: [ { name: "垂直净度", value: "9896", }, { name: "垂直净度", value: "9896", }, { name: "垂直净度", value: "9896", }, ], }, { name: "跨越地点", location: "N11-N128773", content: [ { name: "垂直净度", value: "9896", }, { name: "垂直净度", value: "9896", }, { name: "垂直净度", value: "9896", }, ], }, ]; const params = { encryptedData: encryptCBC(JSON.stringify({ id })), }; ajaxRequest( dataUrl + "/backstage/digitalSignage/getThreeSpans", "POST", params, true, function () {}, function (result) { // console.log(result, "左上角滚动数据获取成功---"); const { data } = result; let scrollBox = $(".content-wrapper"); let innerHtml = ""; if (data && data.length > 0) { data.forEach((item) => { let describeHtml = ""; if (item.spanType === "跨线路") { describeHtml += ` 上层线路:${item.upperLine || "/"} 下层线路: ${item.lowerLine || "/"} 交叉角度: ${item.intersectionAngle || "/"} 垂直距离: ${item.verticalDistance || "/"} 安全裕度: ${item.safetyMargin || "/"} `; } else { describeHtml += ` 垂直净距:${item.verticalClearDistance || "/"} m 杆塔间距: ${item.towerSpacing || "/"} m 公路宽度: ${item.highwayWidth || "/"} m `; } // 单行数据 innerHtml += `
${item.spanType} ${item.towerName} - ${item.nextTowerName} ${describeHtml}
`; }); } scrollBox.html(innerHtml); }, function (xhr) { error(xhr); } ); } // 获取左下角图例数据源 function getLegendData(id) { const params = { encryptedData: encryptCBC(JSON.stringify({ id })), }; ajaxRequest( dataUrl + "/backstage/digitalSignage/getTowerProgressNum", "POST", params, true, function () {}, function (result) { const { data } = result; if (data) { Object.values(data).forEach((value, index) => { legendData[index].value = value; }); } const legendBox = $(".legend-box"); let innerHtml = ""; legendData.forEach((item, index) => { innerHtml += `
${item.name} ${item.value}
`; }); legendBox.html(innerHtml); }, function (xhr) { error(xhr); } ); } document.addEventListener("DOMContentLoaded", function () { const scrollContent = document.getElementById("scrollContent"); const originalContent = scrollContent.querySelector(".content-wrapper"); const cloneContent = scrollContent.querySelector(".clone-content"); // 克隆原始内容到克隆容器 cloneContent.innerHTML = originalContent.innerHTML; // 设置滚动动画 let scrollPosition = 0; const scrollSpeed = 20; // 滚动速度(像素/秒) let lastTimestamp = 0; function animateScroll(timestamp) { if (!lastTimestamp) lastTimestamp = timestamp; const deltaTime = timestamp - lastTimestamp; lastTimestamp = timestamp; // 计算新的滚动位置 scrollPosition += (scrollSpeed * deltaTime) / 1000; // 获取内容总高度 const contentHeight = originalContent.scrollHeight; // 当滚动到克隆内容的开始时,重置位置以实现无缝衔接 if (scrollPosition >= contentHeight) { scrollPosition = 0; } // 应用滚动 scrollContent.scrollTop = scrollPosition; // 继续动画 requestAnimationFrame(animateScroll); } // 启动动画 requestAnimationFrame(animateScroll); // // 鼠标悬停时暂停滚动 // scrollContent.addEventListener("mouseenter", function () { // scrollSpeed = 0; // }); // scrollContent.addEventListener("mouseleave", function () { // scrollSpeed = 30; // 恢复原始速度 // }); const drawer = document.querySelector(".right-drawer-box"); const openBtn = document.querySelector(".open-drawer-box"); const closeBtn = document.querySelector(".close-drawer-btn"); // 点击三角按钮打开抽屉 openBtn.addEventListener("click", function () { drawer.classList.add("open"); layui.use(["tree", "jquery"], function () { var tree = layui.tree; var $ = layui.jquery; // 初始化组织树 function initOrgTree() { // 渲染树形结构 tree.render({ elem: "#orgTree", // 绑定元素 id: "orgTree", // 自定义索引 data: treeData, // 获取数据 showCheckbox: false, // 是否显示复选框 isJump: false, // 是否允许点击节点时弹出新窗口 accordion: true, // 是否开启手风琴模式 edit: false, // 是否开启节点的操作图标 onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩 click: function (obj) { console.log(obj.data); // 判断是否是叶子节点(没有子节点或子节点数组为空) if ( !obj.data.children || obj.data.children.length === 0 ) { setActiveNode(obj.elem); nodeId = obj.data.id; intLng = obj.data.lon; intLat = obj.data.lat; getScrollData(nodeId); getLegendData(nodeId); getLocationInfo(nodeId); } else { } }, done: function () { console.log("树准备完毕"); expandToNodeId(nodeId); }, }); } initOrgTree(); setActiveNodeNew(nodeId); function setActiveNode(elem) { $("#orgTree") .find(".layui-tree-click") .removeClass("layui-tree-click"); $(elem).addClass("layui-tree-click"); } function setActiveNodeNew(nodeId) { $("#orgTree") .find('[data-id="' + nodeId + '"]') .addClass("layui-tree-click"); } }); }); // 点击关闭按钮关闭抽屉 closeBtn.addEventListener("click", function () { drawer.classList.remove("open"); }); // 点击抽屉外部关闭抽屉(可选) document.addEventListener("click", function (e) { if ( drawer.classList.contains("open") && !drawer.contains(e.target) && e.target !== openBtn ) { 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; }); // 点击全屏图标时 使地图盒子全屏 const fullScreenBtn = document.querySelector(".full-screen-btn"); fullScreenBtn.addEventListener("click", function () { if (document.fullscreenElement) { document.exitFullscreen(); } else { document.documentElement.requestFullscreen(); } }); });