1690 lines
61 KiB
JavaScript
1690 lines
61 KiB
JavaScript
let map = null; // 地图实例
|
||
let graphicLayer = null; // 图形图层
|
||
let graphicLayerList = []; // 图形图层列表
|
||
let treeData = []; // 组织机构树数据
|
||
let nodeId = ""; // 当前选中的节点ID
|
||
let cablewayList = []; // 索道列表
|
||
let towerList = []; // 塔列表
|
||
let crossingList = []; // 跨越列表
|
||
let crossingListNew = []; // 跨越列表
|
||
let crossingLineListNew = []; // 跨越线列表
|
||
let highwayList = []; // 公路列表
|
||
let aThousandFieldsList = []; // 牵张场地
|
||
let intLng = 116.254; // 初始经度
|
||
let intLat = 39.965; // 初始纬度
|
||
let isMap = true; // 是否是地图模式
|
||
let projectOverview = ""; // 工程概况
|
||
let projectTitle = ""; // 项目名称
|
||
let centerTitle = ""; // 中间标题
|
||
|
||
// 转换函数
|
||
function dmsToDecimal(dmsString) {
|
||
// 替换所有可能的符号变体
|
||
const cleaned = dmsString
|
||
.replace(/[°′″]/g, " ") // 替换° ′ ″为空格
|
||
.replace(/'/g, " ") // 替换单引号
|
||
.replace(/"/g, " ") // 替换双引号
|
||
.replace(/\s+/g, " ") // 合并多个空格
|
||
.trim();
|
||
|
||
const parts = cleaned.split(" ");
|
||
|
||
const degrees = parseFloat(parts[0]);
|
||
const minutes = parseFloat(parts[1] || 0);
|
||
const seconds = parseFloat(parts[2] || 0);
|
||
|
||
return degrees + minutes / 60 + seconds / 3600;
|
||
}
|
||
|
||
const mapConfig = {
|
||
scene: {
|
||
center: {
|
||
lat: 31.686288,
|
||
lng: 117.229619,
|
||
// alt: 11333.9,
|
||
// heading: 359.2,
|
||
// pitch: -39.5,
|
||
alt: 12000, // 高度≈缩放级别
|
||
heading: 30, // 旋转30度
|
||
pitch: -45, // 俯视角45度
|
||
},
|
||
|
||
highDynamicRange: false, // 关闭HDR（可减少模糊）
|
||
|
||
scene3DOnly: false,
|
||
shadows: false,
|
||
removeDblClick: true,
|
||
sceneMode: 3,
|
||
showSun: true,
|
||
showMoon: true,
|
||
showSkyBox: true,
|
||
showSkyAtmosphere: true,
|
||
fog: true,
|
||
fxaa: false,
|
||
requestRenderMode: false,
|
||
globe: {
|
||
depthTestAgainstTerrain: false,
|
||
baseColor: "#546a53",
|
||
showGroundAtmosphere: true,
|
||
enableLighting: false,
|
||
},
|
||
cameraController: {
|
||
zoomFactor: 3.0,
|
||
minimumZoomDistance: 1,
|
||
maximumZoomDistance: 50000000,
|
||
enableRotate: true,
|
||
enableTranslate: true,
|
||
enableTilt: true,
|
||
enableZoom: true,
|
||
enableCollisionDetection: true,
|
||
minimumCollisionTerrainHeight: 15000,
|
||
},
|
||
},
|
||
control: {
|
||
homeButton: true,
|
||
baseLayerPicker: true,
|
||
sceneModePicker: true,
|
||
vrButton: false,
|
||
fullscreenButton: true,
|
||
navigationHelpButton: true,
|
||
animation: false,
|
||
timeline: false,
|
||
infoBox: false,
|
||
geocoder: false,
|
||
selectionIndicator: false,
|
||
contextmenu: { hasDefault: false },
|
||
mouseDownView: true,
|
||
zoom: { insertIndex: 1 },
|
||
compass: { bottom: "toolbar", left: "5px" },
|
||
distanceLegend: { left: "10px", bottom: "2px" },
|
||
locationBar: {
|
||
fps: true,
|
||
crs: "CGCS2000_GK_Zone_3",
|
||
crsDecimal: 0,
|
||
template:
|
||
"<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
|
||
},
|
||
},
|
||
templateValues: {
|
||
dataServer: "//data.mars3d.cn",
|
||
gltfServerUrl: "//data.mars3d.cn/gltf",
|
||
},
|
||
terrain: {
|
||
url: "//data.mars3d.cn/terrain",
|
||
show: true,
|
||
},
|
||
basemaps: [
|
||
{ id: 10, name: "地图底图", type: "group" },
|
||
{
|
||
id: 2021,
|
||
pid: 10,
|
||
name: "天地图影像",
|
||
icon: "../../img/mars-map-img/tdt_img.png",
|
||
type: "group",
|
||
layers: [
|
||
{ name: "底图", type: "tdt", layer: "img_d" },
|
||
{ name: "注记", type: "tdt", layer: "img_z" },
|
||
],
|
||
show: true,
|
||
},
|
||
{
|
||
pid: 10,
|
||
name: "天地图电子",
|
||
icon: "../../img/mars-map-img/tdt_vec.png",
|
||
type: "group",
|
||
layers: [
|
||
{ name: "底图", type: "tdt", layer: "vec_d" },
|
||
{ name: "注记", type: "tdt", layer: "vec_z" },
|
||
],
|
||
},
|
||
{
|
||
pid: 10,
|
||
name: "高德影像",
|
||
type: "group",
|
||
icon: "../../img/mars-map-img/gaode_img.png",
|
||
layers: [
|
||
{ name: "底图", type: "gaode", layer: "img_d" },
|
||
{ name: "注记", type: "gaode", layer: "img_z" },
|
||
],
|
||
},
|
||
{
|
||
pid: 10,
|
||
name: "高德电子",
|
||
type: "gaode",
|
||
icon: "../../img/mars-map-img/gaode_vec.png",
|
||
layer: "vec",
|
||
},
|
||
{
|
||
pid: 10,
|
||
name: "百度影像",
|
||
type: "group",
|
||
icon: "../../img/mars-map-img/bd-img.png",
|
||
layers: [
|
||
{ name: "底图", type: "baidu", layer: "img_d" },
|
||
{ name: "注记", type: "baidu", layer: "img_z" },
|
||
],
|
||
},
|
||
{
|
||
pid: 10,
|
||
name: "百度电子",
|
||
icon: "../../img/mars-map-img/bd-vec.png",
|
||
type: "baidu",
|
||
layer: "vec",
|
||
},
|
||
{
|
||
pid: 10,
|
||
name: "腾讯影像",
|
||
icon: "../../img/mars-map-img/tencent_img.png",
|
||
type: "group",
|
||
layers: [
|
||
{ name: "底图", type: "tencent", layer: "img_d" },
|
||
{ name: "注记", type: "tencent", layer: "img_z" },
|
||
],
|
||
},
|
||
{
|
||
pid: 10,
|
||
name: "腾讯电子",
|
||
icon: "../../img/mars-map-img/tencent_vec.png",
|
||
type: "tencent",
|
||
layer: "vec",
|
||
},
|
||
{
|
||
pid: 10,
|
||
name: "ArcGIS影像",
|
||
icon: "../../img/mars-map-img/esriWorldImagery.png",
|
||
type: "xyz",
|
||
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
||
enablePickFeatures: false,
|
||
},
|
||
],
|
||
};
|
||
|
||
// 图例数据
|
||
const legendData = [
|
||
{
|
||
name: "协调完成",
|
||
value: 0,
|
||
// 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_new.png",
|
||
},
|
||
{
|
||
name: "基础开挖完成",
|
||
value: 0,
|
||
// 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_new.png",
|
||
},
|
||
{
|
||
name: "基础浇筑完成",
|
||
value: 0,
|
||
// 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/zt_orange.png",
|
||
},
|
||
{
|
||
name: "铁塔组立完成",
|
||
value: 0,
|
||
icon: "../../img/digitalSignage/zt_red.png",
|
||
},
|
||
{
|
||
name: "架线施工",
|
||
value: 0,
|
||
icon: "../../img/digitalSignage/line_y.png",
|
||
},
|
||
// {
|
||
// name: "架线施工完成",
|
||
// value: 0,
|
||
// icon: "../../img/digitalSignage/zt_purple.png",
|
||
// },
|
||
{
|
||
name: "架线施工完成",
|
||
value: 0,
|
||
icon: "../../img/digitalSignage/line_r.png",
|
||
},
|
||
{
|
||
name: "附件安装完成",
|
||
value: 0,
|
||
icon: "../../img/digitalSignage/zt_green.png",
|
||
},
|
||
{
|
||
name: "未 开 始",
|
||
value: 0,
|
||
icon: "../../img/digitalSignage/icon_one_new.png",
|
||
},
|
||
{
|
||
name: "索道运输",
|
||
value: 0,
|
||
icon: "../../img/digitalSignage/sd.png",
|
||
},
|
||
// {
|
||
// name: "项 目 部",
|
||
// value: 0,
|
||
// icon: "../../img/digitalSignage/project.png",
|
||
// },
|
||
];
|
||
|
||
// 地图配置项
|
||
const config = {
|
||
polyline: {
|
||
strokeWeight: 3, // 线条宽度
|
||
strokeOpacity: 0.9, // 透明度
|
||
strokeStyle: "dashed", // solid(实线)或dashed(虚线)
|
||
enableEditing: false, // 是否可编辑
|
||
enableClicking: true, // 是否可点击
|
||
},
|
||
};
|
||
|
||
// 获取位置信息
|
||
function getLocationInfo(id) {
|
||
const params = {
|
||
encryptedData: encryptCBC(JSON.stringify({ id })),
|
||
};
|
||
ajaxRequest(
|
||
dataUrl + "/backstage/digitalSignage/getTowersInfo",
|
||
"POST",
|
||
params,
|
||
true,
|
||
function () {},
|
||
function (result) {
|
||
console.log(result, "获取位置信息---");
|
||
const { data } = result;
|
||
|
||
crossingList = [];
|
||
crossingListNew = [];
|
||
crossingLineListNew = [];
|
||
cablewayList = [];
|
||
towerList = [];
|
||
|
||
if (data.cablewaTransVos.length > 0) {
|
||
cablewayList = data.cablewaTransVos;
|
||
} else {
|
||
cablewayList = [];
|
||
}
|
||
if (data.towerInfoVos.length > 0) {
|
||
towerList = data.towerInfoVos;
|
||
} else {
|
||
towerList = [];
|
||
}
|
||
if (data.spanInfoVos.length > 0) {
|
||
crossingList = data.spanInfoVos;
|
||
} else {
|
||
crossingList = [];
|
||
crossingListNew = [];
|
||
crossingLineListNew = [];
|
||
}
|
||
|
||
if (data.highwayList.length > 0) {
|
||
highwayList = data.highwayList;
|
||
} else {
|
||
highwayList = [];
|
||
}
|
||
|
||
if (data.aThousandFieldsList.length > 0) {
|
||
aThousandFieldsList = data.aThousandFieldsList;
|
||
} else {
|
||
aThousandFieldsList = [];
|
||
}
|
||
|
||
// 处理一下交叉信息
|
||
if (crossingList && crossingList.length > 0) {
|
||
crossingList.forEach((item) => {
|
||
let lineList = [];
|
||
if (item.lonAndLat && item.lonAndLat.indexOf(",") > -1) {
|
||
const lonAndLatList = item.lonAndLat.split(",");
|
||
|
||
lonAndLatList.forEach((lonAndLat, index) => {
|
||
const lonAndLatItem = lonAndLat.split("@");
|
||
crossingListNew.push({
|
||
baiduLon: lonAndLatItem[0],
|
||
baiduLat: lonAndLatItem[1],
|
||
...item,
|
||
});
|
||
|
||
lineList.push({
|
||
baiduLon: lonAndLatItem[0],
|
||
baiduLat: lonAndLatItem[1],
|
||
...item,
|
||
});
|
||
});
|
||
}
|
||
|
||
crossingLineListNew.push({ lineList });
|
||
});
|
||
}
|
||
initMap();
|
||
},
|
||
function (xhr) {
|
||
error(xhr);
|
||
}
|
||
);
|
||
}
|
||
|
||
// 百度地图初始化
|
||
async function initMap() {
|
||
// if (map) {
|
||
// map.destroy();
|
||
// map = null;
|
||
// }
|
||
// if (!mars3d.Util.webglreport()) {
|
||
// mars3d.Util.webglerror();
|
||
// }
|
||
|
||
// try {
|
||
// mapConfig.scene.center.lat = intLat || 31.686288;
|
||
// mapConfig.scene.center.lng = intLng || 117.229619;
|
||
// map = new mars3d.Map("map-box", mapConfig);
|
||
// let graphicLayer = new mars3d.layer.GraphicLayer();
|
||
// map.addLayer(graphicLayer);
|
||
|
||
// addAllMapPoints(graphicLayer);
|
||
// addMapLine(graphicLayer);
|
||
// addMapAThousandFields(graphicLayer);
|
||
// } catch (error) {
|
||
// console.log("初始化地图出错", error);
|
||
// haoutil.alert(error?.message, "出错了");
|
||
// }
|
||
|
||
try {
|
||
// 1. 彻底清理旧地图实例
|
||
if (map) {
|
||
// 移除所有自定义图层
|
||
if (graphicLayer) {
|
||
graphicLayerList.forEach((e) => {
|
||
graphicLayer.removeGraphic(e);
|
||
});
|
||
// graphicLayer.clear();
|
||
// map.removeLayer(graphicLayer, true); // true表示彻底销毁
|
||
// graphicLayer = null;
|
||
}
|
||
|
||
// 销毁地图实例
|
||
// map.destroy();
|
||
// map = null;
|
||
|
||
// // 强制垃圾回收（非必要但建议）
|
||
// if (window.gc) window.gc();
|
||
|
||
// 5. 添加内容
|
||
|
||
const centerPoint = [intLng, intLat];
|
||
|
||
// 方式1：直接飞向目标点
|
||
map.flyToPoint(centerPoint, {
|
||
radius: 5000, // 可视范围半径（米）
|
||
duration: 2, // 飞行时间（秒）
|
||
heading: 0, // 视角方向（0-360度）
|
||
pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
|
||
});
|
||
await addAllMapPoints();
|
||
await addMapLine();
|
||
await addMapAThousandFields();
|
||
} else {
|
||
// 2. WebGL兼容性检查
|
||
if (!mars3d.Util.webglreport()) {
|
||
mars3d.Util.webglerror();
|
||
return;
|
||
}
|
||
|
||
// 3. 初始化新地图
|
||
mapConfig.scene.center.lat = intLat || 31.686288;
|
||
mapConfig.scene.center.lng = intLng || 117.229619;
|
||
map = new mars3d.Map("map-box", mapConfig);
|
||
|
||
// 4. 创建新的图形图层
|
||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||
|
||
const centerPoint = [intLng, intLat];
|
||
|
||
map.flyToPoint(centerPoint, {
|
||
radius: 5000, // 可视范围半径（米）
|
||
duration: 5, // 飞行时间（秒）
|
||
heading: 0, // 视角方向（0-360度）
|
||
pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
|
||
});
|
||
|
||
map.addLayer(graphicLayer);
|
||
|
||
// 5. 添加内容
|
||
await addAllMapPoints();
|
||
await addMapLine();
|
||
await addMapAThousandFields();
|
||
}
|
||
} catch (error) {
|
||
// 失败时也清理残留
|
||
if (map) {
|
||
map.destroy();
|
||
map = null;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加标点
|
||
async function addAllMapPoints() {
|
||
const iconTypeList = {
|
||
// 1: "../../img/digitalSignage/icon_three.png",
|
||
1: "../../img/digitalSignage/icon_three_new.png",
|
||
// 2: "../../img/digitalSignage/icon_two.png",
|
||
2: "../../img/digitalSignage/icon_two_new.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_red.png", // 新增的工序
|
||
9: "../../img/digitalSignage/zt_red.png",
|
||
10: "../../img/digitalSignage/zt_green.png",
|
||
// 0: "../../img/digitalSignage/icon_one.png",
|
||
0: "../../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",
|
||
};
|
||
|
||
// 绘制索道标点
|
||
if (cablewayList && cablewayList.length > 0) {
|
||
cablewayList.forEach((pointData, index) => {
|
||
if (
|
||
pointData.cablewaTransPointVoList &&
|
||
pointData.cablewaTransPointVoList.length > 0
|
||
) {
|
||
// const positionNew = mars3d.PointTrans.bd2wgs([
|
||
// pointData.cablewaTransPointVoList[0].lng,
|
||
// pointData.cablewaTransPointVoList[0].lat,
|
||
// ]);
|
||
const billboard = new mars3d.graphic.BillboardEntity({
|
||
position: [
|
||
pointData.cablewaTransPointVoList[0].lng,
|
||
pointData.cablewaTransPointVoList[0].lat,
|
||
1000,
|
||
],
|
||
style: {
|
||
image: iconTypeList[12],
|
||
width: 30,
|
||
height: 30,
|
||
scale: 1,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
clampToGround: true,
|
||
},
|
||
});
|
||
|
||
// 添加点击事件
|
||
billboard.on(mars3d.EventType.click, function (event) {
|
||
// console.log("点击了标点", event.graphic.attr);
|
||
const graphic = event.graphic;
|
||
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 class="map-container-item-ropeway">
|
||
<span>索道宽度</span>
|
||
<span>${pointData.cablewayWidth} m</span>
|
||
</div>
|
||
</div>`;
|
||
// 创建自定义信息窗体
|
||
graphicLayer.bindPopup(infoContent, {
|
||
position: graphic.position,
|
||
});
|
||
});
|
||
|
||
graphicLayer.addGraphic(billboard);
|
||
|
||
graphicLayerList.push(billboard);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 绘制项目部
|
||
if (intLng && intLat) {
|
||
// const positionNew = mars3d.PointTrans.bd2wgs([intLng, intLat]);
|
||
const billboard = new mars3d.graphic.BillboardEntity({
|
||
position: [intLng, intLat, 1000],
|
||
style: {
|
||
image: iconTypeList[20],
|
||
width: 30,
|
||
height: 30,
|
||
|
||
scale: 1,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
clampToGround: true,
|
||
},
|
||
});
|
||
|
||
// 添加点击事件
|
||
billboard.on(mars3d.EventType.click, function (event) {
|
||
// console.log("点击了标点", event.graphic.attr);
|
||
const graphic = event.graphic;
|
||
const infoContent = `
|
||
<div class="map-container">
|
||
<h4>
|
||
${projectTitle}
|
||
</h4>
|
||
</div>`;
|
||
// 创建自定义信息窗体
|
||
graphicLayer.bindPopup(infoContent, {
|
||
position: graphic.position,
|
||
});
|
||
});
|
||
|
||
graphicLayer.addGraphic(billboard);
|
||
graphicLayerList.push(billboard);
|
||
}
|
||
|
||
// 绘制杆塔
|
||
if (towerList && towerList.length > 0) {
|
||
towerList.forEach((pointData, index) => {
|
||
const isEven = index % 2 === 0;
|
||
// 标点垂直方向设置
|
||
const billboardVerticalOrigin = Cesium.VerticalOrigin.BOTTOM; // 标点固定底部对齐
|
||
|
||
// 标签位置设置
|
||
const labelVerticalOrigin = isEven
|
||
? Cesium.VerticalOrigin.BOTTOM
|
||
: Cesium.VerticalOrigin.TOP;
|
||
const pixelOffsetY = isEven ? 40 : -70; // 调整偏移量（根据标点大小适当调整）
|
||
|
||
const iconUrl = iconTypeList[parseInt(pointData.towerProgress)];
|
||
|
||
// const wgsPoint = mars3d.PointTrans.bd2wgs([
|
||
// pointData.baiduLon,
|
||
// pointData.baiduLat,
|
||
// ]);
|
||
|
||
// const wgsPoint = [
|
||
// dmsToDecimal(pointData.baiduLon),
|
||
// dmsToDecimal(pointData.baiduLat),
|
||
// ];
|
||
|
||
const billboard = new mars3d.graphic.BillboardEntity({
|
||
position: [pointData.baiduLon, pointData.baiduLat],
|
||
style: {
|
||
image: iconUrl,
|
||
width: 30,
|
||
height: 30,
|
||
scale: 1,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
clampToGround: true,
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
|
||
},
|
||
// 其他属性
|
||
attr: {
|
||
id: index,
|
||
name: pointData.towerName,
|
||
},
|
||
});
|
||
|
||
const label2 = new mars3d.graphic.DivGraphic({
|
||
position: [pointData.baiduLon, pointData.baiduLat],
|
||
style: {
|
||
html: `<div class="tower-label">${pointData.towerName}</div>`,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: labelVerticalOrigin,
|
||
scaleByDistance: true,
|
||
offsetY: isEven ? -40 : 10,
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
},
|
||
});
|
||
|
||
graphicLayer.addGraphic(billboard);
|
||
graphicLayer.addGraphic(label2);
|
||
|
||
// 添加点击事件
|
||
billboard.on(mars3d.EventType.click, function (event) {
|
||
// console.log("点击了标点", event.graphic.attr);
|
||
const graphic = event.graphic;
|
||
let 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 class="map-container-item">
|
||
<span>铁塔组立完成</span>
|
||
<span>${pointData.time7 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>架线施工</span>
|
||
<span>${pointData.time8 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>架线施工完成</span>
|
||
<span>${pointData.time9 || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>附件安装完成</span>
|
||
<span>${pointData.time10 || "/"}</span>
|
||
</div>
|
||
</div>`;
|
||
// 创建自定义信息窗体
|
||
graphicLayer.bindPopup(infoContent, {
|
||
position: graphic.position,
|
||
});
|
||
});
|
||
|
||
graphicLayerList.push(billboard);
|
||
graphicLayerList.push(label2);
|
||
});
|
||
}
|
||
|
||
// 绘制交叉跨越
|
||
if (crossingListNew.length > 0) {
|
||
crossingListNew.forEach((pointData, index) => {
|
||
// const positionNew = mars3d.PointTrans.bd2wgs([
|
||
// pointData.baiduLon,
|
||
// pointData.baiduLat,
|
||
// ]);
|
||
const billboard = new mars3d.graphic.BillboardEntity({
|
||
position: [pointData.baiduLon, pointData.baiduLat, 1000],
|
||
style: {
|
||
image: iconTypeList[21],
|
||
width: 30,
|
||
height: 30,
|
||
scale: 1,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
clampToGround: true,
|
||
},
|
||
});
|
||
|
||
// 添加点击事件
|
||
billboard.on(mars3d.EventType.click, function (event) {
|
||
// console.log("点击了标点", event.graphic.attr);
|
||
|
||
console.log(event, "pointData点击了----");
|
||
|
||
// <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 class="map-container-item">
|
||
// <span>架线施工</span>
|
||
// <span>
|
||
// ${pointData.towerInfoVo.time8 || "/"}
|
||
// </span>
|
||
// </div>
|
||
// <div class="map-container-item">
|
||
// <span>架线施工完成</span>
|
||
// <span>
|
||
// ${pointData.towerInfoVo.time9 || "/"}
|
||
// </span>
|
||
// </div>
|
||
// <div class="map-container-item">
|
||
// <span>附件安装完成</span>
|
||
// <span>
|
||
// ${pointData.towerInfoVo.time10 || "/"}
|
||
// </span>
|
||
// </div>
|
||
// </div>
|
||
const graphic = event.graphic;
|
||
const infoContent = `
|
||
<div class="map-container-cross">
|
||
|
||
<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} m</span>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
// 创建自定义信息窗体
|
||
graphicLayer.bindPopup(infoContent, {
|
||
position: graphic.position,
|
||
});
|
||
});
|
||
|
||
graphicLayer.addGraphic(billboard);
|
||
graphicLayerList.push(billboard);
|
||
});
|
||
}
|
||
}
|
||
|
||
// 添加标点折线（智能绘制虚实线）
|
||
async function addMapLine() {
|
||
// 存储所有线段
|
||
const segments = [];
|
||
// 绘制杆塔线
|
||
if (towerList.length > 0) {
|
||
for (let i = 0; i < towerList.length - 1; i++) {
|
||
const startPoint = towerList[i];
|
||
const endPoint = towerList[i + 1];
|
||
|
||
let lineColor = "";
|
||
let lineMaterial = null; // 用于存储线材质
|
||
|
||
// 判断条件部分保持不变
|
||
if (
|
||
(startPoint.towerProgress == 8 &&
|
||
endPoint.towerProgress == 8) ||
|
||
startPoint.towerProgress == 8
|
||
) {
|
||
// lineColor = "#FFFF00";
|
||
// lineMaterial = new Cesium.ColorMaterialProperty({
|
||
// // 实线
|
||
// color: Cesium.Color.fromCssColorString("#FFFF00"),
|
||
// });
|
||
|
||
// 创建线段点数组
|
||
const positions = [
|
||
[startPoint.baiduLon, startPoint.baiduLat, 500],
|
||
[endPoint.baiduLon, endPoint.baiduLat, 500],
|
||
];
|
||
const polyline = new mars3d.graphic.PolylineEntity({
|
||
positions: positions,
|
||
eventParent: false,
|
||
style: {
|
||
width: 2, // 线宽（像素）
|
||
color: "#FFFF00", // 使用动态设置的材质
|
||
clampToGround: true, // 是否贴地（山区建议设为true）
|
||
},
|
||
});
|
||
graphicLayer.addGraphic(polyline);
|
||
graphicLayerList.push(polyline);
|
||
} else if (
|
||
endPoint.existSpan === 1 &&
|
||
startPoint.existSpan === 1 &&
|
||
startPoint.towerProgress != 9 &&
|
||
endPoint.towerProgress != 9 &&
|
||
startPoint.towerProgress != 8 &&
|
||
endPoint.towerProgress != 8 &&
|
||
startPoint.towerProgress != 10 &&
|
||
endPoint.towerProgress != 10
|
||
) {
|
||
// lineColor = "#d81e06";
|
||
// lineMaterial = new Cesium.PolylineDashMaterialProperty({
|
||
// // 虚线
|
||
// color: Cesium.Color.fromCssColorString(lineColor),
|
||
// dashLength: 16.0, // 可调整虚线长度
|
||
// });
|
||
// // 创建线段点数组
|
||
// const positions = [
|
||
// [startPoint.baiduLon, startPoint.baiduLat, 500],
|
||
// [endPoint.baiduLon, endPoint.baiduLat, 500],
|
||
// ];
|
||
// const polyline = new mars3d.graphic.PolylineEntity({
|
||
// positions: positions,
|
||
// eventParent: false,
|
||
// style: {
|
||
// width: 2, // 线宽（像素）
|
||
// material: lineMaterial, // 使用动态设置的材质
|
||
// clampToGround: true, // 是否贴地（山区建议设为true）
|
||
// },
|
||
// });
|
||
// graphicLayer.addGraphic(polyline);
|
||
// graphicLayerList.push(polyline);
|
||
} else if (
|
||
(startPoint.towerProgress === 9 &&
|
||
endPoint.towerProgress === 9) ||
|
||
(startPoint.towerProgress === 10 &&
|
||
endPoint.towerProgress === 10) ||
|
||
startPoint.towerProgress === 9
|
||
) {
|
||
// lineColor = "#d81e06";
|
||
// lineMaterial = new Cesium.ColorMaterialProperty({
|
||
// // 实线
|
||
// color: Cesium.Color.fromCssColorString(lineColor),
|
||
// });
|
||
|
||
// 创建线段点数组
|
||
const positions = [
|
||
[startPoint.baiduLon, startPoint.baiduLat],
|
||
[endPoint.baiduLon, endPoint.baiduLat],
|
||
];
|
||
const polyline = new mars3d.graphic.PolylineEntity({
|
||
positions: positions,
|
||
eventParent: false,
|
||
style: {
|
||
width: 2, // 线宽（像素）
|
||
color: "#d81e06", // 使用动态设置的材质
|
||
clampToGround: true, // 是否贴地（山区建议设为true）
|
||
},
|
||
});
|
||
graphicLayer.addGraphic(polyline);
|
||
graphicLayerList.push(polyline);
|
||
} else {
|
||
lineColor = "#fff";
|
||
lineMaterial = new Cesium.PolylineDashMaterialProperty({
|
||
// 虚线
|
||
// color: Cesium.Color.fromCssColorString(lineColor),
|
||
color: Cesium.Color.TRANSPARENT,
|
||
dashLength: 16.0, // 可调整虚线长度
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
// 绘制交叉线路
|
||
if (crossingLineListNew.length > 0) {
|
||
for (let i = 0; i < crossingLineListNew.length; i++) {
|
||
for (
|
||
let j = 0;
|
||
j < crossingLineListNew[i].lineList.length - 1;
|
||
j++
|
||
) {
|
||
const startPoint = crossingLineListNew[i].lineList[j];
|
||
const endPoint = crossingLineListNew[i].lineList[j + 1];
|
||
|
||
// 创建线段点数组
|
||
const positions = [
|
||
[startPoint.baiduLon, startPoint.baiduLat],
|
||
[endPoint.baiduLon, endPoint.baiduLat],
|
||
];
|
||
|
||
// const positions2 = positions.map((item) => {
|
||
// return mars3d.PointTrans.bd2wgs(item);
|
||
// });
|
||
|
||
const polyline = new mars3d.graphic.PolylineEntity({
|
||
positions: positions,
|
||
eventParent: false,
|
||
style: {
|
||
width: 2, // 线宽（像素）
|
||
color: "#800080", // 线颜色
|
||
clampToGround: true, // 是否贴地（山区建议设为true）
|
||
},
|
||
});
|
||
graphicLayer.addGraphic(polyline);
|
||
graphicLayerList.push(polyline);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 绘制索道线
|
||
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 positions = [
|
||
[startPoint.lng, startPoint.lat],
|
||
[endPoint.lng, endPoint.lat],
|
||
];
|
||
|
||
// const positions2 = positions.map((item) => {
|
||
// return mars3d.PointTrans.bd2wgs(item);
|
||
// });
|
||
|
||
const polyline = new mars3d.graphic.PolylineEntity({
|
||
positions: positions,
|
||
eventParent: false,
|
||
style: {
|
||
width: 2, // 线宽（像素）
|
||
color: "#262fc9", // 线颜色
|
||
clampToGround: true, // 是否贴地（山区建议设为true）
|
||
},
|
||
});
|
||
graphicLayer.addGraphic(polyline);
|
||
graphicLayerList.push(polyline);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 绘制公路线
|
||
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 positions = [
|
||
[startPoint.lng, startPoint.lat],
|
||
[endPoint.lng, endPoint.lat],
|
||
];
|
||
|
||
// const positions2 = positions.map((item) => {
|
||
// return mars3d.PointTrans.bd2wgs(item);
|
||
// });
|
||
|
||
const polyline = new mars3d.graphic.PolylineEntity({
|
||
positions: positions,
|
||
// eventParent: true,
|
||
style: {
|
||
width: 2, // 线宽（像素）
|
||
color: "#FFFF00", // 线颜色
|
||
clampToGround: true, // 是否贴地（山区建议设为true）
|
||
},
|
||
});
|
||
|
||
// 添加点击事件
|
||
polyline.on(mars3d.EventType.click, function (event) {
|
||
// console.log("点击了标点", event.graphic.attr);
|
||
const graphic = event.graphic;
|
||
let infoContent = `
|
||
<div class="map-container-2 map-container">
|
||
<h4>公路所在杆塔：${highwayList[i].towerName}</h4>
|
||
<div class="map-container-item">
|
||
<span>宽度</span>
|
||
<span>${highwayList[i].cablewayWidth || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>长度</span>
|
||
<span>${highwayList[i].cablewayLength || "/"}</span>
|
||
</div>
|
||
</div>`;
|
||
// 创建自定义信息窗体
|
||
// graphicLayer.bindPopup(infoContent, {
|
||
// position: graphic.position,
|
||
// });
|
||
|
||
graphic.bindPopup(infoContent);
|
||
graphic.openPopup();
|
||
});
|
||
graphicLayer.addGraphic(polyline);
|
||
graphicLayerList.push(polyline);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 将所有线段添加到地图
|
||
segments.forEach((segment) => map.addOverlay(segment));
|
||
}
|
||
|
||
// 绘制牵张场地区域图
|
||
async function addMapAThousandFields() {
|
||
if (aThousandFieldsList.length > 0) {
|
||
aThousandFieldsList.forEach((item) => {
|
||
if (
|
||
item.cablewaTransPointVoList &&
|
||
item.cablewaTransPointVoList.length > 0
|
||
) {
|
||
let points = [];
|
||
// 根据sort字段排序 防止点位顺序不一致
|
||
item.cablewaTransPointVoList.forEach((j) => {
|
||
points.push([j.lng, j.lat]);
|
||
});
|
||
|
||
// const positions2 = points.map((item) => {
|
||
// return mars3d.PointTrans.bd2wgs(item);
|
||
// });
|
||
|
||
if (points.length > 0) {
|
||
const graphic = new mars3d.graphic.PolygonEntity({
|
||
positions: points,
|
||
// eventParent: false,
|
||
style: {
|
||
color: "#00FFFF", // 区域填充颜色
|
||
opacity: 0.5, // 透明度(0-1)
|
||
outline: true, // 是否显示边框
|
||
outlineWidth: 2, // 边框宽度(像素)
|
||
outlineColor: "#00FFFF", // 边框颜色
|
||
clampToGround: true,
|
||
},
|
||
attr: { remark: "示例区域" },
|
||
});
|
||
|
||
// 添加点击事件
|
||
graphic.on(mars3d.EventType.click, function (event) {
|
||
// console.log("点击了标点", event.graphic.attr);
|
||
const graphic = event.graphic;
|
||
let infoContent = `
|
||
<div class="map-container-2 map-container">
|
||
<h4>名称：${item.name}</h4>
|
||
<div class="map-container-item">
|
||
<span>宽度</span>
|
||
<span>${item.cablewayWidth || "/"}</span>
|
||
</div>
|
||
<div class="map-container-item">
|
||
<span>长度</span>
|
||
<span>${item.cablewayLength || "/"}</span>
|
||
</div>
|
||
</div>`;
|
||
// 创建自定义信息窗体
|
||
// graphicLayer.bindPopup(infoContent, {
|
||
// position: graphic.position,
|
||
// });
|
||
|
||
graphic.bindPopup(infoContent);
|
||
graphic.openPopup();
|
||
});
|
||
graphicLayer.addGraphic(graphic);
|
||
graphicLayerList.push(graphic);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// 获取组织树数据
|
||
function getOrgTreeData() {
|
||
ajaxRequest(
|
||
dataUrl + "/backstage/digitalSignage/getProTree",
|
||
"POST",
|
||
{},
|
||
true,
|
||
function () {},
|
||
function (result) {
|
||
console.log(result, "组织机构树数据获取成功---");
|
||
|
||
const { data } = result;
|
||
|
||
// 判断是否有工程 有的话取第一个
|
||
if (data && data.length > 0) {
|
||
setSpreadToNodes(data);
|
||
treeData = data;
|
||
// 获取第一个工程
|
||
if (
|
||
data[0].children &&
|
||
data[0].children.length > 0 &&
|
||
data[0].children[0].children &&
|
||
data[0].children[0].children.length > 0
|
||
) {
|
||
nodeId = data[0].children[0].children[0].id;
|
||
|
||
if (
|
||
data[0].children[0].children[0].lon &&
|
||
data[0].children[0].children[0].lat
|
||
) {
|
||
intLng = data[0].children[0].children[0].lon;
|
||
intLat = data[0].children[0].children[0].lat;
|
||
projectTitle = data[0].children[0].children[0].title;
|
||
}
|
||
|
||
if (treeData[0].children[0].children[0].title) {
|
||
projectTitle =
|
||
treeData[0].children[0].children[0].title;
|
||
$(".center-title-box").text(projectTitle + "作战图");
|
||
}
|
||
|
||
// getScrollData(nodeId);
|
||
$(".project-overview-content").text(
|
||
treeData[0].children[0].children[0].projectOverview ||
|
||
"暂无"
|
||
);
|
||
getLegendData(nodeId);
|
||
getLocationInfo(nodeId);
|
||
} else {
|
||
initMap();
|
||
}
|
||
}
|
||
},
|
||
function (xhr) {
|
||
error(xhr);
|
||
}
|
||
);
|
||
}
|
||
getOrgTreeData();
|
||
// 递归
|
||
function setSpreadToNodes(nodes, spreadValue = true) {
|
||
if (!nodes || !Array.isArray(nodes)) return;
|
||
|
||
nodes.forEach((node) => {
|
||
node.spread = spreadValue;
|
||
|
||
if (node.children && node.children.length > 0) {
|
||
setSpreadToNodes(node.children, spreadValue);
|
||
}
|
||
});
|
||
}
|
||
// 获取左上角滚动数据源
|
||
function getScrollData(id) {
|
||
const scrollData = [
|
||
{
|
||
name: "跨线路",
|
||
location: "N11-N12999",
|
||
content: [
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "跨越地点",
|
||
location: "N11-N12336",
|
||
content: [
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "跨越地点",
|
||
location: "N11-N128885",
|
||
content: [
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "跨越地点",
|
||
location: "N11-N128773",
|
||
content: [
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
{
|
||
name: "垂直净度",
|
||
value: "9896",
|
||
},
|
||
],
|
||
},
|
||
];
|
||
const params = {
|
||
encryptedData: encryptCBC(JSON.stringify({ id })),
|
||
};
|
||
ajaxRequest(
|
||
dataUrl + "/backstage/digitalSignage/getThreeSpans",
|
||
"POST",
|
||
params,
|
||
true,
|
||
function () {},
|
||
function (result) {
|
||
// console.log(result, "左上角滚动数据获取成功---");
|
||
|
||
const { data } = result;
|
||
|
||
let scrollBox = $(".content-wrapper");
|
||
let innerHtml = "";
|
||
if (data && data.length > 0) {
|
||
data.forEach((item) => {
|
||
let describeHtml = "";
|
||
if (item.spanType === "跨线路") {
|
||
describeHtml += `
|
||
<i>上层线路：${item.upperLine || "/"}</i>
|
||
<i>下层线路: ${item.lowerLine || "/"}</i>
|
||
<i>交叉角度: ${item.intersectionAngle || "/"}</i>
|
||
<i>垂直距离: ${item.verticalDistance || "/"}</i>
|
||
<i>安全裕度: ${item.safetyMargin || "/"}</i>
|
||
`;
|
||
} else if (item.spanType === "跨公路") {
|
||
describeHtml += `
|
||
<i>垂直净距：${item.verticalClearDistance || "/"} m</i>
|
||
<i>杆塔间距: ${item.towerSpacing || "/"} m</i>
|
||
<i>公路宽度: ${item.highwayWidth || "/"} m</i>
|
||
`;
|
||
} else if (item.spanType === "跨铁路") {
|
||
describeHtml += `
|
||
<i>垂直净距：${item.verticalClearDistance || "/"} m</i>
|
||
<i>杆塔间距: ${item.towerSpacing || "/"} m</i>
|
||
<i>交叉角度: ${item.intersectionAngle || "/"} °</i>
|
||
`;
|
||
} else {
|
||
}
|
||
|
||
// 单行数据
|
||
innerHtml += `
|
||
<div class="flex-box content-item">
|
||
<span>${item.spanType}</span>
|
||
<span>
|
||
<img src="../../img/digitalSignage/warning.png" alt="">
|
||
${item.towerName} - ${item.nextTowerName}
|
||
</span>
|
||
<span>${describeHtml}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
$(".scroll-box").show();
|
||
scrollBox.html(innerHtml);
|
||
} else {
|
||
$(".scroll-box").hide();
|
||
}
|
||
},
|
||
function (xhr) {
|
||
error(xhr);
|
||
}
|
||
);
|
||
}
|
||
|
||
// 获取左下角图例数据源
|
||
function getLegendData(id) {
|
||
const params = {
|
||
encryptedData: encryptCBC(JSON.stringify({ id })),
|
||
};
|
||
|
||
ajaxRequest(
|
||
dataUrl + "/backstage/digitalSignage/getTowerProgressNum",
|
||
"POST",
|
||
params,
|
||
true,
|
||
function () {},
|
||
function (result) {
|
||
const { data } = result;
|
||
|
||
if (data) {
|
||
Object.values(data).forEach((value, index) => {
|
||
legendData[index].value = value;
|
||
});
|
||
}
|
||
|
||
const legendBox = $(".legend-box");
|
||
let innerHtml = "";
|
||
legendData.forEach((item, index) => {
|
||
innerHtml += `
|
||
<div class="legend-item">
|
||
<img src="${item.icon}" alt="">
|
||
<span class="legend-item-name">${item.name}</span>
|
||
<span>${item.value}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
legendBox.html(innerHtml);
|
||
},
|
||
function (xhr) {
|
||
error(xhr);
|
||
}
|
||
);
|
||
}
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const scrollContent = document.getElementById("scrollContent");
|
||
const originalContent = scrollContent.querySelector(".content-wrapper");
|
||
const cloneContent = scrollContent.querySelector(".clone-content");
|
||
|
||
// 克隆原始内容到克隆容器
|
||
cloneContent.innerHTML = originalContent.innerHTML;
|
||
|
||
// 设置滚动动画
|
||
let scrollPosition = 0;
|
||
const scrollSpeed = 20; // 滚动速度(像素/秒)
|
||
let lastTimestamp = 0;
|
||
|
||
function animateScroll(timestamp) {
|
||
if (!lastTimestamp) lastTimestamp = timestamp;
|
||
const deltaTime = timestamp - lastTimestamp;
|
||
lastTimestamp = timestamp;
|
||
|
||
// 计算新的滚动位置
|
||
scrollPosition += (scrollSpeed * deltaTime) / 1000;
|
||
|
||
// 获取内容总高度
|
||
const contentHeight = originalContent.scrollHeight;
|
||
|
||
// 当滚动到克隆内容的开始时，重置位置以实现无缝衔接
|
||
if (scrollPosition >= contentHeight) {
|
||
scrollPosition = 0;
|
||
}
|
||
|
||
// 应用滚动
|
||
scrollContent.scrollTop = scrollPosition;
|
||
|
||
// 继续动画
|
||
requestAnimationFrame(animateScroll);
|
||
}
|
||
|
||
// 启动动画
|
||
requestAnimationFrame(animateScroll);
|
||
|
||
// // 鼠标悬停时暂停滚动
|
||
// scrollContent.addEventListener("mouseenter", function () {
|
||
// scrollSpeed = 0;
|
||
// });
|
||
|
||
// scrollContent.addEventListener("mouseleave", function () {
|
||
// scrollSpeed = 30; // 恢复原始速度
|
||
// });
|
||
|
||
const drawer = document.querySelector(".right-drawer-box");
|
||
const openBtn = document.querySelector(".open-drawer-box");
|
||
const closeBtn = document.querySelector(".close-drawer-btn");
|
||
const legendDrawer = document.querySelector(".legend-box");
|
||
const legendOpenBtn = document.querySelector(".legend-open-drawer-btn");
|
||
|
||
const projectOverview = document.querySelector(".project-overview-box");
|
||
const overviewOpenDrawerBtn = document.querySelector(
|
||
".project-overview-open-drawer-btn"
|
||
);
|
||
|
||
// const closeBtn = document.querySelector(".close-drawer-btn");
|
||
|
||
// 点击三角按钮打开抽屉
|
||
openBtn.addEventListener("click", function () {
|
||
drawer.classList.add("open");
|
||
|
||
layui.use(["tree", "jquery"], function () {
|
||
var tree = layui.tree;
|
||
var $ = layui.jquery;
|
||
|
||
// 初始化组织树
|
||
function initOrgTree() {
|
||
// 渲染树形结构
|
||
tree.render({
|
||
elem: "#orgTree", // 绑定元素
|
||
id: "orgTree", // 自定义索引
|
||
data: treeData, // 获取数据
|
||
showCheckbox: false, // 是否显示复选框
|
||
isJump: false, // 是否允许点击节点时弹出新窗口
|
||
accordion: true, // 是否开启手风琴模式
|
||
edit: false, // 是否开启节点的操作图标
|
||
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
|
||
click: function (obj) {
|
||
console.log(obj.data);
|
||
// 判断是否是叶子节点（没有子节点或子节点数组为空）
|
||
if (
|
||
!obj.data.children ||
|
||
obj.data.children.length === 0
|
||
) {
|
||
setActiveNode(obj.elem);
|
||
nodeId = obj.data.id;
|
||
intLng = obj.data.lon;
|
||
intLat = obj.data.lat;
|
||
projectTitle = obj.data.title;
|
||
$(".center-title-box").text(
|
||
projectTitle + "作战图"
|
||
);
|
||
$(".project-overview-content").text(
|
||
obj.data.projectOverview || "暂无"
|
||
);
|
||
// getScrollData(nodeId);
|
||
getLegendData(nodeId);
|
||
getLocationInfo(nodeId);
|
||
} else {
|
||
}
|
||
},
|
||
done: function () {
|
||
console.log("树准备完毕");
|
||
expandToNodeId(nodeId);
|
||
},
|
||
});
|
||
}
|
||
|
||
initOrgTree();
|
||
setActiveNodeNew(nodeId);
|
||
|
||
function setActiveNode(elem) {
|
||
$("#orgTree")
|
||
.find(".layui-tree-click")
|
||
.removeClass("layui-tree-click");
|
||
$(elem).addClass("layui-tree-click");
|
||
}
|
||
|
||
function setActiveNodeNew(nodeId) {
|
||
$("#orgTree")
|
||
.find('[data-id="' + nodeId + '"]')
|
||
.addClass("layui-tree-click");
|
||
}
|
||
});
|
||
});
|
||
|
||
// 点击关闭按钮关闭抽屉
|
||
closeBtn.addEventListener("click", function () {
|
||
drawer.classList.remove("open");
|
||
});
|
||
|
||
// 点击抽屉外部关闭抽屉（可选）
|
||
document.addEventListener("click", function (e) {
|
||
if (
|
||
drawer.classList.contains("open") &&
|
||
!drawer.contains(e.target) &&
|
||
e.target !== openBtn
|
||
) {
|
||
drawer.classList.remove("open");
|
||
}
|
||
});
|
||
|
||
legendOpenBtn.addEventListener("click", function () {
|
||
if (legendDrawer.style.visibility === "visible") {
|
||
legendDrawer.style.visibility = "hidden";
|
||
// 修改图例的三角
|
||
|
||
legendOpenBtn.style.transform = "rotate(180deg)";
|
||
} else {
|
||
legendDrawer.style.visibility = "visible";
|
||
// 修改图例的三角
|
||
|
||
legendOpenBtn.style.transform = "rotate(0deg)";
|
||
}
|
||
});
|
||
overviewOpenDrawerBtn.addEventListener("click", function () {
|
||
if (projectOverview.style.visibility === "visible") {
|
||
projectOverview.style.visibility = "hidden";
|
||
// 修改图例的三角
|
||
|
||
overviewOpenDrawerBtn.style.transform = "rotate(180deg)";
|
||
} else {
|
||
projectOverview.style.visibility = "visible";
|
||
// 修改图例的三角
|
||
|
||
overviewOpenDrawerBtn.style.transform = "rotate(0deg)";
|
||
}
|
||
});
|
||
|
||
// 点击全屏图标时 使地图盒子全屏
|
||
// 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);
|
||
// $(".project-overview-content").text(
|
||
// treeData[0].children[0].children[0].projectOverview ||
|
||
// "暂无"
|
||
// );
|
||
// getLegendData(nodeId);
|
||
// getLocationInfo(nodeId);
|
||
// } else {
|
||
// initMap();
|
||
// }
|
||
// }
|
||
// });
|
||
|
||
// 设置当鼠标移入工程概况时，并且判断当前是否溢出，溢出时预览框显示
|
||
const projectOverviewBox = document.querySelector(".project-overview-box");
|
||
const projectOverviewContent = document.querySelector(
|
||
".project-overview-content"
|
||
);
|
||
// const projectOverviewPreviewBox = document.querySelector(
|
||
// ".project-overview-preview-box"
|
||
// );
|
||
// projectOverviewBox.addEventListener("mouseenter", function () {
|
||
// if (
|
||
// projectOverviewContent.scrollHeight >
|
||
// projectOverviewContent.clientHeight
|
||
// ) {
|
||
// projectOverviewPreviewBox.style.display = "block";
|
||
// projectOverviewPreviewBox.innerHTML =
|
||
// projectOverviewContent.innerHTML;
|
||
// } else {
|
||
// projectOverviewPreviewBox.style.display = "none";
|
||
// projectOverviewPreviewBox.innerHTML = "";
|
||
// }
|
||
// });
|
||
// projectOverviewBox.addEventListener("mouseleave", function () {
|
||
// projectOverviewPreviewBox.style.display = "none";
|
||
// projectOverviewPreviewBox.innerHTML = "";
|
||
// });
|
||
});
|