diff --git a/sec-beidou/src/main/resources/templates/page/device_overview.html b/sec-beidou/src/main/resources/templates/page/device_overview.html index 2035f6d0..35c0cf38 100644 --- a/sec-beidou/src/main/resources/templates/page/device_overview.html +++ b/sec-beidou/src/main/resources/templates/page/device_overview.html @@ -519,6 +519,23 @@ input:checked + .switch-slider:before { transform: translateX(18px); } + + /* 测量状态指示器样式 */ + #measureStatus { + background: rgba(255, 255, 255, 0.98); + border: 1px solid rgba(72, 187, 120, 0.3); + border-radius: 8px; + padding: 6px 12px; + box-shadow: 0 2px 8px rgba(72, 187, 120, 0.2); + align-items: center; + gap: 8px; + } + + #measureStatus .toolbar-btn { + padding: 2px 6px; + height: 24px; + min-width: 24px; + } @@ -645,6 +662,14 @@ + + + @@ -1674,6 +1699,9 @@ var measureTooltips = []; // 存储所有测距点的overlay var measureFeatures = []; // 存储所有测距线段 var currentMeasureTooltips = []; // 当前测距的临时tooltip + var currentSketch; // 当前绘制的线段 + var currentListener; // 当前的监听器 + var segmentTooltips = []; // 存储每个节点的距离显示 function toggleMeasureDistance() { if (measureActive) { @@ -1681,15 +1709,22 @@ layer.msg('测距功能已关闭'); } else { activateMeasure(); - layer.msg('双击以结束当前测量'); + layer.msg('点击左键添加距离节点,点击右键结束测量 :)'); } - // 关闭下拉菜单 document.getElementById('mapFunctionsMenu').classList.remove('show'); } + function finishMeasuring() { + if (measureActive && currentSketch) { + measureDraw.finishDrawing(); + } + } + function activateMeasure() { measureActive = true; + document.getElementById('measureStatus').style.display = 'flex'; + measureDraw = new ol.interaction.Draw({ source: measureSource, type: 'LineString', @@ -1707,21 +1742,27 @@ }); map.addInteraction(measureDraw); - var sketch; - var listener; + map.getViewport().addEventListener('contextmenu', function(e) { + if (measureActive && currentSketch) { + e.preventDefault(); + measureDraw.finishDrawing(); + } + }); measureDraw.on('drawstart', function(evt) { - sketch = evt.feature; + currentSketch = evt.feature; currentMeasureTooltips = []; + segmentTooltips = []; - listener = sketch.getGeometry().on('change', function(e) { + currentListener = currentSketch.getGeometry().on('change', function(e) { var geom = e.target; var coords = geom.getCoordinates(); clearTemporaryTooltips(); + clearSegmentTooltips(); - // 计算总距离 + // 计算并显示每个节点的距离 var total = 0; for (var i = 0; i < coords.length; i++) { if (i === 0) { @@ -1731,14 +1772,18 @@ } else { // 计算段距离 var seg = new ol.geom.LineString([coords[i-1], coords[i]]); - total += ol.sphere.getLength(seg); + var segmentLength = ol.sphere.getLength(seg); + total += segmentLength; + + // 显示每个节点的累计距离 var output = (total > 1000 ? (Math.round(total / 100) / 10) + ' km' : (Math.round(total * 10) / 10) + ' m'); - // 如果是最后一个点,显示总距离 + var tooltip = createMeasureTooltip(coords[i], output); + segmentTooltips.push(tooltip); + if (i === coords.length - 1) { - var tooltip = createMeasureTooltip(coords[i], output); currentMeasureTooltips.push(tooltip); } } @@ -1750,40 +1795,59 @@ var coords = evt.feature.getGeometry().getCoordinates(); clearTemporaryTooltips(); + clearSegmentTooltips(); var total = 0; - for (var i = 1; i < coords.length; i++) { - var seg = new ol.geom.LineString([coords[i-1], coords[i]]); - total += ol.sphere.getLength(seg); + for (var i = 0; i < coords.length; i++) { + if (i === 0) { + var startTooltip = createMeasureTooltip(coords[0], '起点', true); + measureTooltips.push(startTooltip); + } else { + var seg = new ol.geom.LineString([coords[i-1], coords[i]]); + total += ol.sphere.getLength(seg); + + var output = (total > 1000 ? + (Math.round(total / 100) / 10) + ' km' : + (Math.round(total * 10) / 10) + ' m'); + var tooltip = createMeasureTooltip(coords[i], output, true); + measureTooltips.push(tooltip); + } } - var startTooltip = createMeasureTooltip(coords[0], '起点', true); - measureTooltips.push(startTooltip); - - var output = (total > 1000 ? - (Math.round(total / 100) / 10) + ' km' : - (Math.round(total * 10) / 10) + ' m'); - var endTooltip = createMeasureTooltip(coords[coords.length-1], output, true); - measureTooltips.push(endTooltip); measureFeatures.push(evt.feature); - ol.Observable.unByKey(listener); + ol.Observable.unByKey(currentListener); + currentSketch = null; + currentListener = null; + + document.getElementById('measureStatus').style.display = 'none'; map.removeInteraction(measureDraw); - activateMeasure(); - updateMeasureCount(); + measureActive = false; + + layer.msg('测量完成'); }); } function deactivateMeasure() { measureActive = false; + // 隐藏测量状态指示器 + document.getElementById('measureStatus').style.display = 'none'; + if (measureDraw) { map.removeInteraction(measureDraw); measureDraw = null; } + if (currentListener) { + ol.Observable.unByKey(currentListener); + currentListener = null; + } + + currentSketch = null; clearTemporaryTooltips(); + clearSegmentTooltips(); } function createMeasureTooltip(coord, text, isStatic) { @@ -1815,6 +1879,13 @@ } currentMeasureTooltips = []; } + + function clearSegmentTooltips() { + for (var i = 0; i < segmentTooltips.length; i++) { + map.removeOverlay(segmentTooltips[i]); + } + segmentTooltips = []; + } function updateMeasureCount() {