电子看板公路线条绘制
This commit is contained in:
BianLzhaoMin
parent
da3ed2a248
commit
0deefb9472
|
|
@ -180,7 +180,10 @@ function initMap(list) {
|
|||
let points = JSON.parse(objParams.points);
|
||||
$.each(points, function (i, item) {
|
||||
addMarker(item.lng, item.lat);
|
||||
viewPointLine();
|
||||
});
|
||||
viewPointLine();
|
||||
map.addEventListener("click", function (e) {
|
||||
addMarker(e.latlng.lng, e.latlng.lat);
|
||||
});
|
||||
} else {
|
||||
// 点击地图添加标记
|
||||
|
|
|
|||
|
|
@ -180,7 +180,10 @@ function initMap(list) {
|
|||
let points = JSON.parse(objParams.points);
|
||||
$.each(points, function (i, item) {
|
||||
addMarker(item.lng, item.lat);
|
||||
viewPointLine();
|
||||
});
|
||||
viewPointLine();
|
||||
map.addEventListener("click", function (e) {
|
||||
addMarker(e.latlng.lng, e.latlng.lat);
|
||||
});
|
||||
} else {
|
||||
// 点击地图添加标记
|
||||
|
|
|
|||
|
|
@ -182,11 +182,14 @@ function initMap(list) {
|
|||
addMarker(item.lng, item.lat);
|
||||
});
|
||||
viewPointLine();
|
||||
map.addEventListener("click", function (e) {
|
||||
addMarker(e.latlng.lng, e.latlng.lat);
|
||||
});
|
||||
} else {
|
||||
// // 点击地图添加标记
|
||||
// map.addEventListener("click", function (e) {
|
||||
// addMarker(e.latlng.lng, e.latlng.lat);
|
||||
// });
|
||||
// 点击地图添加标记
|
||||
map.addEventListener("click", function (e) {
|
||||
addMarker(e.latlng.lng, e.latlng.lat);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ let cablewayList = []; // 索道列表
|
|||
let towerList = []; // 塔列表
|
||||
let crossingList = []; // 跨越列表
|
||||
let crossingListNew = []; // 跨越列表
|
||||
let highwayList = []; // 公路列表
|
||||
let intLng = 116.254; // 初始经度
|
||||
let intLat = 39.965; // 初始纬度
|
||||
let isMap = true; // 是否是地图模式
|
||||
|
|
@ -53,6 +54,11 @@ const legendData = [
|
|||
value: 0,
|
||||
icon: "../../img/digitalSignage/zt_red.png",
|
||||
},
|
||||
{
|
||||
name: "架线施工",
|
||||
value: 0,
|
||||
icon: "../../img/digitalSignage/zt_red.png",
|
||||
},
|
||||
{
|
||||
name: "架线施工完成",
|
||||
value: 0,
|
||||
|
|
@ -128,6 +134,12 @@ function getLocationInfo(id) {
|
|||
crossingListNew = [];
|
||||
}
|
||||
|
||||
if (data.highwayList.length > 0) {
|
||||
highwayList = data.highwayList;
|
||||
} else {
|
||||
highwayList = [];
|
||||
}
|
||||
|
||||
// 处理一下交叉信息
|
||||
if (crossingList && crossingList.length > 0) {
|
||||
crossingList.forEach((item) => {
|
||||
|
|
@ -287,9 +299,10 @@ function addAllMapPoints() {
|
|||
7: "../../img/digitalSignage/zt_red.png",
|
||||
8: "../../img/digitalSignage/zt_purple.png",
|
||||
9: "../../img/digitalSignage/zt_green.png",
|
||||
0: "../../img/digitalSignage/zt_green.png",
|
||||
// 0: "../../img/digitalSignage/icon_one.png",
|
||||
0: "../../img/digitalSignage/icon_one_new.png",
|
||||
11: "../../img/digitalSignage/sd.png",
|
||||
11: "../../img/digitalSignage/icon_one_new.png",
|
||||
12: "../../img/digitalSignage/sd.png",
|
||||
20: "../../img/digitalSignage/project.png",
|
||||
// 21: "../../img/digitalSignage/zt_white.png",
|
||||
21: "../../img/digitalSignage/zt_gary.png",
|
||||
|
|
@ -328,7 +341,7 @@ function addAllMapPoints() {
|
|||
bounds.push(point);
|
||||
|
||||
// 检查图标是否存在，不存在则使用默认图标
|
||||
const iconUrl = iconTypeList[11]; // 默认使用第一个图标
|
||||
const iconUrl = iconTypeList[12]; // 默认使用第一个图标
|
||||
const myIcon = new BMapGL.Icon(
|
||||
iconUrl,
|
||||
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() {
|
||||
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));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue