1187 lines
41 KiB
JavaScript
1187 lines
41 KiB
JavaScript
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 = `
|
||
<div class="map-container">
|
||
<h4>
|
||
索道运输
|
||
</h4>
|
||
<div class="map-container-item-ropeway">
|
||
<span>索道位置</span>
|
||
<span>${pointData.towerName}</span>
|
||
</div>
|
||
<div class="map-container-item-ropeway">
|
||
<span>索道长度</span>
|
||
<span>${pointData.cablewayLength} KM</span>
|
||
</div>
|
||
<div class="map-container-item-ropeway">
|
||
<span>最大载重</span>
|
||
<span>${pointData.maxHeight} kg</span>
|
||
</div>
|
||
<div class="map-container-item-ropeway">
|
||
<span>安全距离</span>
|
||
<span>${pointData.safetyDistance} m</span>
|
||
</div>
|
||
<div class="map-container-item-ropeway">
|
||
<span>最大坡度</span>
|
||
<span>${pointData.maxSlope} °</span>
|
||
</div>
|
||
</div>`;
|
||
|
||
// 创建信息窗口，禁用默认样式
|
||
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 = `
|
||
<div class="map-container">
|
||
<h4>
|
||
${pointData.towerName}
|
||
</h4>
|
||
<div class="map-container-item">
|
||
<span>基础开挖</span>
|
||
<span>${pointData.time1 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>基础开挖完成</span>
|
||
<span>${pointData.time2 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>基础浇筑完成</span>
|
||
<span>${pointData.time3 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>铁塔组立</span>
|
||
<span>${pointData.time4 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>铁塔组立完成</span>
|
||
<span>${pointData.time5 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>架线施工完成</span>
|
||
<span>${pointData.time6 || "/"}</span>
|
||
</div>
|
||
</div>`;
|
||
|
||
// 创建信息窗口，禁用默认样式
|
||
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 = `
|
||
<div class="map-container-cross">
|
||
<div class="map-container-1 map-container">
|
||
<h4>
|
||
${pointData.towerInfoVo.towerName}
|
||
</h4>
|
||
<div class="map-container-item">
|
||
<span>基础开挖</span>
|
||
<span>${pointData.towerInfoVo.time1 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>开挖完成</span>
|
||
<span>
|
||
${pointData.towerInfoVo.time2 || "/"}
|
||
</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>浇筑完成</span>
|
||
<span>
|
||
${pointData.towerInfoVo.time3 || "/"}
|
||
</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>铁塔组立</span>
|
||
<span>
|
||
${pointData.towerInfoVo.time4 || "/"}
|
||
</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>组塔完成</span>
|
||
<span>
|
||
${pointData.towerInfoVo.time5 || "/"}
|
||
</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>架线完成</span>
|
||
<span>
|
||
${pointData.towerInfoVo.time6 || "/"}
|
||
</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>附件安装</span>
|
||
<span>
|
||
${pointData.towerInfoVo.time7 || "/"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="map-container-2 map-container">
|
||
<h4>
|
||
交叉跨越信息 ( ${pointData.spanTowerName} )
|
||
</h4>
|
||
<div class="map-container-item-ropeway">
|
||
<span>上层线路</span>
|
||
<span>${pointData.upperLine}</span>
|
||
</div>
|
||
<div class="map-container-item-ropeway">
|
||
<span>下层线路</span>
|
||
<span>${pointData.lowerLine}</span>
|
||
</div>
|
||
<div class="map-container-item-ropeway">
|
||
<span>交叉角度</span>
|
||
<span>${pointData.intersectionAngle} °</span>
|
||
</div>
|
||
<div class="map-container-item-ropeway">
|
||
<span>垂直距离</span>
|
||
<span>${pointData.verticalDistance} m</span>
|
||
</div>
|
||
<div class="map-container-item-ropeway">
|
||
<span>安全裕度</span>
|
||
<span>${pointData.safetyMargin} °</span>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
|
||
// 创建信息窗口，禁用默认样式
|
||
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 += `
|
||
<i>上层线路：${item.upperLine || "/"}</i>
|
||
<i>下层线路: ${item.lowerLine || "/"}</i>
|
||
<i>交叉角度: ${item.intersectionAngle || "/"}</i>
|
||
<i>垂直距离: ${item.verticalDistance || "/"}</i>
|
||
<i>安全裕度: ${item.safetyMargin || "/"}</i>
|
||
`;
|
||
} else {
|
||
describeHtml += `
|
||
<i>垂直净距：${item.verticalClearDistance || "/"} m</i>
|
||
<i>杆塔间距: ${item.towerSpacing || "/"} m</i>
|
||
<i>公路宽度: ${item.highwayWidth || "/"} m</i>
|
||
`;
|
||
}
|
||
|
||
// 单行数据
|
||
innerHtml += `
|
||
<div class="flex-box content-item">
|
||
<span>${item.spanType}</span>
|
||
<span>
|
||
<img src="../../img/digitalSignage/warning.png" alt="">
|
||
${item.towerName} - ${item.nextTowerName}
|
||
</span>
|
||
<span>${describeHtml}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
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 += `
|
||
<div class="legend-item">
|
||
<img src="${item.icon}" alt="">
|
||
<span>${item.name}</span>
|
||
<span>${item.value}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
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();
|
||
}
|
||
});
|
||
});
|