bonus
/
gz_digital_signage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

电子看板公路线条绘制

This commit is contained in:
BianLzhaoMin 2025-06-10 17:59:03 +08:00
parent da3ed2a248
commit 0deefb9472
4 changed files with 70 additions and 414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/resources/static/js/basic/lineManagement/child/setHighwayLonAndLat.js
View File

@ -180,7 +180,10 @@ function initMap(list) {
let points = JSON.parse(objParams.points); let points = JSON.parse(objParams.points);
$.each(points, function (i, item) { $.each(points, function (i, item) {
addMarker(item.lng, item.lat); addMarker(item.lng, item.lat);
viewPointLine(); });
viewPointLine();
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
}); });
} else { } else {
// 点击地图添加标记 // 点击地图添加标记

5
src/main/resources/static/js/basic/lineManagement/child/setLonAndLat.js
View File

@ -180,7 +180,10 @@ function initMap(list) {
let points = JSON.parse(objParams.points); let points = JSON.parse(objParams.points);
$.each(points, function (i, item) { $.each(points, function (i, item) {
addMarker(item.lng, item.lat); addMarker(item.lng, item.lat);
viewPointLine(); });
viewPointLine();
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
}); });
} else { } else {
// 点击地图添加标记 // 点击地图添加标记

11
src/main/resources/static/js/basic/lineManagement/child/setQzSiteLonAndLat.js
View File

@ -182,11 +182,14 @@ function initMap(list) {
addMarker(item.lng, item.lat); addMarker(item.lng, item.lat);
}); });
viewPointLine(); viewPointLine();
map.addEventListener("click", function (e) {
addMarker(e.latlng.lng, e.latlng.lat);
});
} else { } else {
// // 点击地图添加标记 // 点击地图添加标记
// map.addEventListener("click", function (e) { map.addEventListener("click", function (e) {
// addMarker(e.latlng.lng, e.latlng.lat); addMarker(e.latlng.lng, e.latlng.lat);
// }); });
} }
} }

463
src/main/resources/static/js/synthesisQuery/digitalSignage.js
View File

