feat: 优化页面效果

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;
+        }
     </style>
 
     <script src="../js/ol.js"></script>
@@ -645,6 +662,14 @@
                             </div>
                         </div>
                     </div>
+
+                    <!-- 测量状态指示器 -->
+                    <div id="measureStatus" class="toolbar-item" style="display: none;">
+                        <span style="color: #48bb78; font-weight: bold; font-size: 12px;">测量中</span>
+                        <button class="toolbar-btn" onclick="finishMeasuring()" style="background: #f56565; margin-left: 6px;">
+                            <i class="layui-icon layui-icon-close" style="font-size: 12px;"></i>
+                        </button>
+                    </div>
                 </div>
 
 
@@ -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;
+        map.getViewport().addEventListener('contextmenu', function(e) {
-        var listener;
+            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++) {
+            for (var i = 0; i < coords.length; i++) {
-                var seg = new ol.geom.LineString([coords[i-1], coords[i]]);
+                if (i === 0) {
-                total += ol.sphere.getLength(seg);
+                    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();
+            measureActive = false;
-            updateMeasureCount();
+            
+            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) {
@@ -1816,6 +1880,13 @@
         currentMeasureTooltips = [];
     }
     
+    function clearSegmentTooltips() {
+        for (var i = 0; i < segmentTooltips.length; i++) {
+            map.removeOverlay(segmentTooltips[i]);
+        }
+        segmentTooltips = [];
+    }
+
     
     function updateMeasureCount() {