From a4ea65f4329b54ceb9d1febc091e0aa569dfa34d Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 22 May 2025 11:00:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../css/synthesisQuery/digitalSignage.css | 3 +-
.../js/synthesisQuery/digitalSignage.js | 165 ++++++++++++------
2 files changed, 110 insertions(+), 58 deletions(-)
diff --git a/src/main/resources/static/css/synthesisQuery/digitalSignage.css b/src/main/resources/static/css/synthesisQuery/digitalSignage.css
index 79b558b..332e6eb 100644
--- a/src/main/resources/static/css/synthesisQuery/digitalSignage.css
+++ b/src/main/resources/static/css/synthesisQuery/digitalSignage.css
@@ -161,7 +161,8 @@ body {
.legend-box .legend-item:nth-child(2) img,
.legend-box .legend-item:nth-child(3) img,
.legend-box .legend-item:nth-child(5) img,
-.legend-box .legend-item:nth-child(6) img {
+.legend-box .legend-item:nth-child(6) img,
+.legend-box .legend-item:nth-child(10) img {
width: 10px;
height: 18px;
margin-left: 5px;
diff --git a/src/main/resources/static/js/synthesisQuery/digitalSignage.js b/src/main/resources/static/js/synthesisQuery/digitalSignage.js
index 33261b6..bfcded2 100644
--- a/src/main/resources/static/js/synthesisQuery/digitalSignage.js
+++ b/src/main/resources/static/js/synthesisQuery/digitalSignage.js
@@ -59,7 +59,7 @@ const legendData = [
{
name: "未 开 始",
value: 0,
- icon: "../../img/digitalSignage/white.png",
+ icon: "../../img/digitalSignage/icon_one.png",
},
{
name: "索道运输",
@@ -76,7 +76,7 @@ const legendData = [
// 地图配置项
const config = {
polyline: {
- strokeWeight: 2, // 线条宽度
+ strokeWeight: 3, // 线条宽度
strokeOpacity: 0.9, // 透明度
strokeStyle: "dashed", // solid(实线)或dashed(虚线)
enableEditing: false, // 是否可编辑
@@ -154,16 +154,14 @@ function initMap() {
}
map = new BMapGL.Map("map-box");
// 以第一个点为中心初始化地图
- map.centerAndZoom(new BMapGL.Point(intLng, intLat), 15);
+ map.centerAndZoom(new BMapGL.Point(intLng, intLat), 15, function () {
+ map.setRotation(30);
+ });
- // map.setTilt(73); //设置地图的倾斜角度
+ map.setTilt(60); //设置地图的倾斜角度
map.enableScrollWheelZoom(true); // 启用滚轮缩放
- // map.setTilt(60); // 设置地图倾斜角度
- // map.setDisplayOptions({
- // building: true, // 显示3D建筑物
- // });
var navigationControl = new BMapGL.NavigationControl3D();
map.addControl(navigationControl);
@@ -276,7 +274,7 @@ function addAllMapPoints() {
7: "../../img/digitalSignage/zt_red.png",
8: "../../img/digitalSignage/zt_purple.png",
9: "../../img/digitalSignage/zt_green.png",
- 0: "../../img/digitalSignage/white.png",
+ 0: "../../img/digitalSignage/icon_one.png",
11: "../../img/digitalSignage/sd.png",
20: "../../img/digitalSignage/project.png",
21: "../../img/digitalSignage/zt_white.png",
@@ -302,28 +300,37 @@ function addAllMapPoints() {
// }
// 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[11]; // 默认使用第一个图标
- const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 40), {
- anchor: new BMapGL.Size(30, 30), // 修正锚点位置为中心底部
- imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
- });
+ if (
+ pointData.cablewaTransPointVoList &&
+ pointData.cablewaTransPointVoList.length > 0
+ ) {
+ const point = new BMapGL.Point(
+ pointData.cablewaTransPointVoList[0].lng,
+ pointData.cablewaTransPointVoList[0].lat
+ );
+ // const point = new BMapGL.Point(117.132663, 31.877325);
+ bounds.push(point);
- const marker = new BMapGL.Marker(point, { icon: myIcon });
+ // 检查图标是否存在，不存在则使用默认图标
+ const iconUrl = iconTypeList[11]; // 默认使用第一个图标
+ const myIcon = new BMapGL.Icon(
+ iconUrl,
+ new BMapGL.Size(40, 40),
+ {
+ anchor: new BMapGL.Size(30, 30), // 修正锚点位置为中心底部
+ imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
+ }
+ );
- // 添加信息窗口
+ const marker = new BMapGL.Marker(point, { icon: myIcon });
- let infoContent = "";
+ // 添加信息窗口
- // 索道
- infoContent = `
+ let infoContent = "";
+
+ // 索道
+ infoContent = `
索道运输
@@ -348,41 +355,48 @@ function addAllMapPoints() {
最大坡度
${pointData.maxSlope} °
+
+ 索道宽度
+ ${pointData.cablewayWidth} m
+
`;
- // 创建信息窗口，禁用默认样式
- const infoWindow = new BMapGL.InfoWindow(infoContent, {
- width: 0, // 宽度设为0，让内容决定宽度
- height: 0, // 高度设为0，让内容决定高度
- offset: new BMapGL.Size(0, -20), // 调整偏移量
- enableAutoPan: true, // 自动平移地图
- enableCloseOnClick: true, // 点击地图不关闭
- });
+ // 创建信息窗口，禁用默认样式
+ 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);
+ 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]);
+ // 移除百度地图默认添加的三角箭头
+ 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";
}
- // 移除百度地图添加的额外样式
- popup.style.background = "none";
- popup.style.border = "none";
- popup.style.boxShadow = "none";
- }
- }, 50);
- });
+ }, 50);
+ });
- map.addOverlay(marker);
+ map.addOverlay(marker);
+ }
});
}
@@ -487,7 +501,7 @@ function addAllMapPoints() {
let Y = 40;
let anchorX = 20;
let anchorY = 20;
- if ([1, 2, 3, 5, 6].includes(pointData.towerProgress)) {
+ if ([1, 2, 3, 5, 6, 0].includes(pointData.towerProgress)) {
X = 15;
Y = 33.75;
anchorX = 7.5;
@@ -1322,7 +1336,7 @@ function addMapLine() {
) {
lineColor = "#5ad8a6";
lineStyle = "solid";
- } else if (startPoint.existSpan === 1 && endPoint.existSpan === 1) {
+ } else if (endPoint.existSpan === 1) {
lineColor = "#d81e06";
lineStyle = "dashed";
} else {
@@ -1378,6 +1392,43 @@ function addMapLine() {
}
}
+ // 绘制索道线
+ if (cablewayList.length > 0) {
+ cablewayList.forEach((pointData) => {
+ if (
+ pointData.cablewaTransPointVoList &&
+ pointData.cablewaTransPointVoList.length > 0
+ ) {
+ for (
+ let j = 0;
+ j < pointData.cablewaTransPointVoList.length - 1;
+ j++
+ ) {
+ const startPoint = pointData.cablewaTransPointVoList[j];
+ const endPoint = pointData.cablewaTransPointVoList[j + 1];
+
+ const segmentPoints = [
+ new BMapGL.Point(startPoint.lng, startPoint.lat),
+ new BMapGL.Point(endPoint.lng, endPoint.lat),
+ ];
+
+ const segmentOptions = {
+ strokeColor: "#262fc9", // 根据类型获取颜色
+ 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));
}