代码优化
This commit is contained in:
BianLzhaoMin
parent
91698a9228
commit
a4ea65f432
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,19 +300,28 @@ function addAllMapPoints() {
|
|||
// }
|
||||
|
||||
// addedPoints[pointKey] = true;
|
||||
|
||||
if (
|
||||
pointData.cablewaTransPointVoList &&
|
||||
pointData.cablewaTransPointVoList.length > 0
|
||||
) {
|
||||
const point = new BMapGL.Point(
|
||||
pointData.baiduLon,
|
||||
pointData.baiduLat
|
||||
pointData.cablewaTransPointVoList[0].lng,
|
||||
pointData.cablewaTransPointVoList[0].lat
|
||||
);
|
||||
// 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), {
|
||||
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 });
|
||||
|
||||
|
|
@ -348,6 +355,10 @@ function addAllMapPoints() {
|
|||
<span>最大坡度</span>
|
||||
<span>${pointData.maxSlope} °</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>索道宽度</span>
|
||||
<span>${pointData.cablewayWidth} m</span>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
// 创建信息窗口，禁用默认样式
|
||||
|
|
@ -370,7 +381,9 @@ function addAllMapPoints() {
|
|||
const popup = infoWindowElements[0];
|
||||
// 移除箭头元素
|
||||
const arrows =
|
||||
popup.getElementsByClassName("BMap_bubble_arrow");
|
||||
popup.getElementsByClassName(
|
||||
"BMap_bubble_arrow"
|
||||
);
|
||||
while (arrows[0]) {
|
||||
arrows[0].parentNode.removeChild(arrows[0]);
|
||||
}
|
||||
|
|
@ -383,6 +396,7 @@ function addAllMapPoints() {
|
|||
});
|
||||
|
||||
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));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue