排污户大屏
This commit is contained in:
Rue Ji
@ -304,13 +304,13 @@ pageEncoding="UTF-8"%>
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- 全屏提示遮罩 -->
|
<!-- 全屏提示遮罩 -->
|
||||||
<div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
<!-- <div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">
|
||||||
<div class="tip-content">
|
<div class="tip-content">
|
||||||
<div class="icon">🖥️</div>
|
<div class="icon">🖥️</div>
|
||||||
<h2>点击进入全屏展示</h2>
|
<h2>点击进入全屏展示</h2>
|
||||||
<p>按 ESC 键可退出全屏</p>
|
<p>按 ESC 键可退出全屏</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="screen-container">
|
<div class="screen-container">
|
||||||
<div class="rank-module-container">
|
<div class="rank-module-container">
|
||||||
<!-- Statistics -->
|
<!-- Statistics -->
|
||||||
@ -382,7 +382,7 @@ pageEncoding="UTF-8"%>
|
|||||||
<div id="chartInstant" class="chart-content"></div>
|
<div id="chartInstant" class="chart-content"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-chart-box">
|
<div class="detail-chart-box">
|
||||||
<div class="chart-subtitle">累计流量历史曲线 (日差值 - 近14天)</div>
|
<div class="chart-subtitle">累计流量历史曲线 (近14天)</div>
|
||||||
<div id="chartCumulative" class="chart-content"></div>
|
<div id="chartCumulative" class="chart-content"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -476,7 +476,6 @@ pageEncoding="UTF-8"%>
|
|||||||
type: "POST",
|
type: "POST",
|
||||||
data: params || {},
|
data: params || {},
|
||||||
success: function (data) {
|
success: function (data) {
|
||||||
console.log("API Response:", url, data);
|
|
||||||
resolve(data);
|
resolve(data);
|
||||||
},
|
},
|
||||||
error: function (xhr, status, error) {
|
error: function (xhr, status, error) {
|
||||||
@ -489,7 +488,6 @@ pageEncoding="UTF-8"%>
|
|||||||
|
|
||||||
// 加载企业数据（排污源）
|
// 加载企业数据（排污源）
|
||||||
function loadEnterpriseData() {
|
function loadEnterpriseData() {
|
||||||
console.log("=== loadEnterpriseData 函数开始执行 ===");
|
|
||||||
return apiRequest("/sparepart/sewage/getList.do", {
|
return apiRequest("/sparepart/sewage/getList.do", {
|
||||||
page: 1,
|
page: 1,
|
||||||
rows: 10,
|
rows: 10,
|
||||||
@ -498,8 +496,6 @@ pageEncoding="UTF-8"%>
|
|||||||
unitId: '0533JS',
|
unitId: '0533JS',
|
||||||
})
|
})
|
||||||
.then(function (data) {
|
.then(function (data) {
|
||||||
console.log("=== loadEnterpriseData 接口返回数据:", data);
|
|
||||||
|
|
||||||
var dataList = data;
|
var dataList = data;
|
||||||
if (typeof data === "string") {
|
if (typeof data === "string") {
|
||||||
try {
|
try {
|
||||||
@ -578,6 +574,8 @@ pageEncoding="UTF-8"%>
|
|||||||
areaName: item.company ? item.company.name || "" : "",
|
areaName: item.company ? item.company.name || "" : "",
|
||||||
processSectionName: item.processSection ? item.processSection.name || "" : "",
|
processSectionName: item.processSection ? item.processSection.name || "" : "",
|
||||||
permitNum: item.permitNum || "",
|
permitNum: item.permitNum || "",
|
||||||
|
// ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||||
|
ventNum: 'DEV067' || "", // 排放编号，用于流量接口
|
||||||
trade: item.trade || "",
|
trade: item.trade || "",
|
||||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||||
indicator: dischargeValue > 8000 ? "超级" : "普通",
|
indicator: dischargeValue > 8000 ? "超级" : "普通",
|
||||||
@ -586,8 +584,8 @@ pageEncoding="UTF-8"%>
|
|||||||
y: Math.random() * 80 + 10,
|
y: Math.random() * 80 + 10,
|
||||||
lng: lng,
|
lng: lng,
|
||||||
lat: lat,
|
lat: lat,
|
||||||
instantHistory: generateHistoryData(72),
|
instantHistory: [], // 瞬时流量历史数据，后续通过接口获取
|
||||||
cumulativeHistory: generateHistoryData(14),
|
cumulativeHistory: [], // 累计流量历史数据，后续通过接口获取
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -606,6 +604,106 @@ pageEncoding="UTF-8"%>
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 格式化日期时间 yyyy-MM-dd HH:mm
|
||||||
|
function formatDateTime(date) {
|
||||||
|
var year = date.getFullYear();
|
||||||
|
var month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
var day = String(date.getDate()).padStart(2, '0');
|
||||||
|
var hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
var minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载流量数据
|
||||||
|
// type: 'instant' 瞬时流量(近3天), 'cumulative' 累计流量(近14天)
|
||||||
|
function loadFlowData(ventNum, type) {
|
||||||
|
if (!ventNum) {
|
||||||
|
console.warn("[loadFlowData] ventNum 为空，无法加载流量数据");
|
||||||
|
return Promise.resolve([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
var mpcode, days;
|
||||||
|
if (type === 'instant') {
|
||||||
|
mpcode = ventNum + '_LJLL'; // 瞬时流量
|
||||||
|
days = 3;
|
||||||
|
} else {
|
||||||
|
mpcode = ventNum + '_LJLL'; // 累计流量
|
||||||
|
days = 14;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算日期范围
|
||||||
|
var now = new Date();
|
||||||
|
var edt = formatDateTime(now);
|
||||||
|
var startDate = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
|
||||||
|
var sdt = formatDateTime(startDate);
|
||||||
|
|
||||||
|
console.log("[loadFlowData] mpcode:", mpcode, "sdt:", sdt, "edt:", edt, "type:", type);
|
||||||
|
|
||||||
|
return apiRequest("/data/getDetailData.do", {
|
||||||
|
mpcode: mpcode,
|
||||||
|
sdt: sdt,
|
||||||
|
edt: edt
|
||||||
|
})
|
||||||
|
.then(function (data) {
|
||||||
|
console.log("[loadFlowData] 接口返回数据:", mpcode, data);
|
||||||
|
|
||||||
|
var dataList = data;
|
||||||
|
if (typeof data === 'string') {
|
||||||
|
try {
|
||||||
|
dataList = JSON.parse(data);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("[loadFlowData] 解析数据失败:", e);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取数值数组
|
||||||
|
var values = [];
|
||||||
|
if (Array.isArray(dataList)) {
|
||||||
|
dataList.forEach(function (item) {
|
||||||
|
// 假设返回数据格式为 [{time: xxx, value: xxx}, ...]
|
||||||
|
// 或者 [value1, value2, ...]
|
||||||
|
if (item.value !== undefined) {
|
||||||
|
values.push(parseFloat(item.value) || 0);
|
||||||
|
} else if (typeof item === 'number') {
|
||||||
|
values.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("[loadFlowData] 解析后数据条数:", values.length);
|
||||||
|
return values;
|
||||||
|
})
|
||||||
|
.catch(function (err) {
|
||||||
|
console.error("[loadFlowData] 请求失败:", mpcode, err);
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 并行加载企业的瞬时和累计流量数据
|
||||||
|
function loadEnterpriseFlowData(enterprise) {
|
||||||
|
console.log("[loadEnterpriseFlowData] 加载企业流量数据:", enterprise.name, "ventNum:", enterprise.ventNum);
|
||||||
|
|
||||||
|
if (!enterprise.ventNum) {
|
||||||
|
console.warn("[loadEnterpriseFlowData] 企业 ventNum 为空，使用模拟数据");
|
||||||
|
enterprise.instantHistory = generateHistoryData(72); // 近3天小时数据
|
||||||
|
enterprise.cumulativeHistory = generateHistoryData(14); // 近14天数据
|
||||||
|
return Promise.resolve(enterprise);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.all([
|
||||||
|
loadFlowData(enterprise.ventNum, 'instant'),
|
||||||
|
loadFlowData(enterprise.ventNum, 'cumulative')
|
||||||
|
])
|
||||||
|
.then(function (results) {
|
||||||
|
enterprise.instantHistory = results[0].length > 0 ? results[0] : generateHistoryData(72); // 近3天小时数据
|
||||||
|
enterprise.cumulativeHistory = results[1].length > 0 ? results[1] : generateHistoryData(14); // 近14天数据
|
||||||
|
console.log("[loadEnterpriseFlowData] 流量数据加载完成:", enterprise.name,
|
||||||
|
"瞬时:", enterprise.instantHistory.length, "累计:", enterprise.cumulativeHistory.length);
|
||||||
|
return enterprise;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function initData() {
|
function initData() {
|
||||||
// Init Charts first
|
// Init Charts first
|
||||||
myChartInstant = echarts.init(document.getElementById("chartInstant"));
|
myChartInstant = echarts.init(document.getElementById("chartInstant"));
|
||||||
@ -632,7 +730,7 @@ pageEncoding="UTF-8"%>
|
|||||||
allEnterprises = enterprises;
|
allEnterprises = enterprises;
|
||||||
|
|
||||||
// 渲染地图点位
|
// 渲染地图点位
|
||||||
renderMapPoints();
|
// renderMapPoints();
|
||||||
|
|
||||||
// Start Loops - 每10秒刷新排行数据
|
// Start Loops - 每10秒刷新排行数据
|
||||||
startDataSimulation();
|
startDataSimulation();
|
||||||
@ -1067,11 +1165,12 @@ pageEncoding="UTF-8"%>
|
|||||||
id: item.id,
|
id: item.id,
|
||||||
name: item.name || "企业-" + (idx + 1),
|
name: item.name || "企业-" + (idx + 1),
|
||||||
value: dischargeValue,
|
value: dischargeValue,
|
||||||
|
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||||
sewageType: item.trade || "-",
|
sewageType: item.trade || "-",
|
||||||
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
||||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||||
instantHistory: generateHistoryData(72),
|
instantHistory: [],
|
||||||
cumulativeHistory: generateHistoryData(14),
|
cumulativeHistory: [],
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -1082,11 +1181,12 @@ pageEncoding="UTF-8"%>
|
|||||||
id: item.id,
|
id: item.id,
|
||||||
name: item.name || "企业-" + (idx + 1),
|
name: item.name || "企业-" + (idx + 1),
|
||||||
value: dischargeValue,
|
value: dischargeValue,
|
||||||
|
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||||
sewageType: item.trade || "-",
|
sewageType: item.trade || "-",
|
||||||
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
||||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||||
instantHistory: generateHistoryData(72),
|
instantHistory: [],
|
||||||
cumulativeHistory: generateHistoryData(14),
|
cumulativeHistory: [],
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -1113,7 +1213,7 @@ pageEncoding="UTF-8"%>
|
|||||||
setInterval(function () {
|
setInterval(function () {
|
||||||
console.log("[定时刷新] 开始刷新排行数据...");
|
console.log("[定时刷新] 开始刷新排行数据...");
|
||||||
loadRankingData();
|
loadRankingData();
|
||||||
}, 10000);
|
}, 100000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function startRotation() {
|
function startRotation() {
|
||||||
@ -1152,16 +1252,38 @@ pageEncoding="UTF-8"%>
|
|||||||
$("#dischargeVolume").text(enterprise.displacement || (enterprise.value + " 吨/天"));
|
$("#dischargeVolume").text(enterprise.displacement || (enterprise.value + " 吨/天"));
|
||||||
$("#connectionStatus").text(enterprise.connectionStatus || "-");
|
$("#connectionStatus").text(enterprise.connectionStatus || "-");
|
||||||
|
|
||||||
renderDetailCharts(enterprise);
|
// 加载流量数据并渲染图表
|
||||||
|
loadEnterpriseFlowData(enterprise).then(function (ent) {
|
||||||
|
renderDetailCharts(ent);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderDetailCharts(enterprise) {
|
function renderDetailCharts(enterprise) {
|
||||||
// Generate X labels
|
console.log("[renderDetailCharts] 渲染图表, 瞬时数据:", enterprise.instantHistory?.length, "累计数据:", enterprise.cumulativeHistory?.length);
|
||||||
var hours = [];
|
|
||||||
for (var i = 0; i < 72; i++) hours.push(i + "h");
|
|
||||||
|
|
||||||
|
// 根据实际数据长度动态生成 X 轴标签
|
||||||
|
var instantData = enterprise.instantHistory || [];
|
||||||
|
var cumulativeData = enterprise.cumulativeHistory || [];
|
||||||
|
|
||||||
|
// 瞬时流量 X 轴标签（按小时）
|
||||||
|
var hours = [];
|
||||||
|
for (var i = 0; i < instantData.length; i++) {
|
||||||
|
hours.push(i + "h");
|
||||||
|
}
|
||||||
|
// 如果没有数据，默认显示 3 天（近3天小时数据）
|
||||||
|
if (hours.length === 0) {
|
||||||
|
for (var i = 0; i < 72; i++) hours.push(i + "h");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 累计流量 X 轴标签（按天）
|
||||||
var days = [];
|
var days = [];
|
||||||
for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
|
for (var j = 0; j < cumulativeData.length; j++) {
|
||||||
|
days.push("D" + (j + 1));
|
||||||
|
}
|
||||||
|
// 如果没有数据，默认显示 14 天
|
||||||
|
if (days.length === 0) {
|
||||||
|
for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
|
||||||
|
}
|
||||||
|
|
||||||
// Instant Chart (Line)
|
// Instant Chart (Line)
|
||||||
var optionInstant = {
|
var optionInstant = {
|
||||||
@ -1201,7 +1323,7 @@ pageEncoding="UTF-8"%>
|
|||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: enterprise.instantHistory,
|
data: instantData.length > 0 ? instantData : generateHistoryData(72),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@ -1234,7 +1356,7 @@ pageEncoding="UTF-8"%>
|
|||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
|
normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
|
||||||
},
|
},
|
||||||
data: enterprise.cumulativeHistory,
|
data: cumulativeData.length > 0 ? cumulativeData : generateHistoryData(14),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
186
src/main/webapp/jsp/z_bigScreen/geo.html
Normal file
186
src/main/webapp/jsp/z_bigScreen/geo.html
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>天地图-金山卫雨污水管可视化（GeoJSON版）</title>
|
||||||
|
<!-- 引入天地图4.0 API（替换成你的Key） -->
|
||||||
|
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=f423193014cde7bf44b224c6ab2b1210"></script>
|
||||||
|
<style>
|
||||||
|
/* 地图容器 */
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 800px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/* 图例样式 */
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.legend-title {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
.legend-color {
|
||||||
|
display: inline-block;
|
||||||
|
width: 15px;
|
||||||
|
height: 4px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<!-- 图例 -->
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-title">雨污水管图例</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-color" style="background: #8B4513; width: 6px;"></span>DN300 污水管
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-color" style="background: #8B4513; width: 8px;"></span>DN500 污水管
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-color" style="background: #1E90FF; width: 5px;"></span>DN200 雨水管
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<span class="legend-color" style="background: #1E90FF; width: 7px;"></span>DN400 雨水管
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ===================== 基础配置 =====================
|
||||||
|
// 天地图中心点（金山卫区域）
|
||||||
|
const MAP_CENTER = [121.357888, 30.813165];
|
||||||
|
// 地图缩放级别（16为厂区级，可调整）
|
||||||
|
const MAP_ZOOM = 16;
|
||||||
|
// GeoJSON文件路径（本地/服务器路径，重点！）
|
||||||
|
const GEOJSON_PATH = "pipeline_data.geojson"; // 替换为你的GeoJSON文件路径
|
||||||
|
|
||||||
|
// ===================== 初始化地图 =====================
|
||||||
|
// 创建地图实例
|
||||||
|
var map = new T.Map('map');
|
||||||
|
// 设置中心点和缩放级别
|
||||||
|
map.centerAndZoom(new T.LngLat(MAP_CENTER[0], MAP_CENTER[1]), MAP_ZOOM);
|
||||||
|
// 开启鼠标滚轮缩放
|
||||||
|
map.enableScrollWheelZoom(true);
|
||||||
|
// 添加天地图底图（矢量+注记）
|
||||||
|
var vecLayer = new T.TileLayer("vec_w", {minZoom: 1, maxZoom: 18});
|
||||||
|
var cvaLayer = new T.TileLayer("cva_w", {minZoom: 1, maxZoom: 18});
|
||||||
|
map.addLayer(vecLayer);
|
||||||
|
map.addLayer(cvaLayer);
|
||||||
|
|
||||||
|
// ===================== 加载GeoJSON并渲染 =====================
|
||||||
|
// 加载本地GeoJSON文件
|
||||||
|
fetch(GEOJSON_PATH)
|
||||||
|
.then(response => {
|
||||||
|
// 检查文件加载是否成功
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`GeoJSON文件加载失败：${response.status} ${response.statusText}`);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(geoJsonData => {
|
||||||
|
console.log("✅ GeoJSON数据加载成功", geoJsonData);
|
||||||
|
|
||||||
|
// 创建GeoJSON图层
|
||||||
|
var geoJsonLayer = new T.GeoJSONLayer(geoJsonData, {
|
||||||
|
// 自定义管道样式
|
||||||
|
style: function(feature) {
|
||||||
|
// 获取管道属性（根据你的GeoJSON字段调整）
|
||||||
|
var layerName = (feature.properties.LAYER || feature.properties.layer || "").toLowerCase();
|
||||||
|
var pipeSize = feature.properties.SIZE || feature.properties.pipe_size || "DN300";
|
||||||
|
|
||||||
|
// 按类型设置颜色：污水管-棕色，雨水管-蓝色
|
||||||
|
var color = "#8B4513"; // 默认污水管颜色
|
||||||
|
if (layerName.includes("雨水") || layerName.includes("rain")) {
|
||||||
|
color = "#1E90FF"; // 雨水管颜色
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按管径设置线宽
|
||||||
|
var weight = 6; // 默认DN300线宽
|
||||||
|
switch (pipeSize) {
|
||||||
|
case "DN200": weight = 5; break;
|
||||||
|
case "DN400": weight = 7; break;
|
||||||
|
case "DN500": weight = 8; break;
|
||||||
|
default: weight = 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
color: color, // 管道颜色
|
||||||
|
weight: weight, // 线宽（对应管径）
|
||||||
|
opacity: 0.8, // 透明度
|
||||||
|
lineJoin: "round" // 折线拐角圆角
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将GeoJSON图层添加到地图
|
||||||
|
map.addOverLay(geoJsonLayer);
|
||||||
|
|
||||||
|
// ===================== 交互功能 =====================
|
||||||
|
// 1. 点击管道显示详情弹窗
|
||||||
|
geoJsonLayer.addEventListener("click", function(e) {
|
||||||
|
// 获取管道属性
|
||||||
|
var props = e.feature.properties;
|
||||||
|
var layerName = props.LAYER || props.layer || "未知图层";
|
||||||
|
var pipeSize = props.SIZE || props.pipe_size || "未知管径";
|
||||||
|
var pipeId = props.pipe_id || props.id || "未知ID";
|
||||||
|
var coord = `${e.lnglat.getLng().toFixed(6)}, ${e.lnglat.getLat().toFixed(6)}`;
|
||||||
|
|
||||||
|
// 创建弹窗
|
||||||
|
var infoWindow = new T.InfoWindow();
|
||||||
|
infoWindow.setContent(`
|
||||||
|
<div style="padding: 10px; min-width: 200px; font-size: 14px;">
|
||||||
|
<strong style="font-size: 15px;">管道详情</strong><hr style="margin: 5px 0; border: 0; border-top: 1px solid #eee;">
|
||||||
|
<div>管道ID：${pipeId}</div>
|
||||||
|
<div>图层名称：${layerName}</div>
|
||||||
|
<div>管径规格：${pipeSize}</div>
|
||||||
|
<div>坐标：${coord}</div>
|
||||||
|
<div>类型：${layerName.toLowerCase().includes("雨水") ? "雨水管" : "污水管"}</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
// 打开弹窗
|
||||||
|
infoWindow.openOnMap(e.lnglat);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. 鼠标悬浮管道高亮
|
||||||
|
geoJsonLayer.addEventListener("mouseover", function(e) {
|
||||||
|
// 保存原始样式
|
||||||
|
e.target.originalStyle = e.target.getStyle();
|
||||||
|
// 设置高亮样式
|
||||||
|
e.target.setStyle({
|
||||||
|
opacity: 1,
|
||||||
|
weight: e.target.originalStyle.weight + 1
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 鼠标离开恢复原始样式
|
||||||
|
geoJsonLayer.addEventListener("mouseout", function(e) {
|
||||||
|
if (e.target.originalStyle) {
|
||||||
|
e.target.setStyle(e.target.originalStyle);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("✅ 管道图层渲染完成");
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("❌ GeoJSON加载/渲染失败：", error);
|
||||||
|
alert(`加载失败：${error.message}\n请检查GeoJSON文件路径是否正确！`);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2147
src/main/webapp/jsp/z_bigScreen/pipeline_data.geojson
Normal file
2147
src/main/webapp/jsp/z_bigScreen/pipeline_data.geojson
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user