451 lines
17 KiB
HTML
451 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|||
|
|
<title>GIS管网管理</title>
|
|||
|
|
<!-- OpenLayers CSS -->
|
|||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
|
|||
|
|
<style>
|
|||
|
|
body, html { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-family: sans-serif; }
|
|||
|
|
#map { width: 100%; height: 100%; }
|
|||
|
|
|
|||
|
|
/* UI Controls */
|
|||
|
|
.ui-panel {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 10px;
|
|||
|
|
right: 10px;
|
|||
|
|
background: rgba(255, 255, 255, 0.9);
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
|
|||
|
|
z-index: 1000;
|
|||
|
|
max-width: 200px;
|
|||
|
|
}
|
|||
|
|
.ui-group { margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
|
|||
|
|
.ui-group:last-child { border-bottom: none; }
|
|||
|
|
.ui-title { font-weight: bold; font-size: 14px; margin-bottom: 5px; }
|
|||
|
|
button {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 2px 0;
|
|||
|
|
padding: 5px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: #007bff;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
button:hover { background: #0056b3; }
|
|||
|
|
button.active { background: #004494; border: 2px solid #002a5c; }
|
|||
|
|
select { width: 100%; padding: 5px; margin-bottom: 5px; }
|
|||
|
|
|
|||
|
|
/* Popup */
|
|||
|
|
.ol-popup {
|
|||
|
|
position: absolute;
|
|||
|
|
background-color: white;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border: 1px solid #cccccc;
|
|||
|
|
bottom: 12px;
|
|||
|
|
left: -50px;
|
|||
|
|
min-width: 200px;
|
|||
|
|
}
|
|||
|
|
.ol-popup:after, .ol-popup:before {
|
|||
|
|
top: 100%;
|
|||
|
|
border: solid transparent;
|
|||
|
|
content: " ";
|
|||
|
|
height: 0;
|
|||
|
|
width: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.ol-popup:after {
|
|||
|
|
border-top-color: white;
|
|||
|
|
border-width: 10px;
|
|||
|
|
left: 48px;
|
|||
|
|
margin-left: -10px;
|
|||
|
|
}
|
|||
|
|
.ol-popup:before {
|
|||
|
|
border-top-color: #cccccc;
|
|||
|
|
border-width: 11px;
|
|||
|
|
left: 48px;
|
|||
|
|
margin-left: -11px;
|
|||
|
|
}
|
|||
|
|
.ol-popup-closer {
|
|||
|
|
text-decoration: none;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 2px;
|
|||
|
|
right: 8px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
.ol-popup-closer:after { content: "✖"; }
|
|||
|
|
|
|||
|
|
/* Legend */
|
|||
|
|
.legend {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20px;
|
|||
|
|
left: 10px;
|
|||
|
|
background: rgba(255,255,255,0.8);
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
z-index: 1000;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.legend-item { display: flex; align-items: center; margin-bottom: 5px; }
|
|||
|
|
.color-box { width: 20px; height: 5px; margin-right: 5px; }
|
|||
|
|
.point-circle { width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="map"></div>
|
|||
|
|
|
|||
|
|
<!-- Popup Overlay -->
|
|||
|
|
<div id="popup" class="ol-popup">
|
|||
|
|
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
|||
|
|
<div id="popup-content"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- UI Panel -->
|
|||
|
|
<div class="ui-panel">
|
|||
|
|
<div class="ui-group">
|
|||
|
|
<div class="ui-title">底图切换</div>
|
|||
|
|
<select id="baseLayerSelect" onchange="switchBaseLayer(this.value)">
|
|||
|
|
<option value="OSM">OpenStreetMap</option>
|
|||
|
|
<option value="GAODE">高德地图</option>
|
|||
|
|
<option value="TIANDITU">天地图 (矢量)</option>
|
|||
|
|
<option value="TIANDITU_IMG">天地图 (影像)</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui-group">
|
|||
|
|
<div class="ui-title">工具箱</div>
|
|||
|
|
<button onclick="toggleMeasure('LineString')">测距</button>
|
|||
|
|
<button onclick="toggleMeasure('Polygon')">测面</button>
|
|||
|
|
<button onclick="clearMeasure()">清除测量</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui-group">
|
|||
|
|
<div class="ui-title">管网维护</div>
|
|||
|
|
<button id="btn-add-pipe" onclick="startEdit('Pipe')">新增管线</button>
|
|||
|
|
<button id="btn-add-station" onclick="startEdit('Station')">新增泵站</button>
|
|||
|
|
<button onclick="stopEdit()">结束编辑</button>
|
|||
|
|
<button onclick="deleteSelected()">删除选中</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui-group">
|
|||
|
|
<div class="ui-title">数据管理</div>
|
|||
|
|
<button onclick="importCAD()">导入CAD (模拟)</button>
|
|||
|
|
<button onclick="exportData()">导出数据</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="legend">
|
|||
|
|
<div class="ui-title">图例</div>
|
|||
|
|
<div class="legend-item"><div class="color-box" style="background:blue;"></div>供水管线</div>
|
|||
|
|
<div class="legend-item"><div class="color-box" style="background:red;"></div>污水管线</div>
|
|||
|
|
<div class="legend-item"><div class="point-circle" style="background:green;"></div>正常泵站</div>
|
|||
|
|
<div class="legend-item"><div class="point-circle" style="background:gray;"></div>离线泵站</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- OpenLayers JS -->
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
|
|||
|
|
<script>
|
|||
|
|
// --- Configuration ---
|
|||
|
|
// Note: In a real app, API keys should be secure or proxy-based.
|
|||
|
|
const TIANDITU_KEY = 'YOUR_TIANDITU_KEY_HERE'; // Replace with valid key
|
|||
|
|
|
|||
|
|
// --- Map Initialization ---
|
|||
|
|
const map = new ol.Map({
|
|||
|
|
target: 'map',
|
|||
|
|
view: new ol.View({
|
|||
|
|
center: ol.proj.fromLonLat([121.47, 31.23]), // Shanghai
|
|||
|
|
zoom: 12
|
|||
|
|
}),
|
|||
|
|
controls: ol.control.defaults.defaults().extend([
|
|||
|
|
new ol.control.ScaleLine(),
|
|||
|
|
new ol.control.FullScreen()
|
|||
|
|
])
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// --- Base Layers ---
|
|||
|
|
const baseLayers = {
|
|||
|
|
'OSM': new ol.layer.Tile({
|
|||
|
|
source: new ol.source.OSM(),
|
|||
|
|
visible: true
|
|||
|
|
}),
|
|||
|
|
'GAODE': new ol.layer.Tile({
|
|||
|
|
source: new ol.source.XYZ({
|
|||
|
|
url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
|
|||
|
|
}),
|
|||
|
|
visible: false
|
|||
|
|
}),
|
|||
|
|
'TIANDITU': new ol.layer.Tile({
|
|||
|
|
source: new ol.source.XYZ({
|
|||
|
|
url: `http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TIANDITU_KEY}`
|
|||
|
|
}),
|
|||
|
|
visible: false
|
|||
|
|
}),
|
|||
|
|
'TIANDITU_IMG': new ol.layer.Tile({
|
|||
|
|
source: new ol.source.XYZ({
|
|||
|
|
url: `http://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TIANDITU_KEY}`
|
|||
|
|
}),
|
|||
|
|
visible: false
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
for (let key in baseLayers) {
|
|||
|
|
map.addLayer(baseLayers[key]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function switchBaseLayer(type) {
|
|||
|
|
for (let key in baseLayers) {
|
|||
|
|
baseLayers[key].setVisible(key === type);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Business Layers (Pipe & Station) ---
|
|||
|
|
const vectorSource = new ol.source.Vector();
|
|||
|
|
const vectorLayer = new ol.layer.Vector({
|
|||
|
|
source: vectorSource,
|
|||
|
|
style: function(feature) {
|
|||
|
|
const type = feature.get('type');
|
|||
|
|
const status = feature.get('status');
|
|||
|
|
|
|||
|
|
if (type === 'Pipe') {
|
|||
|
|
return new ol.style.Style({
|
|||
|
|
stroke: new ol.style.Stroke({
|
|||
|
|
color: feature.get('pipeType') === 'Sewage' ? 'red' : 'blue',
|
|||
|
|
width: 3
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
} else if (type === 'Station') {
|
|||
|
|
return new ol.style.Style({
|
|||
|
|
image: new ol.style.Circle({
|
|||
|
|
radius: 7,
|
|||
|
|
fill: new ol.style.Fill({ color: status === 'Online' ? 'green' : 'gray' }),
|
|||
|
|
stroke: new ol.style.Stroke({ color: 'white', width: 2 })
|
|||
|
|
}),
|
|||
|
|
text: new ol.style.Text({
|
|||
|
|
text: feature.get('name'),
|
|||
|
|
offsetY: -15,
|
|||
|
|
fill: new ol.style.Fill({ color: '#000' }),
|
|||
|
|
stroke: new ol.style.Stroke({ color: '#fff', width: 2 })
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
map.addLayer(vectorLayer);
|
|||
|
|
|
|||
|
|
// --- Mock Data ---
|
|||
|
|
function loadMockData() {
|
|||
|
|
// Pipe
|
|||
|
|
const pipe = new ol.Feature({
|
|||
|
|
geometry: new ol.geom.LineString([
|
|||
|
|
ol.proj.fromLonLat([121.46, 31.23]),
|
|||
|
|
ol.proj.fromLonLat([121.48, 31.23])
|
|||
|
|
]),
|
|||
|
|
type: 'Pipe',
|
|||
|
|
pipeType: 'Water',
|
|||
|
|
id: 'P001'
|
|||
|
|
});
|
|||
|
|
// Station
|
|||
|
|
const station = new ol.Feature({
|
|||
|
|
geometry: new ol.geom.Point(ol.proj.fromLonLat([121.47, 31.235])),
|
|||
|
|
type: 'Station',
|
|||
|
|
name: '1号泵站',
|
|||
|
|
status: 'Online',
|
|||
|
|
flow: '500m³/h',
|
|||
|
|
level: '3.5m'
|
|||
|
|
});
|
|||
|
|
vectorSource.addFeatures([pipe, station]);
|
|||
|
|
}
|
|||
|
|
loadMockData();
|
|||
|
|
|
|||
|
|
// --- Interaction: Popup ---
|
|||
|
|
const container = document.getElementById('popup');
|
|||
|
|
const content = document.getElementById('popup-content');
|
|||
|
|
const closer = document.getElementById('popup-closer');
|
|||
|
|
|
|||
|
|
const overlay = new ol.Overlay({
|
|||
|
|
element: container,
|
|||
|
|
autoPan: true,
|
|||
|
|
autoPanAnimation: { duration: 250 }
|
|||
|
|
});
|
|||
|
|
map.addOverlay(overlay);
|
|||
|
|
|
|||
|
|
closer.onclick = function() {
|
|||
|
|
overlay.setPosition(undefined);
|
|||
|
|
closer.blur();
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
map.on('singleclick', function(evt) {
|
|||
|
|
if (drawInteraction) return; // Don't popup when drawing
|
|||
|
|
|
|||
|
|
const feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
|
|||
|
|
return feature;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (feature) {
|
|||
|
|
const coordinate = evt.coordinate;
|
|||
|
|
const type = feature.get('type');
|
|||
|
|
let html = '';
|
|||
|
|
if (type === 'Station') {
|
|||
|
|
html = `<b>${feature.get('name')}</b><br>
|
|||
|
|
状态: ${feature.get('status')}<br>
|
|||
|
|
流量: ${feature.get('flow')}<br>
|
|||
|
|
液位: ${feature.get('level')}`;
|
|||
|
|
} else if (type === 'Pipe') {
|
|||
|
|
html = `<b>管线 ID: ${feature.get('id')}</b><br>
|
|||
|
|
类型: ${feature.get('pipeType') === 'Sewage' ? '污水' : '供水'}`;
|
|||
|
|
}
|
|||
|
|
content.innerHTML = html;
|
|||
|
|
overlay.setPosition(coordinate);
|
|||
|
|
} else {
|
|||
|
|
overlay.setPosition(undefined);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// --- Interaction: Draw & Modify ---
|
|||
|
|
let drawInteraction;
|
|||
|
|
const modifyInteraction = new ol.interaction.Modify({ source: vectorSource });
|
|||
|
|
const selectInteraction = new ol.interaction.Select();
|
|||
|
|
|
|||
|
|
map.addInteraction(modifyInteraction);
|
|||
|
|
map.addInteraction(selectInteraction);
|
|||
|
|
|
|||
|
|
function startEdit(type) {
|
|||
|
|
stopEdit(); // Clear previous
|
|||
|
|
|
|||
|
|
let geometryType = type === 'Station' ? 'Point' : 'LineString';
|
|||
|
|
drawInteraction = new ol.interaction.Draw({
|
|||
|
|
source: vectorSource,
|
|||
|
|
type: geometryType
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
drawInteraction.on('drawend', function(evt) {
|
|||
|
|
const feature = evt.feature;
|
|||
|
|
feature.set('type', type);
|
|||
|
|
if (type === 'Station') {
|
|||
|
|
feature.set('name', '新泵站');
|
|||
|
|
feature.set('status', 'Online');
|
|||
|
|
} else {
|
|||
|
|
feature.set('pipeType', 'Water');
|
|||
|
|
feature.set('id', 'New-' + Date.now());
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
map.addInteraction(drawInteraction);
|
|||
|
|
|
|||
|
|
// UI feedback
|
|||
|
|
document.querySelectorAll('button').forEach(b => b.classList.remove('active'));
|
|||
|
|
if(type === 'Pipe') document.getElementById('btn-add-pipe').classList.add('active');
|
|||
|
|
if(type === 'Station') document.getElementById('btn-add-station').classList.add('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function stopEdit() {
|
|||
|
|
if (drawInteraction) {
|
|||
|
|
map.removeInteraction(drawInteraction);
|
|||
|
|
drawInteraction = null;
|
|||
|
|
}
|
|||
|
|
document.querySelectorAll('button').forEach(b => b.classList.remove('active'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function deleteSelected() {
|
|||
|
|
const selectedFeatures = selectInteraction.getFeatures();
|
|||
|
|
selectedFeatures.forEach(function(feature) {
|
|||
|
|
vectorSource.removeFeature(feature);
|
|||
|
|
});
|
|||
|
|
selectedFeatures.clear();
|
|||
|
|
overlay.setPosition(undefined);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Tools: Measure ---
|
|||
|
|
let measureDraw;
|
|||
|
|
function toggleMeasure(type) {
|
|||
|
|
stopEdit();
|
|||
|
|
if (measureDraw) map.removeInteraction(measureDraw);
|
|||
|
|
|
|||
|
|
measureDraw = new ol.interaction.Draw({
|
|||
|
|
source: new ol.source.Vector(),
|
|||
|
|
type: type
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
measureDraw.on('drawstart', function(evt) {
|
|||
|
|
// Simplified measurement logic for demo
|
|||
|
|
// In real app, create tooltips and calculate length/area using ol.sphere
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
measureDraw.on('drawend', function(evt) {
|
|||
|
|
const geom = evt.feature.getGeometry();
|
|||
|
|
let output;
|
|||
|
|
if (geom instanceof ol.geom.Polygon) {
|
|||
|
|
output = '面积: ' + (geom.getArea() / 1000000).toFixed(2) + ' km²';
|
|||
|
|
} else if (geom instanceof ol.geom.LineString) {
|
|||
|
|
output = '距离: ' + (geom.getLength() / 1000).toFixed(2) + ' km';
|
|||
|
|
}
|
|||
|
|
alert(output);
|
|||
|
|
map.removeInteraction(measureDraw); // Stop after one measure
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
map.addInteraction(measureDraw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clearMeasure() {
|
|||
|
|
// Logic to clear measurement overlays would go here
|
|||
|
|
if (measureDraw) map.removeInteraction(measureDraw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Data Import/Export ---
|
|||
|
|
function importCAD() {
|
|||
|
|
// Mock implementation
|
|||
|
|
// In reality, this would trigger a file input, upload to server,
|
|||
|
|
// server converts DWG -> GeoJSON, returns GeoJSON, then:
|
|||
|
|
// const format = new ol.format.GeoJSON();
|
|||
|
|
// const features = format.readFeatures(jsonData);
|
|||
|
|
// vectorSource.addFeatures(features);
|
|||
|
|
alert("模拟导入CAD图纸成功！已转换为GeoJSON并加载。");
|
|||
|
|
|
|||
|
|
// Add a mock feature representing CAD import
|
|||
|
|
const cadFeature = new ol.Feature({
|
|||
|
|
geometry: new ol.geom.LineString([
|
|||
|
|
ol.proj.fromLonLat([121.465, 31.225]),
|
|||
|
|
ol.proj.fromLonLat([121.475, 31.225])
|
|||
|
|
]),
|
|||
|
|
type: 'Pipe',
|
|||
|
|
pipeType: 'Sewage',
|
|||
|
|
id: 'CAD-001'
|
|||
|
|
});
|
|||
|
|
vectorSource.addFeature(cadFeature);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function exportData() {
|
|||
|
|
const format = new ol.format.GeoJSON();
|
|||
|
|
const features = vectorSource.getFeatures();
|
|||
|
|
const json = format.writeFeatures(features);
|
|||
|
|
console.log(json);
|
|||
|
|
alert("数据已导出 (查看控制台)");
|
|||
|
|
// Can implement file download here
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Android Interface ---
|
|||
|
|
// If loaded in Android WebView, this allows Android to call JS
|
|||
|
|
window.locateDevice = function(lat, lon) {
|
|||
|
|
const coords = ol.proj.fromLonLat([lon, lat]);
|
|||
|
|
map.getView().animate({ center: coords, zoom: 15 });
|
|||
|
|
|
|||
|
|
// Add marker for user location
|
|||
|
|
const userFeature = new ol.Feature({
|
|||
|
|
geometry: new ol.geom.Point(coords),
|
|||
|
|
type: 'Station', // Reuse station style or define new
|
|||
|
|
name: '当前位置',
|
|||
|
|
status: 'Online'
|
|||
|
|
});
|
|||
|
|
vectorSource.addFeature(userFeature);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|