代码优化
This commit is contained in:
parent
91698a9228
commit
a4ea65f432
|
|
@ -161,7 +161,8 @@ body {
|
||||||
.legend-box .legend-item:nth-child(2) img,
|
.legend-box .legend-item:nth-child(2) img,
|
||||||
.legend-box .legend-item:nth-child(3) img,
|
.legend-box .legend-item:nth-child(3) img,
|
||||||
.legend-box .legend-item:nth-child(5) 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;
|
width: 10px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@ const legendData = [
|
||||||
{
|
{
|
||||||
name: "未 开 始",
|
name: "未 开 始",
|
||||||
value: 0,
|
value: 0,
|
||||||
icon: "../../img/digitalSignage/white.png",
|
icon: "../../img/digitalSignage/icon_one.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "索道运输",
|
name: "索道运输",
|
||||||
|
|
@ -76,7 +76,7 @@ const legendData = [
|
||||||
// 地图配置项
|
// 地图配置项
|
||||||
const config = {
|
const config = {
|
||||||
polyline: {
|
polyline: {
|
||||||
strokeWeight: 2, // 线条宽度
|
strokeWeight: 3, // 线条宽度
|
||||||
strokeOpacity: 0.9, // 透明度
|
strokeOpacity: 0.9, // 透明度
|
||||||
strokeStyle: "dashed", // solid(实线)或dashed(虚线)
|
strokeStyle: "dashed", // solid(实线)或dashed(虚线)
|
||||||
enableEditing: false, // 是否可编辑
|
enableEditing: false, // 是否可编辑
|
||||||
|
|
@ -154,16 +154,14 @@ function initMap() {
|
||||||
}
|
}
|
||||||
map = new BMapGL.Map("map-box");
|
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.enableScrollWheelZoom(true); // 启用滚轮缩放
|
||||||
// map.setTilt(60); // 设置地图倾斜角度
|
|
||||||
|
|
||||||
// map.setDisplayOptions({
|
|
||||||
// building: true, // 显示3D建筑物
|
|
||||||
// });
|
|
||||||
var navigationControl = new BMapGL.NavigationControl3D();
|
var navigationControl = new BMapGL.NavigationControl3D();
|
||||||
map.addControl(navigationControl);
|
map.addControl(navigationControl);
|
||||||
|
|
||||||
|
|
@ -276,7 +274,7 @@ function addAllMapPoints() {
|
||||||
7: "../../img/digitalSignage/zt_red.png",
|
7: "../../img/digitalSignage/zt_red.png",
|
||||||
8: "../../img/digitalSignage/zt_purple.png",
|
8: "../../img/digitalSignage/zt_purple.png",
|
||||||
9: "../../img/digitalSignage/zt_green.png",
|
9: "../../img/digitalSignage/zt_green.png",
|
||||||
0: "../../img/digitalSignage/white.png",
|
0: "../../img/digitalSignage/icon_one.png",
|
||||||
11: "../../img/digitalSignage/sd.png",
|
11: "../../img/digitalSignage/sd.png",
|
||||||
20: "../../img/digitalSignage/project.png",
|
20: "../../img/digitalSignage/project.png",
|
||||||
21: "../../img/digitalSignage/zt_white.png",
|
21: "../../img/digitalSignage/zt_white.png",
|
||||||
|
|
@ -302,19 +300,28 @@ function addAllMapPoints() {
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// addedPoints[pointKey] = true;
|
// addedPoints[pointKey] = true;
|
||||||
|
|
||||||
|
if (
|
||||||
|
pointData.cablewaTransPointVoList &&
|
||||||
|
pointData.cablewaTransPointVoList.length > 0
|
||||||
|
) {
|
||||||
const point = new BMapGL.Point(
|
const point = new BMapGL.Point(
|
||||||
pointData.baiduLon,
|
pointData.cablewaTransPointVoList[0].lng,
|
||||||
pointData.baiduLat
|
pointData.cablewaTransPointVoList[0].lat
|
||||||
);
|
);
|
||||||
// const point = new BMapGL.Point(117.132663, 31.877325);
|
// const point = new BMapGL.Point(117.132663, 31.877325);
|
||||||
bounds.push(point);
|
bounds.push(point);
|
||||||
|
|
||||||
// 检查图标是否存在,不存在则使用默认图标
|
// 检查图标是否存在,不存在则使用默认图标
|
||||||
const iconUrl = iconTypeList[11]; // 默认使用第一个图标
|
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), // 修正锚点位置为中心底部
|
anchor: new BMapGL.Size(30, 30), // 修正锚点位置为中心底部
|
||||||
imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
|
imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const marker = new BMapGL.Marker(point, { icon: myIcon });
|
const marker = new BMapGL.Marker(point, { icon: myIcon });
|
||||||
|
|
||||||
|
|
@ -348,6 +355,10 @@ function addAllMapPoints() {
|
||||||
<span>最大坡度</span>
|
<span>最大坡度</span>
|
||||||
<span>${pointData.maxSlope} °</span>
|
<span>${pointData.maxSlope} °</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="map-container-item-ropeway">
|
||||||
|
<span>索道宽度</span>
|
||||||
|
<span>${pointData.cablewayWidth} m</span>
|
||||||
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
// 创建信息窗口,禁用默认样式
|
// 创建信息窗口,禁用默认样式
|
||||||
|
|
@ -370,7 +381,9 @@ function addAllMapPoints() {
|
||||||
const popup = infoWindowElements[0];
|
const popup = infoWindowElements[0];
|
||||||
// 移除箭头元素
|
// 移除箭头元素
|
||||||
const arrows =
|
const arrows =
|
||||||
popup.getElementsByClassName("BMap_bubble_arrow");
|
popup.getElementsByClassName(
|
||||||
|
"BMap_bubble_arrow"
|
||||||
|
);
|
||||||
while (arrows[0]) {
|
while (arrows[0]) {
|
||||||
arrows[0].parentNode.removeChild(arrows[0]);
|
arrows[0].parentNode.removeChild(arrows[0]);
|
||||||
}
|
}
|
||||||
|
|
@ -383,6 +396,7 @@ function addAllMapPoints() {
|
||||||
});
|
});
|
||||||
|
|
||||||
map.addOverlay(marker);
|
map.addOverlay(marker);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -487,7 +501,7 @@ function addAllMapPoints() {
|
||||||
let Y = 40;
|
let Y = 40;
|
||||||
let anchorX = 20;
|
let anchorX = 20;
|
||||||
let anchorY = 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;
|
X = 15;
|
||||||
Y = 33.75;
|
Y = 33.75;
|
||||||
anchorX = 7.5;
|
anchorX = 7.5;
|
||||||
|
|
@ -1322,7 +1336,7 @@ function addMapLine() {
|
||||||
) {
|
) {
|
||||||
lineColor = "#5ad8a6";
|
lineColor = "#5ad8a6";
|
||||||
lineStyle = "solid";
|
lineStyle = "solid";
|
||||||
} else if (startPoint.existSpan === 1 && endPoint.existSpan === 1) {
|
} else if (endPoint.existSpan === 1) {
|
||||||
lineColor = "#d81e06";
|
lineColor = "#d81e06";
|
||||||
lineStyle = "dashed";
|
lineStyle = "dashed";
|
||||||
} else {
|
} 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));
|
segments.forEach((segment) => map.addOverlay(segment));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue