新需求增加
|
|
@ -56,6 +56,7 @@ body {
|
|||
left: 15px;
|
||||
width: 520px;
|
||||
height: 200px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scroll-box-title,
|
||||
|
|
@ -134,7 +135,8 @@ body {
|
|||
|
||||
/* 左下角图例 */
|
||||
.legend-box {
|
||||
bottom: 15px;
|
||||
/* bottom: 15px; */
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
width: 140px;
|
||||
height: 252px;
|
||||
|
|
@ -157,16 +159,16 @@ body {
|
|||
height: 20px;
|
||||
}
|
||||
|
||||
.legend-box .legend-item:nth-child(1) img,
|
||||
/* .legend-box .legend-item:nth-child(1) img,
|
||||
.legend-box .legend-item:nth-child(2) img,
|
||||
.legend-box .legend-item:nth-child(3) img,
|
||||
.legend-box .legend-item:nth-child(4) img,
|
||||
.legend-box .legend-item:nth-child(5) img,
|
||||
.legend-box .legend-item:nth-child(6) img,
|
||||
.legend-box .legend-item:nth-child(10) img {
|
||||
width: 10px;
|
||||
height: 18px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
} */
|
||||
|
||||
.map-container {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
|
@ -367,3 +369,17 @@ body {
|
|||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
/* 中间标题 */
|
||||
.center-title-box {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 6px;
|
||||
font-family: "Alibaba PuHuiTi R";
|
||||
}
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -9,37 +9,44 @@ let intLng = 116.254; // 初始经度
|
|||
let intLat = 39.965; // 初始纬度
|
||||
let isMap = true; // 是否是地图模式
|
||||
let projectTitle = ""; // 项目名称
|
||||
let centerTitle = ""; // 中间标题
|
||||
// 图例数据
|
||||
const legendData = [
|
||||
{
|
||||
name: "协调完成",
|
||||
value: 0,
|
||||
icon: "../../img/digitalSignage/icon_three.png",
|
||||
// icon: "../../img/digitalSignage/icon_three.png",
|
||||
icon: "../../img/digitalSignage/icon_three_new.png",
|
||||
},
|
||||
{
|
||||
name: "基础开挖",
|
||||
value: 0,
|
||||
icon: "../../img/digitalSignage/icon_two.png",
|
||||
// icon: "../../img/digitalSignage/icon_two.png",
|
||||
icon: "../../img/digitalSignage/icon_two_new.png",
|
||||
},
|
||||
{
|
||||
name: "基础开挖完成",
|
||||
value: 0,
|
||||
icon: "../../img/digitalSignage/icon_five.png",
|
||||
// icon: "../../img/digitalSignage/icon_five.png",
|
||||
icon: "../../img/digitalSignage/icon_five_new.png",
|
||||
},
|
||||
{
|
||||
name: "基础浇筑",
|
||||
value: 0,
|
||||
icon: "../../img/digitalSignage/icon_seven.png",
|
||||
// icon: "../../img/digitalSignage/icon_seven.png",
|
||||
icon: "../../img/digitalSignage/icon_seven_new.png",
|
||||
},
|
||||
{
|
||||
name: "基础浇筑完成",
|
||||
value: 0,
|
||||
icon: "../../img/digitalSignage/icon_four.png",
|
||||
// icon: "../../img/digitalSignage/icon_four.png",
|
||||
icon: "../../img/digitalSignage/icon_four_new.png",
|
||||
},
|
||||
{
|
||||
name: "铁塔组立",
|
||||
value: 0,
|
||||
icon: "../../img/digitalSignage/icon_six.png",
|
||||
// icon: "../../img/digitalSignage/icon_six.png",
|
||||
icon: "../../img/digitalSignage/zt_orange.png",
|
||||
},
|
||||
{
|
||||
name: "铁塔组立完成",
|
||||
|
|
@ -59,7 +66,7 @@ const legendData = [
|
|||
{
|
||||
name: "未 开 始",
|
||||
value: 0,
|
||||
icon: "../../img/digitalSignage/icon_one.png",
|
||||
icon: "../../img/digitalSignage/icon_one_new.png",
|
||||
},
|
||||
{
|
||||
name: "索道运输",
|
||||
|
|
@ -265,19 +272,27 @@ function addAllMapPoints() {
|
|||
// 使用对象记录已添加的点,避免重复
|
||||
const addedPoints = {};
|
||||
const iconTypeList = {
|
||||
1: "../../img/digitalSignage/icon_three.png",
|
||||
// 1: "../../img/digitalSignage/icon_three.png",
|
||||
1: "../../img/digitalSignage/icon_three_new.png",
|
||||
2: "../../img/digitalSignage/icon_two.png",
|
||||
3: "../../img/digitalSignage/icon_five.png",
|
||||
4: "../../img/digitalSignage/icon_seven.png",
|
||||
5: "../../img/digitalSignage/icon_four.png",
|
||||
6: "../../img/digitalSignage/icon_six.png",
|
||||
// 3: "../../img/digitalSignage/icon_five.png",
|
||||
3: "../../img/digitalSignage/icon_five_new.png",
|
||||
// 4: "../../img/digitalSignage/icon_seven.png",
|
||||
// 4: "../../img/digitalSignage/icon_purple.png",
|
||||
4: "../../img/digitalSignage/icon_seven_new.png",
|
||||
// 5: "../../img/digitalSignage/icon_four.png",
|
||||
5: "../../img/digitalSignage/icon_four_new.png",
|
||||
// 6: "../../img/digitalSignage/icon_six.png",
|
||||
6: "../../img/digitalSignage/zt_orange.png",
|
||||
7: "../../img/digitalSignage/zt_red.png",
|
||||
8: "../../img/digitalSignage/zt_purple.png",
|
||||
9: "../../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/sd.png",
|
||||
20: "../../img/digitalSignage/project.png",
|
||||
21: "../../img/digitalSignage/zt_white.png",
|
||||
// 21: "../../img/digitalSignage/zt_white.png",
|
||||
21: "../../img/digitalSignage/zt_gary.png",
|
||||
};
|
||||
|
||||
// 绘制索道标点
|
||||
|
|
@ -316,10 +331,10 @@ function addAllMapPoints() {
|
|||
const iconUrl = iconTypeList[11]; // 默认使用第一个图标
|
||||
const myIcon = new BMapGL.Icon(
|
||||
iconUrl,
|
||||
new BMapGL.Size(40, 40),
|
||||
new BMapGL.Size(24, 24),
|
||||
{
|
||||
anchor: new BMapGL.Size(30, 30), // 修正锚点位置为中心底部
|
||||
imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
|
||||
anchor: new BMapGL.Size(12, 12), // 修正锚点位置为中心底部
|
||||
imageSize: new BMapGL.Size(24, 24), // 与实际图片尺寸一致
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -412,9 +427,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, 40), {
|
||||
anchor: new BMapGL.Size(20, 40), // 修正锚点位置为中心底部
|
||||
imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
|
||||
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(24, 24), {
|
||||
anchor: new BMapGL.Size(12, 12), // 修正锚点位置为中心底部
|
||||
imageSize: new BMapGL.Size(24, 24), // 与实际图片尺寸一致
|
||||
});
|
||||
|
||||
const marker = new BMapGL.Marker(point, { icon: myIcon });
|
||||
|
|
@ -497,16 +512,16 @@ function addAllMapPoints() {
|
|||
// 1. 创建主标记点
|
||||
const iconUrl = iconTypeList[parseInt(pointData.towerProgress)];
|
||||
|
||||
let X = 40;
|
||||
let Y = 40;
|
||||
let anchorX = 20;
|
||||
let anchorY = 20;
|
||||
if ([1, 2, 3, 5, 6, 0].includes(pointData.towerProgress)) {
|
||||
X = 15;
|
||||
Y = 33.75;
|
||||
anchorX = 7.5;
|
||||
anchorY = 30;
|
||||
}
|
||||
let X = 24;
|
||||
let Y = 24;
|
||||
let anchorX = 12;
|
||||
let anchorY = 12;
|
||||
// if ([1, 2, 3, 4, 5, 6, 0].includes(pointData.towerProgress)) {
|
||||
// X = 14;
|
||||
// Y = 33.75;
|
||||
// anchorX = 7.5;
|
||||
// anchorY = 30;
|
||||
// }
|
||||
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(X, Y), {
|
||||
anchor: new BMapGL.Size(anchorX, anchorY),
|
||||
imageSize: new BMapGL.Size(X, Y),
|
||||
|
|
@ -516,7 +531,7 @@ function addAllMapPoints() {
|
|||
map.addOverlay(marker);
|
||||
overlays.push(marker);
|
||||
|
||||
if (pointData.towerProgress == 3) {
|
||||
if (pointData.towerProgress == 100) {
|
||||
const towerPouringVos = pointData.towerPouringVos;
|
||||
|
||||
// 矩形大小(经纬度差值)
|
||||
|
|
@ -579,7 +594,7 @@ function addAllMapPoints() {
|
|||
});
|
||||
}
|
||||
|
||||
if (pointData.towerProgress == 4) {
|
||||
if (pointData.towerProgress == 100) {
|
||||
// 矩形大小(经纬度差值)
|
||||
const rectangleSize = 0.0015; // 可根据需要调整
|
||||
// 计算矩形四个顶点坐标
|
||||
|
|
@ -705,18 +720,27 @@ function addAllMapPoints() {
|
|||
});
|
||||
|
||||
// 4. 添加标签
|
||||
let offset = new BMapGL.Size(-20, -30);
|
||||
if (index % 2 == 0) {
|
||||
offset = new BMapGL.Size(-20, -60);
|
||||
} else {
|
||||
offset = new BMapGL.Size(-20, 30);
|
||||
}
|
||||
const label = new BMapGL.Label(pointData.towerName, {
|
||||
position: point,
|
||||
offset: new BMapGL.Size(-15, -70),
|
||||
offset: offset,
|
||||
});
|
||||
map.addOverlay(label);
|
||||
overlays.push(label);
|
||||
label.setStyle({
|
||||
color: "#fff",
|
||||
fontSize: "20px",
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "11px",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
border: "none",
|
||||
padding: "0",
|
||||
padding: "0 10px",
|
||||
border: "1px solid #ccc",
|
||||
boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.5)",
|
||||
borderRadius: "4px",
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -748,9 +772,9 @@ function addAllMapPoints() {
|
|||
|
||||
// 检查图标是否存在,不存在则使用默认图标
|
||||
const iconUrl = iconTypeList[21]; // 默认使用第一个图标
|
||||
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 40), {
|
||||
anchor: new BMapGL.Size(20, 20), // 修正锚点位置为中心底部
|
||||
imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
|
||||
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(24, 24), {
|
||||
anchor: new BMapGL.Size(10, 10), // 修正锚点位置为中心底部
|
||||
imageSize: new BMapGL.Size(24, 24), // 与实际图片尺寸一致
|
||||
});
|
||||
|
||||
const marker = new BMapGL.Marker(point, { icon: myIcon });
|
||||
|
|
@ -1379,7 +1403,7 @@ function addMapLine() {
|
|||
|
||||
// 设置线段样式
|
||||
const segmentOptions = {
|
||||
strokeColor: "#fff", // 根据类型获取颜色
|
||||
strokeColor: "#800080", // 根据类型获取颜色
|
||||
strokeWeight: config.polyline.strokeWeight,
|
||||
strokeOpacity: config.polyline.strokeOpacity,
|
||||
enableEditing: config.polyline.enableEditing,
|
||||
|
|
@ -1487,7 +1511,13 @@ function getOrgTreeData() {
|
|||
projectTitle = data[0].children[0].children[0].title;
|
||||
}
|
||||
|
||||
getScrollData(nodeId);
|
||||
if (treeData[0].children[0].children[0].title) {
|
||||
projectTitle =
|
||||
treeData[0].children[0].children[0].title;
|
||||
$(".center-title-box").text(projectTitle + "作战图");
|
||||
}
|
||||
|
||||
// getScrollData(nodeId);
|
||||
getLegendData(nodeId);
|
||||
getLocationInfo(nodeId);
|
||||
} else {
|
||||
|
|
@ -1779,7 +1809,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
intLng = obj.data.lon;
|
||||
intLat = obj.data.lat;
|
||||
projectTitle = obj.data.title;
|
||||
getScrollData(nodeId);
|
||||
$(".center-title-box").text(
|
||||
projectTitle + "作战图"
|
||||
);
|
||||
// getScrollData(nodeId);
|
||||
getLegendData(nodeId);
|
||||
getLocationInfo(nodeId);
|
||||
} else {
|
||||
|
|
@ -1848,9 +1881,38 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
const fullScreenBtn = document.querySelector(".full-screen-btn");
|
||||
fullScreenBtn.addEventListener("click", function () {
|
||||
if (document.fullscreenElement) {
|
||||
// 退出全屏
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
// 进入全屏
|
||||
document.documentElement.requestFullscreen();
|
||||
// 遍历树形结构数据把数据全部更改为第一个工程
|
||||
if (
|
||||
treeData[0].children &&
|
||||
treeData[0].children.length > 0 &&
|
||||
treeData[0].children[0].children &&
|
||||
treeData[0].children[0].children.length > 0
|
||||
) {
|
||||
nodeId = treeData[0].children[0].children[0].id;
|
||||
if (
|
||||
treeData[0].children[0].children[0].lon &&
|
||||
treeData[0].children[0].children[0].lat
|
||||
) {
|
||||
intLng = treeData[0].children[0].children[0].lon;
|
||||
intLat = treeData[0].children[0].children[0].lat;
|
||||
}
|
||||
|
||||
if (treeData[0].children[0].children[0].title) {
|
||||
projectTitle = treeData[0].children[0].children[0].title;
|
||||
$(".center-title-box").text(projectTitle + "作战图");
|
||||
}
|
||||
|
||||
// getScrollData(nodeId);
|
||||
getLegendData(nodeId);
|
||||
getLocationInfo(nodeId);
|
||||
} else {
|
||||
initMap();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -105,6 +105,11 @@
|
|||
<div class="full-screen-btn">
|
||||
<img src="../../img/digitalSignage/full-screen.png" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- 中间标题 -->
|
||||
<div class="center-title-box">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../js/synthesisQuery/digitalSignage.js" charset="UTF-8" type="text/javascript"></script>
|
||||
|
|
|
|||