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

增加标点

This commit is contained in:
BianLzhaoMin 2025-05-21 14:01:35 +08:00
parent 3a1054873f
commit f7023f6f25
9 changed files with 274 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/resources/static/css/synthesisQuery/digitalSignage.css
View File

@ -145,14 +145,15 @@ body {
}
.legend-box .legend-item {
padding: 0 6px;
display: flex;
align-items: center;
justify-content: space-around;
justify-content: space-between;
font-size: 13px;
}
.legend-box .legend-item img {
width: 18px;
width: 14px;
height: 18px;
}

BIN
src/main/resources/static/img/digitalSignage/action_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/main/resources/static/img/digitalSignage/action_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
src/main/resources/static/img/digitalSignage/action_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/main/resources/static/img/digitalSignage/action_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/main/resources/static/img/digitalSignage/action_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/main/resources/static/img/digitalSignage/action_6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/main/resources/static/img/digitalSignage/action_7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

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

@ -11,38 +11,48 @@ let isMap = true; // 是否是地图模式
let projectTitle = ""; // 项目名称
// 图例数据
const legendData = [
{
name: "协调完成",
value: 0,
icon: "../../img/digitalSignage/action_3.png",
},
{
name: "基础开挖",
value: 0,
icon: "../../img/digitalSignage/yellow.png",
icon: "../../img/digitalSignage/action_2.png",
},
{
name: "开挖完成",
name: "基础开挖完成",
value: 0,
icon: "../../img/digitalSignage/green.png",
icon: "../../img/digitalSignage/action_5.png",
},
{
name: "浇筑完成",
name: "基础浇筑",
value: 0,
icon: "../../img/digitalSignage/blue.png",
icon: "../../img/digitalSignage/action_7.png",
},
{
name: "基础浇筑完成",
value: 0,
icon: "../../img/digitalSignage/action_4.png",
},
{
name: "铁塔组立",
value: 0,
icon: "../../img/digitalSignage/orange.png",
icon: "../../img/digitalSignage/action_6.png",
},
{
name: "组塔完成",
name: "铁塔组立完成",
value: 0,
icon: "../../img/digitalSignage/zt_red.png",
},
{
name: "架线完成",
name: "架线施工完成",
value: 0,
icon: "../../img/digitalSignage/zt_purple.png",
},
{
name: "附件安装",
name: "附件安装完成",
value: 0,
icon: "../../img/digitalSignage/zt_green.png",
},
@ -66,7 +76,7 @@ const legendData = [
// 地图配置项
const config = {
polyline: {
strokeWeight: 1, // 线条宽度
strokeWeight: 2, // 线条宽度
strokeOpacity: 0.9, // 透明度
strokeStyle: "dashed", // solid(实线)或dashed(虚线)
enableEditing: false, // 是否可编辑
@ -138,13 +148,14 @@ function getLocationInfo(id) {
// 百度地图初始化
function initMap() {
if (map) {
map.clearOverlays();
map = null;
}
map = new BMapGL.Map("map-box");
// 以第一个点为中心初始化地图
map.centerAndZoom(new BMapGL.Point(intLng, intLat), 15);
map.setTilt(73); //设置地图的倾斜角度
// map.setTilt(73); //设置地图的倾斜角度
map.enableScrollWheelZoom(true); // 启用滚轮缩放
// map.setTilt(60); // 设置地图倾斜角度
@ -157,6 +168,7 @@ function initMap() {
// 每次初始化的时候清除所有标点以及线
map.clearOverlays();
// map.clearLines();
var styleJson = [
// 隐藏道路
{
@ -239,48 +251,59 @@ function initMap() {
});
}
setTimeout(() => {
// setTimeout(() => {
// }, 500);
addAllMapPoints();
addMapLine();
}, 500);
}
// 添加标点
function addAllMapPoints() {
// 清除地图上所有现有的标记
// map.clearOverlays();
map.clearOverlays();
clearAllOverlays();
// 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",
0: "/gzDigitalSignage/img/digitalSignage/white.png",
9: "/gzDigitalSignage/img/digitalSignage/sd.png",
11: "/gzDigitalSignage/img/digitalSignage/zt_white.png",
20: "/gzDigitalSignage/img/digitalSignage/project.png",
1: "../../img/digitalSignage/action_3.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",
};
// 绘制索道标点
const getPointKey = (lon, lat) => {
return `${parseFloat(lon).toFixed(6)},${parseFloat(lat).toFixed(6)}`;
};
if (cablewayList && cablewayList.length > 0) {
cablewayList.forEach((pointData, index) => {
// const pointKey = `117.132663,31.877325`;
const pointKey = `${pointData.baiduLon},${pointData.baiduLat}`;
const pointKey = getPointKey(
pointData.baiduLon,
pointData.baiduLat
);
// 如果该坐标点已经添加过标记，则跳过
// if (addedPoints[pointKey]) {
// console.warn(`重复的点坐标被跳过: ${pointKey}`);
// return;
// }
// // 如果该坐标点已经添加过标记，则跳过
if (addedPoints[pointKey]) {
console.warn(`重复的点坐标被跳过: ${pointKey}`);
return;
}
// addedPoints[pointKey] = true;
addedPoints[pointKey] = true;
const point = new BMapGL.Point(
pointData.baiduLon,
pointData.baiduLat
@ -289,10 +312,10 @@ function addAllMapPoints() {
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 iconUrl = iconTypeList[11]; // 默认使用第一个图标
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 21), {
anchor: new BMapGL.Size(10, 40), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(20, 21), // 与实际图片尺寸一致
});
const marker = new BMapGL.Marker(point, { icon: myIcon });
@ -370,9 +393,9 @@ function addAllMapPoints() {
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 myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 21), {
anchor: new BMapGL.Size(20, 35), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(20, 21), // 与实际图片尺寸一致
});
const marker = new BMapGL.Marker(point, { icon: myIcon });
@ -420,44 +443,169 @@ function addAllMapPoints() {
map.addOverlay(marker);
}
const markerList = [];
// 绘制杆塔
if (towerList && towerList.length > 0) {
// 存储所有覆盖物
const overlays = [];
// 进度状态对应的矩形颜色
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, index) => {
const pointKey = `${pointData.baiduLon},${pointData.baiduLat}`;
// const pointKey = `116.254,39.965`;
// 如果该坐标点已经添加过标记，则跳过
// if (addedPoints[pointKey]) {
// console.warn(`重复的点坐标被跳过: ${pointKey}`);
// return;
// }
if (addedPoints[pointKey]) {
console.warn(`重复的点坐标被跳过: ${pointKey}`);
return;
}
addedPoints[pointKey] = true;
// 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), // 与实际图片尺寸一致
// 1. 创建主标记点
const iconUrl = iconTypeList[pointData.towerProgress];
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(20, 40), {
anchor: new BMapGL.Size(10, 35),
imageSize: new BMapGL.Size(20, 40),
});
const marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);
overlays.push(marker);
// 添加信息窗口
let infoContent = "";
if (pointData.towerProgress == 3) {
const towerPouringVos = pointData.towerPouringVos;
// 索道
infoContent = `
// 矩形大小（经纬度差值）
const rectangleSize = 0.0015; // 可根据需要调整
// 计算矩形四个顶点坐标
const rectanglePoints = [
new BMapGL.Point(
point.lng - rectangleSize,
point.lat - rectangleSize
), // 西南(A)
new BMapGL.Point(
point.lng - rectangleSize,
point.lat + rectangleSize
), // 西北(B)
new BMapGL.Point(
point.lng + rectangleSize,
point.lat + rectangleSize
), // 东北(C)
new BMapGL.Point(
point.lng + rectangleSize,
point.lat - rectangleSize
), // 东南(D)
];
// 1. 绘制完整矩形背景
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);
overlays.push(backgroundRect);
// 2. 在四个顶点添加彩色小圆点
towerPouringVos.forEach((e, index) => {
const cornerColor =
progressColors[e.finishStatus] || "#888"; // 默认灰色
// 创建圆形覆盖物
const circle = new BMapGL.Circle(
rectanglePoints[index],
20,
{
// 5米半径
strokeColor: cornerColor,
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: cornerColor,
fillOpacity: 1,
// 设置zIndex使圆点显示在最上层
enableEditing: false,
enableMassClear: false,
}
);
map.addOverlay(circle);
overlays.push(circle);
});
}
if (pointData.towerProgress == 4) {
// 矩形大小（经纬度差值）
const rectangleSize = 0.0015; // 可根据需要调整
// 计算矩形四个顶点坐标
const rectanglePoints = [
new BMapGL.Point(
point.lng - rectangleSize,
point.lat - rectangleSize
), // 西南(A)
new BMapGL.Point(
point.lng - rectangleSize,
point.lat + rectangleSize
), // 西北(B)
new BMapGL.Point(
point.lng + rectangleSize,
point.lat + rectangleSize
), // 东北(C)
new BMapGL.Point(
point.lng + rectangleSize,
point.lat - rectangleSize
), // 东南(D)
];
// 1. 绘制完整矩形背景
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);
overlays.push(backgroundRect);
// 2. 在四个顶点添加彩色小圆点
const cornerColor = progressColors[1] || "#888"; // 默认灰色
// 创建圆形覆盖物
rectanglePoints.forEach((e) => {
const circle = new BMapGL.Circle(e, 20, {
// 5米半径
strokeColor: cornerColor,
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: cornerColor,
fillOpacity: 1,
// 设置zIndex使圆点显示在最上层
enableEditing: false,
enableMassClear: false,
});
map.addOverlay(circle);
overlays.push(circle);
});
}
// 3. 添加信息窗口（原有代码保持不变）
let infoContent = `
<div class="map-container">
<h4>
${pointData.towerName}
</h4>
<h4>${pointData.towerName}</h4>
<div class="map-container-item">
<span>基础开挖</span>
<span>${pointData.time1 || "/"}</span>
@ -484,31 +632,26 @@ function addAllMapPoints() {
</div>
</div>`;
// 创建信息窗口，禁用默认样式
const infoWindow = new BMapGL.InfoWindow(infoContent, {
width: 0, // 宽度设为0，让内容决定宽度
height: 0, // 高度设为0，让内容决定高度
offset: new BMapGL.Size(0, -20), // 调整偏移量
enableAutoPan: true, // 自动平移地图
enableCloseOnClick: true, // 点击地图不关闭
width: 0,
height: 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";
@ -516,8 +659,26 @@ function addAllMapPoints() {
}, 50);
});
map.addOverlay(marker);
// 4. 添加标签
const label = new BMapGL.Label(pointData.towerName, {
position: point,
offset: new BMapGL.Size(-15, -70),
});
map.addOverlay(label);
overlays.push(label);
label.setStyle({
color: "#fff",
fontSize: "20px",
backgroundColor: "transparent",
border: "none",
padding: "0",
});
});
// 添加清除覆盖物的方法（如果需要）
function clearOverlays() {
overlays.forEach((overlay) => map.removeOverlay(overlay));
}
}
// 绘制交叉跨越
@ -539,7 +700,7 @@ function addAllMapPoints() {
bounds.push(point);
// 检查图标是否存在，不存在则使用默认图标
const iconUrl = iconTypeList[11]; // 默认使用第一个图标
const iconUrl = iconTypeList[21]; // 默认使用第一个图标
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 38), {
anchor: new BMapGL.Size(16, 20), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(40, 38), // 与实际图片尺寸一致
@ -670,6 +831,13 @@ function addAllMapPoints() {
}
}
function clearAllOverlays() {
map.clearOverlays();
// 清除可能遗留的自定义覆盖物
const customOverlays = document.querySelectorAll(".BMap_customOverlay");
customOverlays.forEach((overlay) => overlay.remove());
}
function calculateBounds(points) {
console.log(points, "points999");
var lngs = points.map((p) => p.lng);
@ -697,8 +865,8 @@ function addMapLine() {
let lineColor = "";
let lineStyle = "";
if (
startPoint.towerProgress === 6 &&
endPoint.towerProgress === 6
startPoint.towerProgress === 8 &&
endPoint.towerProgress === 8
) {
lineColor = "#5ad8a6";
lineStyle = "solid";