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();
}
});
});