@ -5,6 +5,7 @@ let cablewayList = []; // 索道列表
let towerList = []; // 塔列表 let towerList = []; // 塔列表
let crossingList = []; // 跨越列表 let crossingList = []; // 跨越列表
let crossingListNew = []; // 跨越列表 let crossingListNew = []; // 跨越列表
let highwayList = []; // 公路列表
let intLng = 116.254; // 初始经度 let intLng = 116.254; // 初始经度
let intLat = 39.965; // 初始纬度 let intLat = 39.965; // 初始纬度
let isMap = true; // 是否是地图模式 let isMap = true; // 是否是地图模式
@ -53,6 +54,11 @@ const legendData = [
value: 0, value: 0,
icon: "../../img/digitalSignage/zt_red.png", icon: "../../img/digitalSignage/zt_red.png",
}, },
{
name: "架线施工",
value: 0,
icon: "../../img/digitalSignage/zt_red.png",
},
{ {
name: "架线施工完成", name: "架线施工完成",
value: 0, value: 0,
@ -128,6 +134,12 @@ function getLocationInfo(id) {
crossingListNew = []; crossingListNew = [];
} }
if (data.highwayList.length > 0) {
highwayList = data.highwayList;
} else {
highwayList = [];
}
// 处理一下交叉信息 // 处理一下交叉信息
if (crossingList && crossingList.length > 0) { if (crossingList && crossingList.length > 0) {
crossingList.forEach((item) => { crossingList.forEach((item) => {
@ -287,9 +299,10 @@ function addAllMapPoints() {
7: "../../img/digitalSignage/zt_red.png", 7: "../../img/digitalSignage/zt_red.png",
8: "../../img/digitalSignage/zt_purple.png", 8: "../../img/digitalSignage/zt_purple.png",
9: "../../img/digitalSignage/zt_green.png", 9: "../../img/digitalSignage/zt_green.png",
0: "../../img/digitalSignage/zt_green.png",
// 0: "../../img/digitalSignage/icon_one.png", // 0: "../../img/digitalSignage/icon_one.png",
0: "../../img/digitalSignage/icon_one_new.png", 11: "../../img/digitalSignage/icon_one_new.png",
11: "../../img/digitalSignage/sd.png", 12: "../../img/digitalSignage/sd.png",
20: "../../img/digitalSignage/project.png", 20: "../../img/digitalSignage/project.png",
// 21: "../../img/digitalSignage/zt_white.png", // 21: "../../img/digitalSignage/zt_white.png",
21: "../../img/digitalSignage/zt_gary.png", 21: "../../img/digitalSignage/zt_gary.png",
@ -328,7 +341,7 @@ function addAllMapPoints() {
bounds.push(point); bounds.push(point);
// 检查图标是否存在，不存在则使用默认图标 // 检查图标是否存在，不存在则使用默认图标
const iconUrl = iconTypeList[11]; // 默认使用第一个图标 const iconUrl = iconTypeList[12]; // 默认使用第一个图标
const myIcon = new BMapGL.Icon( const myIcon = new BMapGL.Icon(
iconUrl, iconUrl,
new BMapGL.Size(24, 24), new BMapGL.Size(24, 24),
@ -916,411 +929,6 @@ function addAllMapPoints() {
} }
} }
// function addAllMapPoints() {
// map.clearOverlays();
// const bounds = [];
// const addedPoints = {};
// // 预加载所有图标
// const iconTypeList = {
// 1: "../../img/digitalSignage/icon_three.png",
// 2: "../../img/digitalSignage/action_2.png",
// 3: "../../img/digitalSignage/action_5.png",
// 4: "../../img/digitalSignage/action_7.png",
// 5: "../../img/digitalSignage/action_4.png",
// 6: "../../img/digitalSignage/action_6.png",
// 7: "../../img/digitalSignage/zt_red.png",
// 8: "../../img/digitalSignage/zt_purple.png",
// 9: "../../img/digitalSignage/zt_green.png",
// 0: "../../img/digitalSignage/white.png",
// 11: "../../img/digitalSignage/sd.png",
// 20: "../../img/digitalSignage/project.png",
// 21: "../../img/digitalSignage/zt_white.png",
// };
// // 预加载所有图标
// Object.values(iconTypeList).forEach((url) => {
// new Image().src = url;
// });
// const getPointKey = (lon, lat) =>
// `${parseFloat(lon).toFixed(6)},${parseFloat(lat).toFixed(6)}`;
// // 创建标记的通用函数
// const createMarker = (
// point,
// iconKey,
// size,
// anchor,
// imageSize,
// infoContent
// ) => {
// const iconUrl = iconTypeList[iconKey] || iconTypeList[0]; // 默认使用白色图标
// const icon = new BMapGL.Icon(
// iconUrl,
// new BMapGL.Size(size.width, size.height),
// {
// anchor: new BMapGL.Size(anchor.width, anchor.height),
// imageSize: new BMapGL.Size(imageSize.width, imageSize.height),
// }
// );
// const marker = new BMapGL.Marker(point, { icon });
// if (infoContent) {
// const infoWindow = new BMapGL.InfoWindow(infoContent, {
// width: 0,
// height: 0,
// offset: new BMapGL.Size(0, -20),
// enableAutoPan: true,
// enableCloseOnClick: true,
// });
// marker.addEventListener("click", function () {
// this.openInfoWindow(infoWindow);
// setTimeout(removeBubbleArrow, 50);
// });
// }
// return marker;
// };
// // 移除百度地图默认气泡箭头
// const removeBubbleArrow = () => {
// 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 =
// popup.style.border =
// popup.style.boxShadow =
// "none";
// }
// };
// // 绘制索道标点
// if (cablewayList?.length > 0) {
// cablewayList.forEach((pointData) => {
// const point = new BMapGL.Point(
// pointData.baiduLon,
// pointData.baiduLat
// );
// bounds.push(point);
// const 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 marker = createMarker(
// point,
// 11,
// { width: 20, height: 21 },
// { width: 10, height: 40 },
// { width: 20, height: 21 },
// infoContent
// );
// map.addOverlay(marker);
// });
// }
// // 绘制项目部
// if (intLng && intLat) {
// const pointKey = getPointKey(intLng, intLat);
// if (!addedPoints[pointKey]) {
// addedPoints[pointKey] = true;
// const point = new BMapGL.Point(intLng, intLat);
// bounds.push(point);
// const infoContent = `
// <div class="map-container">
// <h4>${projectTitle}</h4>
// </div>`;
// const marker = createMarker(
// point,
// 20,
// { width: 20, height: 21 },
// { width: 20, height: 35 },
// { width: 20, height: 21 },
// infoContent
// );
// map.addOverlay(marker);
// }
// }
// // 绘制杆塔
// if (towerList?.length > 0) {
// const progressColors = {
// 0: "rgba(255, 0, 0, 0.3)",
// 3: "rgba(255, 165, 0, 0.3)",
// 1: "rgba(0, 255, 0, 0.3)",
// };
// towerList.forEach((pointData) => {
// const pointKey = getPointKey(
// pointData.baiduLon,
// pointData.baiduLat
// );
// if (!addedPoints[pointKey]) {
// addedPoints[pointKey] = true;
// const point = new BMapGL.Point(
// pointData.baiduLon,
// pointData.baiduLat
// );
// bounds.push(point);
// // 创建主标记点
// const 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 marker = createMarker(
// point,
// pointData.towerProgress,
// { width: 20, height: 40 },
// { width: 10, height: 35 },
// { width: 20, height: 40 },
// infoContent
// );
// map.addOverlay(marker);
// // 添加标签
// const label = new BMapGL.Label(pointData.towerName, {
// position: point,
// offset: new BMapGL.Size(-15, -70),
// });
// label.setStyle({
// color: "#fff",
// fontSize: "20px",
// backgroundColor: "transparent",
// border: "none",
// padding: "0",
// });
// map.addOverlay(label);
// // 处理特殊进度状态
// if ([3, 4].includes(pointData.towerProgress)) {
// const rectangleSize = 0.0015;
// const rectanglePoints = [
// new BMapGL.Point(
// point.lng - rectangleSize,
// point.lat - rectangleSize
// ),
// new BMapGL.Point(
// point.lng - rectangleSize,
// point.lat + rectangleSize
// ),
// new BMapGL.Point(
// point.lng + rectangleSize,
// point.lat + rectangleSize
// ),
// new BMapGL.Point(
// point.lng + rectangleSize,
// point.lat - rectangleSize
// ),
// ];
// // 绘制背景矩形
// const backgroundRect = new BMapGL.Polygon(rectanglePoints, {
// strokeColor: "#333",
// strokeWeight: 1,
// strokeOpacity: 0.8,
// fillColor: "rgba(200, 200, 200, 0.2)",
// fillOpacity: 0.4,
// });
// map.addOverlay(backgroundRect);
// // 添加四个角点
// const pointsToMark =
// pointData.towerProgress === 3
// ? pointData.towerPouringVos || []
// : Array(4).fill({ finishStatus: 1 });
// pointsToMark.forEach((e, index) => {
// const cornerColor =
// progressColors[e.finishStatus] || "#888";
// const circle = new BMapGL.Circle(
// rectanglePoints[index],
// 20,
// {
// strokeColor: cornerColor,
// strokeWeight: 2,
// strokeOpacity: 0.8,
// fillColor: cornerColor,
// fillOpacity: 1,
// enableEditing: false,
// enableMassClear: false,
// }
// );
// map.addOverlay(circle);
// });
// }
// }
// });
// }
// // 绘制交叉跨越
// if (crossingListNew.length > 0) {
// crossingListNew.forEach((pointData) => {
// const pointKey = getPointKey(
// pointData.baiduLon,
// pointData.baiduLat
// );
// if (!addedPoints[pointKey]) {
// addedPoints[pointKey] = true;
// const point = new BMapGL.Point(
// pointData.baiduLon,
// pointData.baiduLat
// );
// bounds.push(point);
// const 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 marker = createMarker(
// point,
// 21,
// { width: 40, height: 38 },
// { width: 16, height: 20 },
// { width: 40, height: 38 },
// infoContent
// );
// map.addOverlay(marker);
// }
// });
// }
// // 调整视野
// if (bounds.length > 0) {
// map.setViewport(calculateBounds(bounds), {
// zoomFactor: 0.5,
// });
// }
// }
function clearAllOverlays() { function clearAllOverlays() {
map.clearOverlays(); map.clearOverlays();
// 清除可能遗留的自定义覆盖物 // 清除可能遗留的自定义覆盖物
@ -1453,6 +1061,45 @@ function addMapLine() {
}); });
} }
// 绘制公路线
if (highwayList.length > 0) {
for (let i = 0; i < highwayList.length; i++) {
if (highwayList[i].cablewaTransPointVoList.length > 0) {
for (
let j = 0;
j < highwayList[i].cablewaTransPointVoList.length - 1;
j++
) {
const startPoint =
highwayList[i].cablewaTransPointVoList[j];
const endPoint =
highwayList[i].cablewaTransPointVoList[j + 1];
// 创建线段点数组
const segmentPoints = [
new BMapGL.Point(startPoint.lng, startPoint.lat),
new BMapGL.Point(endPoint.lng, endPoint.lat),
];
// 设置线段样式
const segmentOptions = {
strokeColor: "#FFFF00", // 根据类型获取颜色
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)); segments.forEach((segment) => map.addOverlay(segment));
} }