feat: 优化页面效果

sec-beidou/src/main/resources/static/js/device-overview-module/coordinate-utils.js

@@ -0,0 +1,83 @@
+/**
+ * 坐标转换工具模块
+ * 提供WGS84和GCJ-02坐标系之间的转换功能
+ */
+var CoordinateUtils = (function() {
+    'use strict';
+    
+    var pi = 3.14159265358979324;
+    var a = 6378245.0;
+    var ee = 0.00669342162296594323;
+
+    /**
+     * 判断是否在国内，不在国内则不做偏移
+     */
+    function outOfChina(lon, lat) {
+        if ((lon < 72.004 || lon > 137.8347) && (lat < 0.8293 || lat > 55.8271)) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+    
+    function transformLat(x, y) {
+        var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+        ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
+        ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
+        return ret;
+    }
+
+    function transformLon(x, y) {
+        var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+        ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
+        ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
+        return ret;
+    }
+
+
+    function transform(wgLat, wgLon) {
+        var mars_point = {lon: 0, lat: 0};
+        if (outOfChina(wgLon, wgLat)) {
+            mars_point.lat = wgLat;
+            mars_point.lon = wgLon;
+            return mars_point;
+        }
+        var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
+        var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
+        var radLat = wgLat / 180.0 * pi;
+        var magic = Math.sin(radLat);
+        magic = 1 - ee * magic * magic;
+        var sqrtMagic = Math.sqrt(magic);
+        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
+        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
+        mars_point.lat = wgLat + dLat;
+        mars_point.lon = wgLon + dLon;
+        return mars_point;
+    }
+
+
+    function getMapCoordinates(lat, lon, mapType) {
+        var coordinates;
+        if (mapType === 'amap' || mapType === 'amap_satellite') {
+            // 高德地图 WGS84 转换为 GCJ-02
+            var gcjCoord = transform(lat, lon);
+            coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
+        } else if (mapType.startsWith('google_')) {
+            // Google地图使用WGS84坐标系
+            coordinates = ol.proj.fromLonLat([lon, lat]);
+        } else {
+            // 天地图 CGCS2000，与WGS84实质一样
+            coordinates = ol.proj.fromLonLat([lon, lat]);
+        }
+        return coordinates;
+    }
+
+
+    return {
+        transform: transform,
+        getMapCoordinates: getMapCoordinates,
+        outOfChina: outOfChina
+    };
+})(); 

sec-beidou/src/main/resources/static/js/device-overview-module/device-markers.js

@@ -0,0 +1,369 @@
+/**
+ * 设备标记管理模块
+ * 负责设备标记的创建、分类和显示管理
+ */
+var DeviceMarkers = (function() {
+    'use strict';
+    
+    var greenFeatures = [];
+    var orangeFeatures = [];
+    var redFeatures = [];
+    var allFeatures = [];
+    var myLocationFeature = null;
+    var myLocationInterval = null;
+    var showDeviceId = true;
+    var minZoomForLabels = 4;
+    
+
+    var map = null;
+    var vectorSource = null;
+    var vectorLayer = null;
+    
+
+    function init(mapInstance, vectorSourceInstance, vectorLayerInstance) {
+        map = mapInstance;
+        vectorSource = vectorSourceInstance;
+        vectorLayer = vectorLayerInstance;
+    }
+    
+
+    function createDeviceStyle(feature) {
+        if (feature.get('isMyLocation')) {
+            return new ol.style.Style({
+                image: new ol.style.Icon({
+                    anchor: [0.5, 1],
+                    src: '../images/loc_blue.png',
+                    scale: 0.7
+                })
+            });
+        }
+        
+        var deviceInfo = feature.get('deviceInfo');
+        if (!deviceInfo) return null;
+        
+        var iconSrc;
+        var color = '#000';
+        var isHovered = feature.get('hovered') === true;
+        var scale = isHovered ? 0.85 : 0.7;
+
+        // 根据告警级别选择图标
+        if (deviceInfo.warning == 2) {
+            iconSrc = '../images/loc1_red.png';
+        } else if (deviceInfo.warning == 1) {
+            iconSrc = '../images/loc1_orange.png';
+        } else {
+            iconSrc = '../images/loc1_green.png';
+        }
+
+        var style = new ol.style.Style({
+            image: new ol.style.Icon({
+                anchor: [0.5, 1],
+                src: iconSrc,
+                scale: scale
+            })
+        });
+
+        // 根据缩放级别和设置决定是否显示设备ID
+        if (showDeviceId && map && map.getView().getZoom() >= minZoomForLabels) {
+            style.setText(new ol.style.Text({
+                text: deviceInfo.deviceid,
+                offsetY: -30,
+                fill: new ol.style.Fill({ 
+                    color: isHovered ? '#1aa094' : color 
+                }),
+                stroke: new ol.style.Stroke({ 
+                    color: '#fff', 
+                    width: isHovered ? 3 : 2 
+                }),
+                font: isHovered ? 'bold 12px Arial' : '12px Arial'
+            }));
+        }
+
+        return style;
+    }
+    
+
+    function addDeviceMarkers(deviceList) {
+        if (!vectorSource || !deviceList) return;
+        
+        var savedMyLocationFeature = myLocationFeature;
+
+        vectorSource.clear();
+        greenFeatures = [];
+        orangeFeatures = [];
+        redFeatures = [];
+        allFeatures = [];
+
+        for (var i = 0; i < deviceList.length; i++) {
+            var device = deviceList[i];
+            var currentMapType = getCurrentMapType();
+            var mapCoordinates = CoordinateUtils.getMapCoordinates(
+                device.latitude, 
+                device.longitude, 
+                currentMapType
+            );
+
+            var feature = new ol.Feature({
+                geometry: new ol.geom.Point(mapCoordinates),
+                deviceInfo: device
+            });
+
+            // 按告警级别分类
+            if (device.warning == 2) {
+                redFeatures.push(feature);
+            } else if (device.warning == 1) {
+                orangeFeatures.push(feature);
+            } else {
+                greenFeatures.push(feature);
+            }
+
+            allFeatures.push(feature);
+            vectorSource.addFeature(feature);
+        }
+
+        if (savedMyLocationFeature) {
+            vectorSource.addFeature(savedMyLocationFeature);
+        }
+
+        // 强制更新样式
+        if (vectorLayer) {
+            vectorLayer.changed();
+        }
+    }
+    
+
+    function getCurrentMapType() {
+        var mapTypeSelect = document.getElementById('mapTypeSelectNew');
+        return mapTypeSelect ? mapTypeSelect.value : 'tianditu_satellite';
+    }
+    
+
+    function showAllDevices() {
+        if (!vectorSource) return;
+        
+        var savedMyLocationFeature = myLocationFeature;
+        vectorSource.clear();
+
+        if (savedMyLocationFeature) {
+            vectorSource.addFeature(savedMyLocationFeature);
+        }
+
+        for (var i = 0; i < allFeatures.length; i++) {
+            vectorSource.addFeature(allFeatures[i]);
+        }
+    }
+    
+    function showWarning1Devices() {
+        if (!vectorSource) return;
+        
+        var savedMyLocationFeature = myLocationFeature;
+        vectorSource.clear();
+
+        if (savedMyLocationFeature) {
+            vectorSource.addFeature(savedMyLocationFeature);
+        }
+
+        for (var i = 0; i < allFeatures.length; i++) {
+            vectorSource.addFeature(allFeatures[i]);
+        }
+
+        hideGreenFeatures();
+        hideRedFeatures();
+    }
+    
+
+    function showWarning2Devices() {
+        if (!vectorSource) return;
+        
+        var savedMyLocationFeature = myLocationFeature;
+        vectorSource.clear();
+
+        if (savedMyLocationFeature) {
+            vectorSource.addFeature(savedMyLocationFeature);
+        }
+
+        for (var i = 0; i < allFeatures.length; i++) {
+            vectorSource.addFeature(allFeatures[i]);
+        }
+
+        hideGreenFeatures();
+        hideOrangeFeatures();
+    }
+    
+    function hideGreenFeatures() {
+        for (var i = 0; i < greenFeatures.length; i++) {
+            vectorSource.removeFeature(greenFeatures[i]);
+        }
+    }
+
+    function hideOrangeFeatures() {
+        for (var i = 0; i < orangeFeatures.length; i++) {
+            vectorSource.removeFeature(orangeFeatures[i]);
+        }
+    }
+    
+    function hideRedFeatures() {
+        for (var i = 0; i < redFeatures.length; i++) {
+            vectorSource.removeFeature(redFeatures[i]);
+        }
+    }
+    
+    function findDeviceById(deviceId) {
+        // console.log('搜索设备:', deviceId, '(类型:', typeof deviceId, ')');
+        // console.log('当前设备总数:', allFeatures.length);
+        
+        var searchTerm = String(deviceId).trim();
+        
+        for (var i = 0; i < allFeatures.length; i++) {
+            var feature = allFeatures[i];
+            var deviceInfo = feature.get('deviceInfo');
+            if (deviceInfo) {
+                var currentDeviceId = String(deviceInfo.deviceid);
+                // console.log('检查设备:', currentDeviceId, '(类型:', typeof deviceInfo.deviceid, ')');
+                
+                if (currentDeviceId === searchTerm) {
+                    // console.log('精确匹配找到设备:', currentDeviceId);
+                    return feature;
+                }
+                
+                if (currentDeviceId.indexOf(searchTerm) !== -1) {
+                    // console.log('部分匹配找到设备:', currentDeviceId);
+                    return feature;
+                }
+                
+                if (currentDeviceId.replace(/\s+/g, '') === searchTerm.replace(/\s+/g, '')) {
+                    // console.log('去除空格后匹配找到设备:', currentDeviceId);
+                    return feature;
+                }
+            }
+        }
+        console.log('未找到设备:', deviceId);
+        return null;
+    }
+
+    function locateDevice(deviceId) {
+        var feature = findDeviceById(deviceId);
+        if (feature && map) {
+            var geometry = feature.getGeometry();
+            var coordinates = geometry.getCoordinates();
+            
+            map.getView().animate({
+                center: coordinates,
+                zoom: Math.max(map.getView().getZoom(), 15),
+                duration: 1000
+            });
+            return true;
+        }
+        return false;
+    }
+    
+    /**
+     * 获取我的位置
+     */
+    function getMyLocation() {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    var lat = position.coords.latitude;
+                    var lon = position.coords.longitude;
+                    
+                    var currentMapType = getCurrentMapType();
+                    var coordinates = CoordinateUtils.getMapCoordinates(lat, lon, currentMapType);
+                    
+                    if (myLocationFeature) {
+                        vectorSource.removeFeature(myLocationFeature);
+                    }
+                    
+                    myLocationFeature = new ol.Feature({
+                        geometry: new ol.geom.Point(coordinates),
+                        isMyLocation: true
+                    });
+                    
+                    vectorSource.addFeature(myLocationFeature);
+                    
+                    map.getView().animate({
+                        center: coordinates,
+                        zoom: 15,
+                        duration: 1000
+                    });
+                },
+                function(error) {
+                    console.error('获取位置失败:', error);
+                }
+            );
+        }
+    }
+    
+
+    function startLocationUpdates() {
+        if (navigator.geolocation) {
+            myLocationInterval = setInterval(function() {
+                getMyLocation();
+            }, 30000);
+        }
+    }
+    
+
+    function stopLocationUpdates() {
+        if (myLocationInterval) {
+            clearInterval(myLocationInterval);
+            myLocationInterval = null;
+        }
+    }
+    
+
+    function updateMyLocationForMapType(mapType) {
+        if (myLocationFeature) {
+            var geometry = myLocationFeature.getGeometry();
+            var coordinates = geometry.getCoordinates();
+            var lonLat = ol.proj.toLonLat(coordinates);
+            
+            var newCoordinates = CoordinateUtils.getMapCoordinates(lonLat[1], lonLat[0], mapType);
+            
+            myLocationFeature.setGeometry(new ol.geom.Point(newCoordinates));
+        }
+    }
+
+    function setShowDeviceId(show) {
+        showDeviceId = show;
+        if (vectorLayer) {
+            vectorLayer.changed();
+        }
+    }
+    
+
+    function getDeviceStats() {
+        return {
+            total: allFeatures.length,
+            green: greenFeatures.length,
+            orange: orangeFeatures.length,
+            red: redFeatures.length
+        };
+    }
+
+    return {
+        init: init,
+        createDeviceStyle: createDeviceStyle,
+        addDeviceMarkers: addDeviceMarkers,
+        showAllDevices: showAllDevices,
+        showWarning1Devices: showWarning1Devices,
+        showWarning2Devices: showWarning2Devices,
+        hideGreenFeatures: hideGreenFeatures,
+        hideOrangeFeatures: hideOrangeFeatures,
+        hideRedFeatures: hideRedFeatures,
+        findDeviceById: findDeviceById,
+        locateDevice: locateDevice,
+        getMyLocation: getMyLocation,
+        startLocationUpdates: startLocationUpdates,
+        stopLocationUpdates: stopLocationUpdates,
+        updateMyLocationForMapType: updateMyLocationForMapType,
+        setShowDeviceId: setShowDeviceId,
+        getDeviceStats: getDeviceStats,
+        
+        getAllFeatures: function() { return allFeatures; },
+        getGreenFeatures: function() { return greenFeatures; },
+        getOrangeFeatures: function() { return orangeFeatures; },
+        getRedFeatures: function() { return redFeatures; },
+        getMyLocationFeature: function() { return myLocationFeature; }
+    };
+})(); 

sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js

@@ -0,0 +1,218 @@
+/**
+ * 设备总览主入口文件
+ * 负责整个设备总览模块的初始化和全局函数暴露
+ */
+var DeviceOverview = (function() {
+    'use strict';
+    
+    // 全局变量（从原HTML中提取）
+    var deviceList = [];
+    
+    /**
+     * 初始化设备总览模块
+     * @param {Array} devices - 设备列表数据
+     * @param {Object} options - 配置选项
+     */
+    function init(devices, options) {
+        deviceList = devices || [];
+        
+        // 设置全局变量供其他模块使用
+        window.deviceList = deviceList;
+        window.userRole = options && options.role ? options.role : 'USER';
+        
+        // 等待layui加载完成后初始化
+        layui.use(['form'], function(){
+            var form = layui.form;
+
+            // 绑定表单事件
+            form.on('select(mapTypeNew)', function(data){
+                MapCore.switchMapType(data.value);
+            });
+
+            // 初始化地图核心
+            MapCore.initialize(deviceList);
+            
+            // 默认显示所有设备
+            document.getElementById('warningFilter').value = 'all';
+            SearchFilter.showAllDevices();
+        });
+    }
+    
+    // 暴露给HTML使用的全局函数
+    
+    /**
+     * 地图类型变化处理
+     */
+    function onMapTypeChange() {
+        return MapCore.onMapTypeChange();
+    }
+    
+    /**
+     * 搜索设备
+     */
+    function searchDeviceNew() {
+        return MapCore.searchDeviceNew();
+    }
+    
+    /**
+     * 告警过滤变化处理
+     */
+    function onWarningFilterChange() {
+        return MapCore.onWarningFilterChange();
+    }
+    
+    /**
+     * 切换地图功能菜单
+     */
+    function toggleMapFunctionsMenu() {
+        return MapCore.toggleMapFunctionsMenu();
+    }
+    
+    /**
+     * 切换设备ID显示
+     */
+    function toggleDeviceId() {
+        return MapCore.toggleDeviceId();
+    }
+    
+    /**
+     * 切换集群显示
+     */
+    function toggleCluster() {
+        return MapCore.toggleCluster();
+    }
+    
+    /**
+     * 切换测距功能
+     */
+    function toggleMeasureDistance() {
+        return MeasureTools.toggleMeasureDistance();
+    }
+    
+    /**
+     * 完成测量
+     */
+    function finishMeasuring() {
+        return MeasureTools.finishMeasuring();
+    }
+    
+    /**
+     * 清除测距
+     */
+    function clearMeasure() {
+        return MeasureTools.clearMeasure();
+    }
+    
+    /**
+     * 切换天气预报功能
+     */
+    function toggleWeatherForecast() {
+        return WeatherForecast.toggleWeatherForecast();
+    }
+    
+    /**
+     * 关闭天气卡片
+     */
+    function closeWeatherCard() {
+        return WeatherForecast.closeWeatherCard();
+    }
+    
+    /**
+     * 显示上一个天气预报
+     */
+    function showPrevForecast() {
+        return WeatherForecast.showPrevForecast();
+    }
+    
+    /**
+     * 显示下一个天气预报
+     */
+    function showNextForecast() {
+        return WeatherForecast.showNextForecast();
+    }
+    
+    /**
+     * 查询设备
+     * @param {string} statusType - 状态类型
+     */
+    function queryDevices(statusType) {
+        return SearchFilter.queryDevices(statusType);
+    }
+    
+    /**
+     * 定位设备到地图
+     * @param {string} deviceId - 设备ID
+     * @param {number} latitude - 纬度
+     * @param {number} longitude - 经度
+     */
+    function locateDeviceOnMap(deviceId, latitude, longitude) {
+        return SearchFilter.locateDeviceOnMap(deviceId, latitude, longitude);
+    }
+    
+    /**
+     * 直接定位设备
+     * @param {string} deviceId - 设备ID
+     */
+    function locateDeviceDirectly(deviceId) {
+        return SearchFilter.locateDeviceDirectly(deviceId);
+    }
+    
+    /**
+     * 切换地图类型
+     * @param {string} mapType - 地图类型
+     */
+    function switchMapType(mapType) {
+        return MapCore.switchMapType(mapType);
+    }
+    
+    // 公开API
+    return {
+        init: init,
+        
+        // 地图相关
+        onMapTypeChange: onMapTypeChange,
+        switchMapType: switchMapType,
+        
+        // 搜索和过滤
+        searchDeviceNew: searchDeviceNew,
+        onWarningFilterChange: onWarningFilterChange,
+        queryDevices: queryDevices,
+        locateDeviceOnMap: locateDeviceOnMap,
+        locateDeviceDirectly: locateDeviceDirectly,
+        
+        // 地图功能
+        toggleMapFunctionsMenu: toggleMapFunctionsMenu,
+        toggleDeviceId: toggleDeviceId,
+        toggleCluster: toggleCluster,
+        
+        // 测距工具
+        toggleMeasureDistance: toggleMeasureDistance,
+        finishMeasuring: finishMeasuring,
+        clearMeasure: clearMeasure,
+        
+        // 天气预报
+        toggleWeatherForecast: toggleWeatherForecast,
+        closeWeatherCard: closeWeatherCard,
+        showPrevForecast: showPrevForecast,
+        showNextForecast: showNextForecast
+    };
+})();
+
+// 将主要函数暴露到全局作用域，供HTML中的onclick等使用
+window.DeviceOverview = DeviceOverview;
+window.onMapTypeChange = DeviceOverview.onMapTypeChange;
+window.searchDeviceNew = DeviceOverview.searchDeviceNew;
+window.onWarningFilterChange = DeviceOverview.onWarningFilterChange;
+window.toggleMapFunctionsMenu = DeviceOverview.toggleMapFunctionsMenu;
+window.toggleDeviceId = DeviceOverview.toggleDeviceId;
+window.toggleCluster = DeviceOverview.toggleCluster;
+window.toggleMeasureDistance = DeviceOverview.toggleMeasureDistance;
+window.finishMeasuring = DeviceOverview.finishMeasuring;
+window.clearMeasure = DeviceOverview.clearMeasure;
+window.toggleWeatherForecast = DeviceOverview.toggleWeatherForecast;
+window.closeWeatherCard = DeviceOverview.closeWeatherCard;
+window.showPrevForecast = DeviceOverview.showPrevForecast;
+window.showNextForecast = DeviceOverview.showNextForecast;
+window.queryDevices = DeviceOverview.queryDevices;
+window.locateDeviceOnMap = DeviceOverview.locateDeviceOnMap;
+window.locateDeviceDirectly = DeviceOverview.locateDeviceDirectly; 

sec-beidou/src/main/resources/static/js/device-overview-module/map-core.js

@@ -0,0 +1,360 @@
+/**
+ * 地图核心模块
+ * 负责地图初始化、事件处理和核心功能管理
+ */
+var MapCore = (function() {
+    'use strict';
+    
+    var map = null;
+    var vectorSource = null;
+    var vectorLayer = null;
+    var clusterSource = null;
+    var clusterLayer = null;
+    var currentBaseLayer = null;
+    var showDeviceId = true;
+    var showCluster = true;
+    var minZoomForLabels = 4;
+    var maxZoomForClustering = 8;
+    var hoveredFeature = null;
+    
+
+    function initialize(deviceList) {
+        // 创建矢量数据源和图层
+        vectorSource = new ol.source.Vector();
+        vectorLayer = new ol.layer.Vector({
+            source: vectorSource,
+            style: function(feature) {
+                return DeviceMarkers.createDeviceStyle(feature);
+            }
+        });
+
+        // 创建集群数据源和图层
+        clusterSource = new ol.source.Cluster({
+            distance: 40,
+            source: vectorSource
+        });
+
+        clusterLayer = new ol.layer.Vector({
+            source: clusterSource,
+            style: function(feature) {
+                var size = feature.get('features').length;
+                var style = new ol.style.Style({
+                    image: new ol.style.Circle({
+                        radius: 15,
+                        fill: new ol.style.Fill({
+                            color: '#3399CC'
+                        })
+                    }),
+                    text: new ol.style.Text({
+                        text: size.toString(),
+                        fill: new ol.style.Fill({
+                            color: '#fff'
+                        })
+                    })
+                });
+                return style;
+            }
+        });
+
+        var initialMapType = document.getElementById('mapTypeSelectNew').value || 'tianditu_satellite';
+        currentBaseLayer = MapLayers.getLayer(initialMapType);
+
+        map = new ol.Map({
+            target: 'map-container',
+            layers: [
+                currentBaseLayer,
+                clusterLayer,
+                vectorLayer
+            ],
+            view: new ol.View({
+                center: ol.proj.fromLonLat([116.404, 39.915]),
+                zoom: 7
+            })
+        });
+
+        DeviceMarkers.init(map, vectorSource, vectorLayer);
+        MeasureTools.init(map);
+        WeatherForecast.init();
+
+        var scaleLineControl = new ol.control.ScaleLine();
+        map.addControl(scaleLineControl);
+
+        var initialZoom = map.getView().getZoom();
+        updateLayerVisibility(initialZoom);
+
+        map.getView().on('change:resolution', function() {
+            var zoom = map.getView().getZoom();
+            updateLayerVisibility(zoom);
+            vectorLayer.changed();
+        });
+
+        bindMouseEvents();
+
+        if (deviceList && deviceList.length > 0) {
+            setCenterFromDevices(deviceList);
+        }
+
+        DeviceMarkers.addDeviceMarkers(deviceList);
+        
+        DeviceMarkers.getMyLocation();
+        DeviceMarkers.startLocationUpdates();
+        
+        document.getElementById('showDeviceIdSwitch').checked = showDeviceId;
+        document.getElementById('showClusterSwitch').checked = showCluster;
+    }
+    
+    function updateLayerVisibility(zoom) {
+        if (showCluster) {
+            if (zoom >= maxZoomForClustering) {
+                clusterLayer.setVisible(false);
+                vectorLayer.setVisible(true);
+            } else {
+                clusterLayer.setVisible(true);
+                vectorLayer.setVisible(false);
+            }
+        } else {
+            clusterLayer.setVisible(false);
+            vectorLayer.setVisible(true);
+        }
+    }
+    
+    function bindMouseEvents() {
+        map.on('pointermove', function(evt) {
+            if (evt.dragging) {
+                return;
+            }
+            
+            var pixel = map.getEventPixel(evt.originalEvent);
+            var hit = map.hasFeatureAtPixel(pixel);
+            
+            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
+            
+            var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
+                return feature;
+            });
+            
+            if (hoveredFeature && hoveredFeature !== feature) {
+                hoveredFeature.set('hovered', false);
+            }
+            
+            if (feature) {
+                // 处理集群
+                var features = feature.get('features');
+                if (features && features.length === 1) {
+                    features[0].set('hovered', true);
+                    hoveredFeature = features[0];
+                } else if (!features && feature.get('deviceInfo')) {
+                    feature.set('hovered', true);
+                    hoveredFeature = feature;
+                }
+            }
+            
+            vectorLayer.changed();
+        });
+        
+        map.on('click', function(evt) {
+            var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
+                return feature;
+            });
+
+            if (feature) {
+                var features = feature.get('features');
+                if (features && features.length > 1) {
+                    // 集群点击，扩展视图
+                    var extent = vectorSource.getExtent();
+                    map.getView().fit(extent, {
+                        padding: [50, 50, 50, 50],
+                        duration: 1000
+                    });
+                } else if (features && features.length === 1) {
+                    // 单个设备点击
+                    var deviceInfo = features[0].get('deviceInfo');
+                    if (deviceInfo) {
+                        showDeviceInfo(deviceInfo);
+                        // 如果天气预测开启，显示天气卡片
+                        if (WeatherForecast.isEnabled()) {
+                            WeatherForecast.showWeatherForecast(deviceInfo);
+                        }
+                    }
+                } else if (feature.get('deviceInfo')) {
+                    var deviceInfo = feature.get('deviceInfo');
+                    showDeviceInfo(deviceInfo);
+                    // 如果天气预测开启，显示天气卡片
+                    if (WeatherForecast.isEnabled()) {
+                        WeatherForecast.showWeatherForecast(deviceInfo);
+                    }
+                }
+            }
+        });
+    }
+    
+
+    function showDeviceInfo(deviceInfo) {
+        var statusText = '';
+        
+        if (deviceInfo.warning === 2) {
+            statusText = '严重告警';
+        } else if (deviceInfo.warning === 1) {
+            statusText = '一般告警';
+        } else {
+            statusText = '正常';
+        }
+        
+        var infoMsg = ' 设备: ' + deviceInfo.deviceid + 
+                      ' | 状态: ' + statusText + 
+                      ' | 坐标: ' + deviceInfo.latitude.toFixed(4) + ', ' + deviceInfo.longitude.toFixed(4);
+        
+        if (window.layer && typeof window.layer.msg === 'function') {
+            window.layer.msg(infoMsg, {
+                time: 3000,
+                area: ['auto', 'auto'],
+                offset: 'auto'
+            });
+        }
+    }
+    
+    function setCenterFromDevices(deviceList) {
+        if (!deviceList || deviceList.length === 0) return;
+        
+        var minLat = deviceList[0].latitude;
+        var maxLat = deviceList[0].latitude;
+        var minLon = deviceList[0].longitude;
+        var maxLon = deviceList[0].longitude;
+        
+        for (var i = 1; i < deviceList.length; i++) {
+            var device = deviceList[i];
+            minLat = Math.min(minLat, device.latitude);
+            maxLat = Math.max(maxLat, device.latitude);
+            minLon = Math.min(minLon, device.longitude);
+            maxLon = Math.max(maxLon, device.longitude);
+        }
+        
+        var centerLat = (minLat + maxLat) / 2;
+        var centerLon = (minLon + maxLon) / 2;
+        
+        map.getView().setCenter(ol.proj.fromLonLat([centerLon, centerLat]));
+    }
+
+    function switchMapType(mapType) {
+        if (!MapLayers.hasLayer(mapType)) {
+            console.error('未知的地图类型:', mapType);
+            return;
+        }
+        
+        map.removeLayer(currentBaseLayer);
+        currentBaseLayer = MapLayers.getLayer(mapType);
+        map.getLayers().insertAt(0, currentBaseLayer);
+
+        DeviceMarkers.updateMyLocationForMapType(mapType);
+        
+        // 重新获取设备列表并添加标记
+        var deviceList = window.deviceList || [];
+        DeviceMarkers.addDeviceMarkers(deviceList);
+    }
+    
+    function toggleDeviceId() {
+        showDeviceId = document.getElementById('showDeviceIdSwitch').checked;
+        DeviceMarkers.setShowDeviceId(showDeviceId);
+        
+        if (window.layer && typeof window.layer.msg === 'function') {
+            window.layer.msg(showDeviceId ? '已显示设备信息' : '已隐藏设备信息');
+        }
+    }
+    
+    function toggleCluster() {
+        showCluster = document.getElementById('showClusterSwitch').checked;
+        var zoom = map.getView().getZoom();
+        updateLayerVisibility(zoom);
+        
+        if (window.layer && typeof window.layer.msg === 'function') {
+            window.layer.msg(showCluster ? '已启用集群显示' : '已禁用集群显示');
+        }
+    }
+    
+    function toggleMapFunctionsMenu() {
+        var menu = document.getElementById('mapFunctionsMenu');
+        if (menu) {
+            menu.classList.toggle('show');
+            if (menu.classList.contains('show')) {
+                document.addEventListener('click', closeMapFunctionsMenu);
+            }
+        }
+    }
+    
+    /**
+     * 关闭地图功能菜单
+     * @param {Event} event - 点击事件
+     */
+    function closeMapFunctionsMenu(event) {
+        var dropdown = document.getElementById('mapFunctionsMenu');
+        var toggleBtn = document.querySelector('.dropdown-toggle');
+        
+        if (dropdown && !dropdown.contains(event.target) && !toggleBtn.contains(event.target)) {
+            dropdown.classList.remove('show');
+            document.removeEventListener('click', closeMapFunctionsMenu);
+        }
+    }
+    
+    /**
+     * 地图类型变化处理
+     */
+    function onMapTypeChange() {
+        var mapType = document.getElementById('mapTypeSelectNew').value;
+        switchMapType(mapType);
+    }
+    
+    function onWarningFilterChange() {
+        var filterValue = document.getElementById('warningFilter').value;
+        switch(filterValue) {
+            case 'all':
+                SearchFilter.showAllDevices();
+                break;
+            case 'warning1':
+                SearchFilter.showWarning1Devices();
+                break;
+            case 'warning2':
+                SearchFilter.showWarning2Devices();
+                break;
+        }
+    }
+    
+    function searchDeviceNew() {
+        var searchInput = document.getElementById('deviceSearchNew');
+        if (searchInput) {
+            var deviceId = searchInput.value.trim();
+            if (deviceId) {
+                SearchFilter.searchDevice(deviceId);
+            } else {
+                if (window.layer && typeof window.layer.msg === 'function') {
+                    window.layer.msg('请输入设备编号');
+                }
+            }
+        }
+    }
+    
+    function getMap() {
+        return map;
+    }
+
+    function getVectorSource() {
+        return vectorSource;
+    }
+    
+    function getVectorLayer() {
+        return vectorLayer;
+    }
+    
+    return {
+        initialize: initialize,
+        switchMapType: switchMapType,
+        toggleDeviceId: toggleDeviceId,
+        toggleCluster: toggleCluster,
+        toggleMapFunctionsMenu: toggleMapFunctionsMenu,
+        onMapTypeChange: onMapTypeChange,
+        onWarningFilterChange: onWarningFilterChange,
+        searchDeviceNew: searchDeviceNew,
+        getMap: getMap,
+        getVectorSource: getVectorSource,
+        getVectorLayer: getVectorLayer
+    };
+})(); 

sec-beidou/src/main/resources/static/js/device-overview-module/map-layers.js

@@ -0,0 +1,179 @@
+/**
+ * 地图图层管理模块
+ * 管理不同类型的地图图层（天地图、高德、谷歌等）
+ */
+var MapLayers = (function() {
+    'use strict';
+    
+    // 天地图 API 密钥 （fengyarnom@gmail.com）
+    var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
+    
+    function createTiandituTileLoadFunction() {
+        return function(imageTile, src) {
+            imageTile.getImage().src = src;
+            imageTile.getImage().onerror = function() {
+                // 天地图加载失败时切换到高德地图
+                var mapTypeSelect = document.getElementById('mapTypeSelectNew');
+                if(mapTypeSelect && mapTypeSelect.value.startsWith('tianditu_')) {
+                    mapTypeSelect.value = 'amap';
+                    if (window.DeviceOverview && typeof window.DeviceOverview.switchMapType === 'function') {
+                        window.DeviceOverview.switchMapType('amap');
+                    }
+                    if (window.layer && typeof window.layer.msg === 'function') {
+                        window.layer.msg('天地图加载失败,已自动切换到高德地图');
+                    }
+                    if (window.layui && window.layui.form) {
+                        window.layui.form.render('select');
+                    }
+                }
+            };
+        };
+    }
+    
+
+    var mapLayers = {
+        // 高德地图
+        amap: new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+            })
+        }),
+        
+        // 高德卫星图
+        amap_satellite: new ol.layer.Group({
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
+                    })
+                }),
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
+                    })
+                })
+            ]
+        }),
+        
+        // 谷歌卫星图
+        google_satellite: new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: 'https://mt{0-3}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+                crossOrigin: 'anonymous'
+            })
+        }),
+        
+        // 谷歌地形图
+        google_terrain: new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: 'https://mt{0-3}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
+                crossOrigin: 'anonymous'
+            })
+        }),
+        
+        // 谷歌道路图
+        google_roadmap: new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: 'https://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
+                crossOrigin: 'anonymous'
+            })
+        }),
+        
+        // 谷歌混合图
+        google_hybrid: new ol.layer.Tile({
+            source: new ol.source.XYZ({
+                url: 'https://mt{0-3}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',
+                crossOrigin: 'anonymous'
+            })
+        }),
+        
+        // 天地图卫星影像
+        tianditu_satellite: new ol.layer.Group({
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
+                        tileLoadFunction: createTiandituTileLoadFunction()
+                    })
+                }),
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
+                        tileLoadFunction: createTiandituTileLoadFunction()
+                    })
+                })
+            ]
+        }),
+        
+        // 天地图矢量图
+        tianditu_normal: new ol.layer.Group({
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
+                        tileLoadFunction: createTiandituTileLoadFunction()
+                    })
+                }),
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
+                        tileLoadFunction: createTiandituTileLoadFunction()
+                    })
+                })
+            ]
+        }),
+        
+        // 天地图地形图
+        tianditu_terrain: new ol.layer.Group({
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
+                        tileLoadFunction: createTiandituTileLoadFunction()
+                    })
+                })
+            ]
+        }),
+        
+        // 天地图地形混合图
+        tianditu_terrain_hybrid: new ol.layer.Group({
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
+                        tileLoadFunction: createTiandituTileLoadFunction()
+                    })
+                }),
+                new ol.layer.Tile({
+                    source: new ol.source.XYZ({
+                        url: 'https://t{0-7}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
+                        tileLoadFunction: createTiandituTileLoadFunction()
+                    })
+                })
+            ]
+        })
+    };
+    
+
+    function getLayer(mapType) {
+        return mapLayers[mapType];
+    }
+    
+
+
+    function getAllLayers() {
+        return mapLayers;
+    }
+    
+
+    function hasLayer(mapType) {
+        return mapLayers.hasOwnProperty(mapType);
+    }
+    
+
+    return {
+        getLayer: getLayer,
+        getAllLayers: getAllLayers,
+        hasLayer: hasLayer
+    };
+})(); 

sec-beidou/src/main/resources/static/js/device-overview-module/measure-tools.js

@@ -0,0 +1,303 @@
+/**
+ * 测距工具模块
+ * 提供地图测距功能
+ */
+var MeasureTools = (function() {
+    'use strict';
+    
+    var measureActive = false;
+    var measureDraw = null;
+    var measureSource = null;
+    var measureLayer = null;
+    var measureTooltips = [];
+    var measureFeatures = [];
+    var currentMeasureTooltips = [];
+    var currentSketch = null;
+    var currentListener = null;
+    var segmentTooltips = [];
+    var map = null;
+    
+    function init(mapInstance) {
+        map = mapInstance;
+        
+        // 测距专用图层
+        measureSource = new ol.source.Vector();
+        measureLayer = new ol.layer.Vector({
+            source: measureSource,
+            style: new ol.style.Style({
+                fill: new ol.style.Fill({ color: 'rgba(255,255,255,0.2)' }),
+                stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
+                image: new ol.style.RegularShape({
+                    points: 4,
+                    radius: 8,
+                    radius2: 0,
+                    angle: Math.PI / 4,
+                    stroke: new ol.style.Stroke({ color: '#ed8936', width: 2 })
+                })
+            })
+        });
+        
+        if (map) {
+            map.addLayer(measureLayer);
+        }
+    }
+    
+    function toggleMeasureDistance() {
+        if (measureActive) {
+            deactivateMeasure();
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('测距功能已关闭');
+            }
+        } else {
+            activateMeasure();
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('点击左键添加距离节点，点击右键结束测量 :)');
+            }
+        }
+        
+        var menu = document.getElementById('mapFunctionsMenu');
+        if (menu) {
+            menu.classList.remove('show');
+        }
+    }
+    
+    function finishMeasuring() {
+        if (measureActive && currentSketch && measureDraw) {
+            measureDraw.finishDrawing();
+        }
+    }
+    
+    function activateMeasure() {
+        if (!map || !measureSource) return;
+        
+        measureActive = true;
+        
+        // 显示测量状态指示器
+        var measureStatus = document.getElementById('measureStatus');
+        if (measureStatus) {
+            measureStatus.style.display = 'flex';
+        }
+        
+        measureDraw = new ol.interaction.Draw({
+            source: measureSource,
+            type: 'LineString',
+            style: new ol.style.Style({
+                fill: new ol.style.Fill({ color: 'rgba(255,255,255,0.2)' }),
+                stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
+                image: new ol.style.RegularShape({
+                    points: 4,
+                    radius: 8,
+                    radius2: 0,
+                    angle: Math.PI / 4,
+                    stroke: new ol.style.Stroke({ color: '#ed8936', width: 2 })
+                })
+            })
+        });
+        
+        map.addInteraction(measureDraw);
+
+        map.getViewport().addEventListener('contextmenu', function(e) {
+            if (measureActive && currentSketch) {
+                e.preventDefault();
+                measureDraw.finishDrawing();
+            }
+        });
+        
+        measureDraw.on('drawstart', function(evt) {
+            currentSketch = evt.feature;
+            currentMeasureTooltips = [];
+            segmentTooltips = [];
+            
+            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) {
+                        // 起点
+                        var startTooltip = createMeasureTooltip(coords[0], '起点');
+                        currentMeasureTooltips.push(startTooltip);
+                    } else {
+                        // 计算段距离
+                        var seg = new ol.geom.LineString([coords[i-1], coords[i]]);
+                        var segmentLength = ol.sphere.getLength(seg);
+                        total += segmentLength;
+                        
+                        // 显示每个节点的累计距离
+                        var output = formatLength(total);
+                        var tooltip = createMeasureTooltip(coords[i], output);
+                        segmentTooltips.push(tooltip);
+                        
+                        if (i === coords.length - 1) {
+                            currentMeasureTooltips.push(tooltip);
+                        }
+                    }
+                }
+            });
+        });
+        
+        // 绘制结束
+        measureDraw.on('drawend', function(evt) {
+            var coords = evt.feature.getGeometry().getCoordinates();
+        
+            clearTemporaryTooltips();
+            clearSegmentTooltips();
+            
+            var total = 0;
+            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 = formatLength(total);
+                    var tooltip = createMeasureTooltip(coords[i], output, true);
+                    measureTooltips.push(tooltip);
+                }
+            }
+            
+            measureFeatures.push(evt.feature);
+            
+            if (currentListener) {
+                ol.Observable.unByKey(currentListener);
+            }
+            currentSketch = null;
+            currentListener = null;
+            
+            var measureStatus = document.getElementById('measureStatus');
+            if (measureStatus) {
+                measureStatus.style.display = 'none';
+            }
+            
+            map.removeInteraction(measureDraw);
+            measureActive = false;
+            
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('测量完成');
+            }
+        });
+    }
+    
+    function deactivateMeasure() {
+        measureActive = false;
+        
+        var measureStatus = document.getElementById('measureStatus');
+        if (measureStatus) {
+            measureStatus.style.display = 'none';
+        }
+        
+        if (measureDraw && map) {
+            map.removeInteraction(measureDraw);
+            measureDraw = null;
+        }
+        
+        if (currentListener) {
+            ol.Observable.unByKey(currentListener);
+            currentListener = null;
+        }
+        
+        currentSketch = null;
+        clearTemporaryTooltips();
+        clearSegmentTooltips();
+    }
+    
+    function createMeasureTooltip(coord, text, isStatic) {
+        var elem = document.createElement('div');
+        elem.className = isStatic ? 'ol-tooltip ol-tooltip-static' : 'ol-tooltip ol-tooltip-measure';
+        elem.innerHTML = text;
+        
+        var overlay = new ol.Overlay({
+            element: elem,
+            offset: [0, -15],
+            positioning: 'bottom-center'
+        });
+        
+        overlay.setPosition(coord);
+        
+        if (map) {
+            map.addOverlay(overlay);
+        }
+        
+        return overlay;
+    }
+    
+    function formatLength(length) {
+        if (length > 1000) {
+            return (Math.round(length / 100) / 10) + ' km';
+        } else {
+            return (Math.round(length * 10) / 10) + ' m';
+        }
+    }
+    
+    function clearAllMeasureTooltips() {
+        if (!map) return;
+        
+        for (var i = 0; i < measureTooltips.length; i++) {
+            map.removeOverlay(measureTooltips[i]);
+        }
+        measureTooltips = [];
+        
+        clearTemporaryTooltips();
+    }
+    
+    function clearTemporaryTooltips() {
+        if (!map) return;
+        
+        for (var i = 0; i < currentMeasureTooltips.length; i++) {
+            map.removeOverlay(currentMeasureTooltips[i]);
+        }
+        currentMeasureTooltips = [];
+    }
+    
+    function clearSegmentTooltips() {
+        if (!map) return;
+        
+        for (var i = 0; i < segmentTooltips.length; i++) {
+            map.removeOverlay(segmentTooltips[i]);
+        }
+        segmentTooltips = [];
+    }
+    
+    function clearMeasure() {
+        if (measureSource) {
+            measureSource.clear();
+        }
+        
+        clearAllMeasureTooltips();
+        measureFeatures = [];
+        
+        if (window.layer && typeof window.layer.msg === 'function') {
+            window.layer.msg('测距标记已清除');
+        }
+        
+        // 关闭地图功能菜单
+        var menu = document.getElementById('mapFunctionsMenu');
+        if (menu) {
+            menu.classList.remove('show');
+        }
+    }
+    
+    function isActive() {
+        return measureActive;
+    }
+    
+    function getMeasureCount() {
+        return measureFeatures.length;
+    }
+    
+    return {
+        init: init,
+        toggleMeasureDistance: toggleMeasureDistance,
+        finishMeasuring: finishMeasuring,
+        clearMeasure: clearMeasure,
+        isActive: isActive,
+        getMeasureCount: getMeasureCount
+    };
+})(); 

sec-beidou/src/main/resources/static/js/device-overview-module/search-filter.js

@@ -0,0 +1,187 @@
+/**
+ * 搜索和过滤功能模块
+ * 负责设备搜索、过滤和查询功能
+ */
+var SearchFilter = (function() {
+    'use strict';
+    
+    var currentSearchedDevice = null;
+    var markerState = 3; // 1:all; 2:orange; 3:red
+    
+    function searchDevice(deviceId) {
+        if (!deviceId || !deviceId.trim()) {
+            clearSearch();
+            return false;
+        }
+        
+        deviceId = deviceId.trim();
+        currentSearchedDevice = deviceId;
+        
+        var success = DeviceMarkers.locateDevice(deviceId);
+        
+        if (success) {
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('已定位到设备: ' + deviceId);
+            }
+            
+            // 获取设备信息并显示天气预测（如果启用）
+            var targetFeature = DeviceMarkers.findDeviceById(deviceId);
+            if (targetFeature && window.WeatherForecast && window.WeatherForecast.isEnabled()) {
+                var deviceInfo = targetFeature.get('deviceInfo');
+                if (deviceInfo) {
+                    window.WeatherForecast.showWeatherForecast(deviceInfo);
+                }
+            }
+        } else {
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('未找到设备: ' + deviceId);
+            }
+        }
+        
+        return success;
+    }
+    
+    function clearSearch() {
+        currentSearchedDevice = null;
+        var searchInput = document.getElementById('deviceSearchNew');
+        if (searchInput) {
+            searchInput.value = '';
+        }
+        
+        // 恢复到当前的过滤状态
+        applyCurrentFilter();
+    }
+    
+    function applyCurrentFilter() {
+        switch(markerState) {
+            case 1:
+                showAllDevices();
+                break;
+            case 2:
+                showWarning1Devices();
+                break;
+            case 3:
+                showWarning2Devices();
+                break;
+        }
+    }
+    
+    function showAllDevices() {
+        currentSearchedDevice = null;
+        clearSearchInput();
+        DeviceMarkers.showAllDevices();
+        markerState = 1;
+        updateFilterSelect('all');
+    }
+    
+    function showWarning1Devices() {
+        currentSearchedDevice = null;
+        clearSearchInput();
+        DeviceMarkers.showWarning1Devices();
+        markerState = 2;
+        updateFilterSelect('warning1');
+    }
+    function showWarning2Devices() {
+        currentSearchedDevice = null;
+        clearSearchInput();
+        DeviceMarkers.showWarning2Devices();
+        markerState = 3;
+        updateFilterSelect('warning2');
+    }
+    function clearSearchInput() {
+        var searchInput = document.getElementById('deviceSearchNew');
+        if (searchInput) {
+            searchInput.value = '';
+        }
+    }
+    
+    function updateFilterSelect(filterValue) {
+        var filterSelect = document.getElementById('warningFilter');
+        if (filterSelect) {
+            filterSelect.value = filterValue;
+        }
+    }
+    
+    function filterDevicesByStatus(statusType) {
+        switch(statusType) {
+            case 'warning1':
+                showWarning1Devices();
+                break;
+            case 'warning2':
+                showWarning2Devices();
+                break;
+            case 'offline':
+            case 'no_fwd':
+            case 'nofixed':
+            case 'nogga':
+                // 对于这些状态，显示所有设备，让用户在弹窗中选择
+                showAllDevices();
+                break;
+            default:
+                showAllDevices();
+                break;
+        }
+    }
+    
+    function queryDevices(statusType) {
+        filterDevicesByStatus(statusType);
+        
+        // 打开设备列表弹窗
+        if (window.layer && typeof window.layer.open === 'function') {
+            var index = window.layer.open({
+                title: '设备列表',
+                type: 2,
+                shade: 0.2,
+                maxmin: true,
+                shadeClose: true,
+                anim: 2,
+                offset: 'rb',
+                area: ['100%', '50%'],
+                content: '../page/gnss_q_status?query=' + statusType,
+            });
+        }
+    }
+    
+    function locateDeviceOnMap(deviceId, latitude, longitude) {
+        currentSearchedDevice = deviceId;
+        var success = DeviceMarkers.locateDevice(deviceId);
+        
+        if (success && window.layer && typeof window.layer.closeAll === 'function') {
+            window.layer.closeAll();
+        }
+        
+        return success;
+    }
+    
+    function locateDeviceDirectly(deviceId) {
+        currentSearchedDevice = deviceId;
+        return DeviceMarkers.locateDevice(deviceId);
+    }
+    
+    function getCurrentSearchedDevice() {
+        return currentSearchedDevice;
+    }
+    
+    function getMarkerState() {
+        return markerState;
+    }
+    
+    function setMarkerState(state) {
+        markerState = state;
+    }
+    
+    return {
+        searchDevice: searchDevice,
+        clearSearch: clearSearch,
+        showAllDevices: showAllDevices,
+        showWarning1Devices: showWarning1Devices,
+        showWarning2Devices: showWarning2Devices,
+        filterDevicesByStatus: filterDevicesByStatus,
+        queryDevices: queryDevices,
+        locateDeviceOnMap: locateDeviceOnMap,
+        locateDeviceDirectly: locateDeviceDirectly,
+        getCurrentSearchedDevice: getCurrentSearchedDevice,
+        getMarkerState: getMarkerState,
+        setMarkerState: setMarkerState
+    };
+})(); 

sec-beidou/src/main/resources/static/js/device-overview-module/weather-forecast.js

@@ -0,0 +1,307 @@
+var WeatherForecast = (function() {
+    'use strict';
+    
+    var weatherApiKey = 'Uxh4IdMuAvhSiBnsf4UUDVGF4e3YAp2B';
+    var weatherEnabled = false;
+    var weatherData = null;
+    var currentForecastIndex = 0;
+    var currentWeatherDevice = null;
+    
+    function init() {
+        // 天气预报模块初始化完成
+    }
+    
+    function toggleWeatherForecast() {
+        var role = window.userRole || 'USER';
+        if (role !== 'SUPER_ADMIN') {
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('您没有权限使用此功能');
+            }
+            return; 
+        }
+        
+        var enableSwitch = document.getElementById('enableWeatherSwitch');
+        weatherEnabled = enableSwitch ? enableSwitch.checked : false;
+        
+        if (weatherEnabled) {
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg(
+                    '搜索设备或点击地图设备图标即可自动查询天气预测',
+                    {time: 3000, area: ['300px', '80px']}
+                );
+            }
+        } else {
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('天气预测功能已关闭');
+            }
+            closeWeatherCard();
+        }
+        
+        var menu = document.getElementById('mapFunctionsMenu');
+        if (menu) {
+            menu.classList.remove('show');
+        }
+    }
+    
+    function showWeatherForecast(deviceInfo) {
+        currentWeatherDevice = deviceInfo;
+        weatherData = null;
+        
+        var role = window.userRole || 'USER';
+        if (role !== 'SUPER_ADMIN') {
+            return;
+        }
+                
+        if (!weatherEnabled) {
+            if (window.layer && typeof window.layer.msg === 'function') {
+                window.layer.msg('天气预测功能未启用', {time: 2000});
+            }
+            return;
+        }
+        
+        var deviceIdElement = document.getElementById('weatherDeviceId');
+        var deviceCoordsElement = document.getElementById('weatherDeviceCoords');
+        
+        if (deviceIdElement) {
+            deviceIdElement.textContent = '设备: ' + deviceInfo.deviceid;
+        }
+        
+        if (deviceCoordsElement) {
+            deviceCoordsElement.textContent = 
+                '坐标: ' + deviceInfo.latitude.toFixed(4) + ', ' + deviceInfo.longitude.toFixed(4);
+        }
+        
+        var weatherCard = document.getElementById('weatherForecastCard');
+        if (weatherCard) {
+            weatherCard.style.display = 'block';
+        }
+        
+        var contentElement = document.getElementById('weatherForecastContent');
+        if (contentElement) {
+            contentElement.innerHTML = 
+                '<div class="weather-loading">' +
+                '<i class="layui-icon layui-icon-loading layui-icon-anim-rotate"></i>' +
+                '<p>请确保网络可访问 Windy API 服务</p>' +
+                '<p>正在获取天气预测数据...</p>' +
+                '</div>';
+        }
+        
+        var prevBtn = document.getElementById('prevForecast');
+        var nextBtn = document.getElementById('nextForecast');
+        var timeDisplay = document.getElementById('forecastTimeDisplay');
+        
+        if (prevBtn) prevBtn.disabled = true;
+        if (nextBtn) nextBtn.disabled = true;
+        if (timeDisplay) timeDisplay.textContent = '--:--';
+        
+        fetchWeatherData(deviceInfo.latitude, deviceInfo.longitude);
+    }
+    
+    function closeWeatherCard() {
+        var weatherCard = document.getElementById('weatherForecastCard');
+        if (weatherCard) {
+            weatherCard.style.display = 'none';
+        }
+        currentWeatherDevice = null;
+        weatherData = null;
+    }
+    
+    function showPrevForecast() {
+        if (!weatherData || currentForecastIndex <= 0) return;
+        
+        currentForecastIndex--;
+        displayCurrentForecast();
+        updateForecastNavigation();
+    }
+    
+    function showNextForecast() {
+        if (!weatherData || !weatherData.ts || currentForecastIndex >= weatherData.ts.length - 1) return;
+        
+        currentForecastIndex++;
+        displayCurrentForecast();
+        updateForecastNavigation();
+    }
+    
+    function updateForecastNavigation() {
+        if (!weatherData || !weatherData.ts) return;
+        
+        var prevBtn = document.getElementById('prevForecast');
+        var nextBtn = document.getElementById('nextForecast');
+        var timeDisplay = document.getElementById('forecastTimeDisplay');
+        
+        if (prevBtn) prevBtn.disabled = (currentForecastIndex <= 0);
+        if (nextBtn) nextBtn.disabled = (currentForecastIndex >= weatherData.ts.length - 1);
+        
+        if (timeDisplay) {
+            var timestamp = weatherData.ts[currentForecastIndex];
+            var date = new Date(timestamp);
+            timeDisplay.textContent = formatDateTime(date);
+        }
+    }
+
+    function fetchWeatherData(lat, lon) {
+        var requestBody = {
+            "lat": parseFloat(lat.toFixed(2)),
+            "lon": parseFloat(lon.toFixed(2)),
+            "model": "gfs",
+            "parameters": ["temp", "wind", "precip", "pressure", "rh", "windGust"],
+            "levels": ["surface"],
+            "key": weatherApiKey,
+            "hours": 72
+        };
+        
+        fetch('https://api.windy.com/api/point-forecast/v2', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        })
+        .then(function(response) {
+            if (!response.ok) {
+                throw new Error('网络响应状态: ' + response.status);
+            }
+            return response.json();
+        })
+        .then(function(data) {
+            weatherData = data;
+            
+            var currentTime = new Date().getTime();
+            var closestIndex = 0;
+            var futureIndex = -1;
+            
+            if (weatherData.ts && weatherData.ts.length > 0) {
+                for (var i = 0; i < weatherData.ts.length; i++) {
+                    if (weatherData.ts[i] > currentTime) {
+                        futureIndex = i;
+                        break;
+                    }
+                }
+                
+                if (futureIndex >= 0) {
+                    closestIndex = futureIndex;
+                } else {
+                    var smallestDiff = Number.MAX_VALUE;
+                    for (var i = 0; i < weatherData.ts.length; i++) {
+                        var diff = Math.abs(weatherData.ts[i] - currentTime);
+                        if (diff < smallestDiff) {
+                            smallestDiff = diff;
+                            closestIndex = i;
+                        }
+                    }
+                }
+            }
+            
+            currentForecastIndex = closestIndex;
+            displayCurrentForecast();
+            updateForecastNavigation();
+        })
+        .catch(function(error) {
+            console.error('天气数据获取失败:', error);
+            displayWeatherError('获取天气数据失败: ' + error.message);
+        });
+    }
+    
+    function displayCurrentForecast() {
+        if (!weatherData || !weatherData.ts || weatherData.ts.length === 0) {
+            displayWeatherError('无可用的天气预测数据');
+            return;
+        }
+        
+        var i = currentForecastIndex;
+        var forecastHtml = '<div class="weather-forecast-item"><div class="weather-param-grid">';
+        
+        if (weatherData['temp-surface'] && weatherData['temp-surface'][i] !== null) {
+            var temp = (weatherData['temp-surface'][i] - 273.15).toFixed(1);
+            forecastHtml += createWeatherParam('温度', temp + '°C');
+        }
+        
+        if (weatherData['wind_u-surface'] && weatherData['wind_v-surface'] && 
+            weatherData['wind_u-surface'][i] !== null && weatherData['wind_v-surface'][i] !== null) {
+            var windU = weatherData['wind_u-surface'][i];
+            var windV = weatherData['wind_v-surface'][i];
+            var windSpeed = Math.sqrt(windU * windU + windV * windV).toFixed(1);
+            var windDir = getWindDirection(windU, windV);
+            forecastHtml += createWeatherParam('风速', windSpeed + ' m/s');
+            forecastHtml += createWeatherParam('风向', windDir);
+        }
+        
+        if (weatherData['past3hprecip-surface'] && weatherData['past3hprecip-surface'][i] !== null) {
+            var precip = weatherData['past3hprecip-surface'][i].toFixed(1);
+            forecastHtml += createWeatherParam('降水', precip + ' mm');
+        }
+        
+        if (weatherData['rh-surface'] && weatherData['rh-surface'][i] !== null) {
+            var humidity = weatherData['rh-surface'][i].toFixed(0);
+            forecastHtml += createWeatherParam('湿度', humidity + '%');
+        }
+        
+        if (weatherData['pressure-surface'] && weatherData['pressure-surface'][i] !== null) {
+            var pressure = (weatherData['pressure-surface'][i] / 100).toFixed(0);
+            forecastHtml += createWeatherParam('气压', pressure + ' hPa');
+        }
+        
+        if (weatherData['gust-surface'] && weatherData['gust-surface'][i] !== null) {
+            var gust = weatherData['gust-surface'][i].toFixed(1);
+            forecastHtml += createWeatherParam('阵风', gust + ' m/s');
+        }
+        
+        forecastHtml += '</div></div>';
+        
+        var contentElement = document.getElementById('weatherForecastContent');
+        if (contentElement) {
+            contentElement.innerHTML = forecastHtml;
+        }
+    }
+    
+    function displayWeatherError(message) {
+        var contentElement = document.getElementById('weatherForecastContent');
+        if (contentElement) {
+            contentElement.innerHTML = 
+                '<div class="weather-error">' +
+                '<i class="layui-icon layui-icon-close"></i>' +
+                '<p>' + message + '</p>' +
+                '</div>';
+        }
+    }
+    
+    function createWeatherParam(label, value) {
+        return '<div class="weather-param">' +
+               '<span class="weather-param-label">' + label + '</span>' +
+               '<span class="weather-param-value">' + value + '</span>' +
+               '</div>';
+    }
+    
+    function formatDateTime(date) {
+        var month = (date.getMonth() + 1).toString().padStart(2, '0');
+        var day = date.getDate().toString().padStart(2, '0');
+        var hours = date.getHours().toString().padStart(2, '0');
+        var minutes = date.getMinutes().toString().padStart(2, '0');
+        
+        return month + '-' + day + ' ' + hours + ':' + minutes;
+    }
+    
+    function getWindDirection(u, v) {
+        var angle = Math.atan2(-u, -v) * 180 / Math.PI;
+        angle = (angle + 360) % 360;
+        
+        var directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北'];
+        var index = Math.round(angle / 45) % 8;
+        return directions[index];
+    }
+    
+    function isEnabled() {
+        return weatherEnabled;
+    }
+    
+    return {
+        init: init,
+        toggleWeatherForecast: toggleWeatherForecast,
+        showWeatherForecast: showWeatherForecast,
+        closeWeatherCard: closeWeatherCard,
+        showPrevForecast: showPrevForecast,
+        showNextForecast: showNextForecast,
+        isEnabled: isEnabled
+    };
+})(); 

sec-beidou/src/main/resources/static/js/device-overview.js

@@ -1,755 +0,0 @@
-(function() {
-    var map, vectorSource, vectorLayer, currentBaseLayer;
-    var greenFeatures = [], orangeFeatures = [], redFeatures = [], allFeatures = [];
-    var marker_state = 3, currentSearchedDevice = null, myLocationFeature = null, myLocationInterval;
-    var clusterSource, clusterLayer, showDeviceId = true, showCluster = true;
-    var minZoomForLabels = 4, maxZoomForClustering = 8;
-    var measureDraw, measureLayer, measureSource, measureTooltipElement, measureTooltip, sketch;
-
-    // 天地图的Key
-    var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
-    // 设备列表
-    var deviceList = window.deviceList || [];
-    var pi = 3.14159265358979324, a = 6378245.0, ee = 0.00669342162296594323;
-
-    // 判断是否超出中国，如果超出那么就不用转换坐标了
-    function outOfChina(lon, lat) {
-        return (lon < 72.004 || lon > 137.8347) && (lat < 0.8293 || lat > 55.8271);
-    }
-
-    function transformLat(x, y) {
-        var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
-        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
-        ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
-        ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
-        return ret;
-    }
-
-    function transformLon(x, y) {
-        var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
-        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
-        ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
-        ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
-        return ret;
-    }
-
-    function transform(wgLat, wgLon) {
-        var mars_point = { lon: 0, lat: 0 };
-        if (outOfChina(wgLon, wgLat)) {
-            mars_point.lat = wgLat;
-            mars_point.lon = wgLon;
-            return mars_point;
-        }
-        var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
-        var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
-        var radLat = wgLat / 180.0 * pi;
-        var magic = Math.sin(radLat);
-        magic = 1 - ee * magic * magic;
-        var sqrtMagic = Math.sqrt(magic);
-        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
-        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
-        mars_point.lat = wgLat + dLat;
-        mars_point.lon = wgLon + dLon;
-        return mars_point;
-    }
-
-    var mapLayers = {
-        amap: new ol.layer.Tile({
-            source: new ol.source.XYZ({
-                url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
-            })
-        }),
-        amap_satellite: new ol.layer.Group({
-            layers: [
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
-                    })
-                }),
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
-                    })
-                })
-            ]
-        }),
-        tianditu_satellite: new ol.layer.Group({
-            layers: [
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
-                        tileLoadFunction: tileLoadErrorHandler
-                    })
-                }),
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
-                        tileLoadFunction: tileLoadErrorHandler
-                    })
-                })
-            ]
-        }),
-        tianditu_normal: new ol.layer.Group({
-            layers: [
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
-                        tileLoadFunction: tileLoadErrorHandler
-                    })
-                }),
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
-                        tileLoadFunction: tileLoadErrorHandler
-                    })
-                })
-            ]
-        }),
-        tianditu_terrain: new ol.layer.Group({
-            layers: [
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
-                        tileLoadFunction: tileLoadErrorHandler
-                    })
-                })
-            ]
-        }),
-        tianditu_terrain_hybrid: new ol.layer.Group({
-            layers: [
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
-                        tileLoadFunction: tileLoadErrorHandler
-                    })
-                }),
-                new ol.layer.Tile({
-                    source: new ol.source.XYZ({
-                        url: 'https://t{0-7}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
-                        tileLoadFunction: tileLoadErrorHandler
-                    })
-                })
-            ]
-        })
-    };
-
-    function tileLoadErrorHandler(imageTile, src) {
-        imageTile.getImage().src = src;
-        imageTile.getImage().onerror = function() {
-            var mapTypeSelect = document.getElementById('mapTypeSelect');
-            if (mapTypeSelect.value.startsWith('tianditu_')) {
-                mapTypeSelect.value = 'amap';
-                switchMapType('amap');
-                layer.msg('天地图加载失败,已自动切换到高德地图');
-                layui.form.render('select');
-            }
-        };
-    }
-
-    function initialize() {
-        vectorSource = new ol.source.Vector();
-        vectorLayer = new ol.layer.Vector({
-            source: vectorSource,
-            style: function(feature) {
-                if (!feature.get('isMyLocation')) {
-                    var deviceInfo = feature.get('deviceInfo');
-                    var iconSrc, color = '#000';
-
-                    if (deviceInfo.warning == 2) iconSrc = '../images/loc1_red.png';
-                    else if (deviceInfo.warning == 1) iconSrc = '../images/loc1_orange.png';
-                    else iconSrc = '../images/loc1_green.png';
-
-                    var style = new ol.style.Style({
-                        image: new ol.style.Icon({ anchor: [0.5, 1], src: iconSrc, scale: 0.7 })
-                    });
-
-                    if (showDeviceId && map.getView().getZoom() >= minZoomForLabels) {
-                        style.setText(new ol.style.Text({
-                            text: deviceInfo.deviceid,
-                            offsetY: -30,
-                            fill: new ol.style.Fill({ color: color }),
-                            stroke: new ol.style.Stroke({ color: '#fff', width: 2 }),
-                            font: '12px Arial'
-                        }));
-                    }
-                    return style;
-                }
-                return null;
-            }
-        });
-
-        measureSource = new ol.source.Vector();
-        measureLayer = new ol.layer.Vector({
-            source: measureSource,
-            style: new ol.style.Style({
-                fill: new ol.style.Fill({ color: 'rgba(255,255,255,0.2)' }),
-                stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }),
-                image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) })
-            })
-        });
-
-        clusterSource = new ol.source.Cluster({ distance: 40, source: vectorSource });
-        clusterLayer = new ol.layer.Vector({
-            source: clusterSource,
-            style: function(feature) {
-                var size = feature.get('features').length;
-                return new ol.style.Style({
-                    image: new ol.style.Circle({ radius: 15, fill: new ol.style.Fill({ color: '#3399CC' }) }),
-                    text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: '#fff' }) })
-                });
-            }
-        });
-
-        var initialMapType = document.getElementById('mapTypeSelect').value;
-        currentBaseLayer = mapLayers[initialMapType];
-
-        map = new ol.Map({
-            target: 'map-container',
-            layers: [currentBaseLayer, measureLayer, clusterLayer, vectorLayer],
-            view: new ol.View({ center: ol.proj.fromLonLat([116.404, 39.915]), zoom: 7 })
-        });
-
-        var scaleLineControl = new ol.control.ScaleLine({ units: 'metric', bar: true, steps: 4, text: true, minWidth: 140 });
-        map.addControl(scaleLineControl);
-
-        function updateMapSize() {
-            map.updateSize();
-        }
-
-        setTimeout(updateMapSize, 200);
-        window.addEventListener('resize', function() {
-            setTimeout(updateMapSize, 200);
-        });
-        window.addEventListener('load', function() {
-            setTimeout(updateMapSize, 500);
-        });
-
-        var measureDistanceBtn = document.getElementById('measure-distance');
-        var clearMeasureBtn = document.getElementById('clear-measure');
-
-        measureDistanceBtn.addEventListener('click', function() {
-            this.classList.toggle('active');
-            if (this.classList.contains('active')) {
-                addMeasureInteraction();
-                document.getElementById('clear-measure').classList.remove('active');
-                    layer.msg('双击以结束测量');
-            } else {
-                map.removeInteraction(measureDraw);
-                measureSource.clear();
-                if (measureTooltipElement) measureTooltipElement.parentNode.removeChild(measureTooltipElement);
-            }
-        });
-
-        clearMeasureBtn.addEventListener('click', function() {
-            measureSource.clear();
-            if (measureTooltipElement) measureTooltipElement.parentNode.removeChild(measureTooltipElement);
-            var overlays = map.getOverlays().getArray();
-            var measureOverlays = overlays.filter(function(overlay) {
-                return overlay.getElement() && overlay.getElement().className && overlay.getElement().className.indexOf('ol-tooltip') !== -1;
-            });
-            measureOverlays.forEach(function(overlay) {
-                map.removeOverlay(overlay);
-            });
-            measureTooltipElement = null;
-            measureDistanceBtn.classList.remove('active');
-            this.classList.add('active');
-            setTimeout(function() {
-                document.getElementById('clear-measure').classList.remove('active');
-            }, 300);
-            map.removeInteraction(measureDraw);
-        });
-
-        var initialZoom = map.getView().getZoom();
-        if (showCluster && initialZoom < maxZoomForClustering) {
-            clusterLayer.setVisible(true);
-            vectorLayer.setVisible(false);
-        } else {
-            clusterLayer.setVisible(false);
-            vectorLayer.setVisible(true);
-        }
-
-        map.getView().on('change:resolution', function() {
-            var zoom = map.getView().getZoom();
-            if (showCluster) {
-                if (zoom >= maxZoomForClustering) {
-                    clusterLayer.setVisible(false);
-                    vectorLayer.setVisible(true);
-                } else {
-                    clusterLayer.setVisible(true);
-                    vectorLayer.setVisible(false);
-                }
-            }
-            vectorLayer.changed();
-        });
-
-        map.on('click', function(evt) {
-            var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
-                return feature;
-            });
-            if (feature) {
-                var features = feature.get('features');
-                if (features && features.length > 1) {
-                    var extent = vectorSource.getExtent();
-                    map.getView().fit(extent, { padding: [50, 50, 50, 50], duration: 1000 });
-                }
-            }
-        });
-
-        if (deviceList.length > 0) {
-            var centerLat = 0, centerLon = 0;
-            for (var i = 0; i < deviceList.length; i++) {
-                centerLat += deviceList[i].latitude;
-                centerLon += deviceList[i].longitude;
-            }
-            centerLat = centerLat / deviceList.length;
-            centerLon = centerLon / deviceList.length;
-            map.getView().setCenter(ol.proj.fromLonLat([centerLon, centerLat]));
-        }
-
-        addDeviceMarkers();
-        myLocation();
-        startLocationUpdates();
-    }
-
-    function switchMapType(mapType) {
-        map.removeLayer(currentBaseLayer);
-        currentBaseLayer = mapLayers[mapType];
-        map.getLayers().insertAt(0, currentBaseLayer);
-        updateMyLocationForMapType(mapType);
-        addDeviceMarkers();
-    }
-
-    function updateMyLocationForMapType(mapType) {
-        if (myLocationFeature) {
-            var originalCoords = myLocationFeature.get('originalCoords');
-            if (originalCoords) {
-                var lat = originalCoords.lat, lon = originalCoords.lon, coordinates;
-                if (mapType === 'amap' || mapType === 'amap_satellite') {
-                    var gcjCoord = transform(lat, lon);
-                    coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
-                } else {
-                    coordinates = ol.proj.fromLonLat([lon, lat]);
-                }
-                myLocationFeature.getGeometry().setCoordinates(coordinates);
-            }
-        }
-    }
-
-    function addDeviceMarkers() {
-        var savedMyLocationFeature = myLocationFeature;
-        vectorSource.clear();
-        greenFeatures = [];
-        orangeFeatures = [];
-        redFeatures = [];
-        allFeatures = [];
-
-        for (var i = 0; i < deviceList.length; i++) {
-            var device = deviceList[i];
-            var mapCoordinates;
-            var currentMapType = document.getElementById('mapTypeSelect').value;
-            if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
-                var gcjCoord = transform(device.latitude, device.longitude);
-                mapCoordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
-            } else {
-                mapCoordinates = ol.proj.fromLonLat([device.longitude, device.latitude]);
-            }
-
-            var feature = new ol.Feature({
-                geometry: new ol.geom.Point(mapCoordinates),
-                deviceInfo: device
-            });
-
-            if (device.warning == 2) redFeatures.push(feature);
-            else if (device.warning == 1) orangeFeatures.push(feature);
-            else greenFeatures.push(feature);
-
-            allFeatures.push(feature);
-            vectorSource.addFeature(feature);
-        }
-
-        if (savedMyLocationFeature) vectorSource.addFeature(savedMyLocationFeature);
-
-        if (currentSearchedDevice) {
-            filterByDeviceId(currentSearchedDevice);
-        } else {
-            if (marker_state === 2) {
-                hideGreen();
-                hideRed();
-            } else if (marker_state === 3) {
-                hideGreen();
-                hideOrange();
-            }
-        }
-        vectorLayer.changed();
-    }
-
-    function myLocation() {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(function(position) {
-                var lon = position.coords.longitude;
-                var lat = position.coords.latitude;
-                var currentMapType = document.getElementById('mapTypeSelect').value;
-                var coordinates;
-
-                if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
-                    var gcjCoord = transform(lat, lon);
-                    coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
-                } else {
-                    coordinates = ol.proj.fromLonLat([lon, lat]);
-                }
-
-                if (myLocationFeature) {
-                    vectorSource.removeFeature(myLocationFeature);
-                }
-
-                myLocationFeature = new ol.Feature({
-                    geometry: new ol.geom.Point(coordinates),
-                    isMyLocation: true,
-                    originalCoords: { lat: lat, lon: lon }
-                });
-
-                var style = new ol.style.Style({
-                    image: new ol.style.Icon({
-                        anchor: [0.5, 1],
-                        src: '../images/loc_blue.png',
-                        scale: 0.7
-                    })
-                });
-
-                myLocationFeature.setStyle(style);
-                vectorSource.addFeature(myLocationFeature);
-                map.getView().setCenter(coordinates);
-            });
-        }
-    }
-
-    function startLocationUpdates() {
-        if (myLocationInterval) {
-            clearInterval(myLocationInterval);
-        }
-        myLocationInterval = setInterval(function() {
-            myLocation();
-        }, 10 * 60 * 1000);
-    }
-
-    function showAll() {
-        document.getElementById('btn-all').classList.add('active');
-        document.getElementById('btn-warning1').classList.remove('active');
-        document.getElementById('btn-warning2').classList.remove('active');
-        document.getElementById('btn-device-locate').classList.remove('active');
-        document.getElementById('btn-device-locate').style.display = 'none';
-
-        currentSearchedDevice = null;
-        document.getElementById('deviceSearch').value = '';
-        var savedMyLocationFeature = myLocationFeature;
-        vectorSource.clear();
-
-        if (savedMyLocationFeature) {
-            vectorSource.addFeature(savedMyLocationFeature);
-        }
-        for (var i = 0; i < allFeatures.length; i++) {
-            vectorSource.addFeature(allFeatures[i]);
-        }
-        marker_state = 1;
-    }
-
-    function showWarning1() {
-        document.getElementById('btn-all').classList.remove('active');
-        document.getElementById('btn-warning1').classList.add('active');
-        document.getElementById('btn-warning2').classList.remove('active');
-        document.getElementById('btn-device-locate').classList.remove('active');
-        document.getElementById('btn-device-locate').style.display = 'none';
-
-        currentSearchedDevice = null;
-        document.getElementById('deviceSearch').value = '';
-        var savedMyLocationFeature = myLocationFeature;
-        vectorSource.clear();
-
-        if (savedMyLocationFeature) {
-            vectorSource.addFeature(savedMyLocationFeature);
-        }
-        for (var i = 0; i < allFeatures.length; i++) {
-            vectorSource.addFeature(allFeatures[i]);
-        }
-        hideGreen();
-        hideRed();
-        marker_state = 2;
-    }
-
-    function showWarning2() {
-        document.getElementById('btn-all').classList.remove('active');
-        document.getElementById('btn-warning1').classList.remove('active');
-        document.getElementById('btn-warning2').classList.add('active');
-        document.getElementById('btn-device-locate').classList.remove('active');
-        document.getElementById('btn-device-locate').style.display = 'none';
-
-        currentSearchedDevice = null;
-        document.getElementById('deviceSearch').value = '';
-        var savedMyLocationFeature = myLocationFeature;
-        vectorSource.clear();
-
-        if (savedMyLocationFeature) {
-            vectorSource.addFeature(savedMyLocationFeature);
-        }
-        for (var i = 0; i < allFeatures.length; i++) {
-            vectorSource.addFeature(allFeatures[i]);
-        }
-        hideGreen();
-        hideOrange();
-        marker_state = 3;
-    }
-
-    function showGreen() {
-        for (var i = 0; i < greenFeatures.length; i++) {
-            if (!vectorSource.hasFeature(greenFeatures[i])) {
-                vectorSource.addFeature(greenFeatures[i]);
-            }
-        }
-    }
-
-    function showOrange() {
-        for (var i = 0; i < orangeFeatures.length; i++) {
-            if (!vectorSource.hasFeature(orangeFeatures[i])) {
-                vectorSource.addFeature(orangeFeatures[i]);
-            }
-        }
-    }
-
-    function showRed() {
-        for (var i = 0; i < redFeatures.length; i++) {
-            if (!vectorSource.hasFeature(redFeatures[i])) {
-                vectorSource.addFeature(redFeatures[i]);
-            }
-        }
-    }
-
-    function hideGreen() {
-        for (var i = 0; i < greenFeatures.length; i++) {
-            vectorSource.removeFeature(greenFeatures[i]);
-        }
-    }
-
-    function hideOrange() {
-        for (var i = 0; i < orangeFeatures.length; i++) {
-            vectorSource.removeFeature(orangeFeatures[i]);
-        }
-    }
-
-    function hideRed() {
-        for (var i = 0; i < redFeatures.length; i++) {
-            vectorSource.removeFeature(redFeatures[i]);
-        }
-    }
-
-    function searchDevice() {
-        var deviceId = document.getElementById('deviceSearch').value.trim();
-        if (!deviceId) {
-            currentSearchedDevice = null;
-            vectorSource.clear();
-            for (var i = 0; i < allFeatures.length; i++) {
-                vectorSource.addFeature(allFeatures[i]);
-            }
-            if (marker_state === 2) {
-                hideGreen();
-                hideRed();
-            } else if (marker_state === 3) {
-                hideGreen();
-                hideOrange();
-            }
-            document.getElementById('btn-device-locate').style.display = 'none';
-            updateFilterButtonsState(marker_state);
-            return;
-        }
-        currentSearchedDevice = deviceId;
-        filterByDeviceId(deviceId);
-    }
-
-    function locateDeviceOnMap(deviceId, latitude, longitude) {
-        currentSearchedDevice = deviceId;
-        filterByDeviceId(deviceId);
-        layer.open({
-            title: '',
-            type: 2,
-            shade: 0.2,
-            maxmin: true,
-            shadeClose: true,
-            anim: 2,
-            offset: 'rb',
-            area: ['100%', '50%'],
-            content: '../page/gnss_q_status?query=' + deviceId
-        });
-    }
-
-    function updateFilterButtonsState(state) {
-        document.getElementById('btn-all').classList.remove('active');
-        document.getElementById('btn-warning1').classList.remove('active');
-        document.getElementById('btn-warning2').classList.remove('active');
-        if (state === 1) {
-            document.getElementById('btn-all').classList.add('active');
-        } else if (state === 2) {
-            document.getElementById('btn-warning1').classList.add('active');
-        } else if (state === 3) {
-            document.getElementById('btn-warning2').classList.add('active');
-        }
-    }
-
-    function filterByDeviceId(deviceId) {
-        var savedMyLocationFeature = myLocationFeature;
-        vectorSource.clear();
-        if (savedMyLocationFeature) {
-            vectorSource.addFeature(savedMyLocationFeature);
-        }
-        var found = false;
-        for (var i = 0; i < allFeatures.length; i++) {
-            var feature = allFeatures[i];
-            var deviceInfo = feature.get('deviceInfo');
-            if (deviceInfo && deviceInfo.deviceid.includes(deviceId)) {
-                vectorSource.addFeature(feature);
-                found = true;
-                var geometry = feature.getGeometry();
-                var deviceCoord = geometry.getCoordinates();
-                map.getView().setCenter(deviceCoord);
-                map.getView().setZoom(15);
-            }
-        }
-        if (!found) {
-            layer.msg('未找到设备: ' + deviceId);
-            if (marker_state === 1) {
-                showAll();
-            } else if (marker_state === 2) {
-                showWarning1();
-            } else if (marker_state === 3) {
-                showWarning2();
-            }
-        }
-        document.getElementById('current-device-id').textContent = deviceId;
-        document.getElementById('btn-device-locate').style.display = 'block';
-        document.getElementById('btn-device-locate').classList.add('active');
-        document.getElementById('btn-all').classList.remove('active');
-        document.getElementById('btn-warning1').classList.remove('active');
-        document.getElementById('btn-warning2').classList.remove('active');
-    }
-
-    function addMeasureInteraction() {
-        var type = 'LineString';
-        measureDraw = new ol.interaction.Draw({
-            source: measureSource,
-            type: type,
-            style: new ol.style.Style({
-                fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
-                stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.5)', lineDash: [10, 10], width: 2 }),
-                image: new ol.style.Circle({
-                    radius: 5,
-                    stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.7)' }),
-                    fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' })
-                })
-            })
-        });
-        map.addInteraction(measureDraw);
-        createMeasureTooltip();
-        var listener;
-        measureDraw.on('drawstart', function(evt) {
-            sketch = evt.feature;
-            listener = sketch.getGeometry().on('change', function(evt) {
-                var geom = evt.target;
-                var output = formatLength(geom);
-                measureTooltipElement.innerHTML = output;
-                measureTooltip.setPosition(geom.getLastCoordinate());
-            });
-        });
-        measureDraw.on('drawend', function() {
-            measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
-            measureTooltip.setOffset([0, -7]);
-            sketch = null;
-            measureTooltipElement = null;
-            createMeasureTooltip();
-            ol.Observable.unByKey(listener);
-        });
-    }
-
-    function createMeasureTooltip() {
-        if (measureTooltipElement) {
-            measureTooltipElement.parentNode.removeChild(measureTooltipElement);
-        }
-        measureTooltipElement = document.createElement('div');
-        measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
-        measureTooltip = new ol.Overlay({
-            element: measureTooltipElement,
-            offset: [0, -15],
-            positioning: 'bottom-center',
-            stopEvent: false
-        });
-        map.addOverlay(measureTooltip);
-    }
-
-    function formatLength(line) {
-        var coordinates = line.getCoordinates();
-        var length = 0;
-        for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
-            var c1 = ol.proj.transform(coordinates[i], 'EPSG:3857', 'EPSG:4326');
-            var c2 = ol.proj.transform(coordinates[i + 1], 'EPSG:3857', 'EPSG:4326');
-            length += haversineDistance(c1, c2);
-        }
-        return length > 1000 ? Math.round((length / 1000) * 100) / 100 + ' 公里' : Math.round(length * 100) / 100 + ' 米';
-    }
-
-    function haversineDistance(coord1, coord2) {
-        var R = 6371000;
-        var dLat = (coord2[1] - coord1[1]) * Math.PI / 180;
-        var dLon = (coord2[0] - coord1[0]) * Math.PI / 180;
-        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-            Math.cos(coord1[1] * Math.PI / 180) * Math.cos(coord2[1] * Math.PI / 180) *
-            Math.sin(dLon / 2) * Math.sin(dLon / 2);
-        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-        return R * c;
-    }
-
-    layui.use(['form'], function() {
-        var form = layui.form;
-        form.on('select(mapType)', function(data) {
-            switchMapType(data.value);
-        });
-        form.on('switch(showDeviceId)', function(data) {
-            showDeviceId = data.elem.checked;
-            vectorLayer.changed();
-        });
-        form.on('switch(showCluster)', function(data) {
-            showCluster = data.elem.checked;
-            var zoom = map.getView().getZoom();
-            if (showCluster) {
-                if (zoom < maxZoomForClustering) {
-                    clusterLayer.setVisible(true);
-                    vectorLayer.setVisible(false);
-                } else {
-                    clusterLayer.setVisible(false);
-                    vectorLayer.setVisible(true);
-                }
-            } else {
-                clusterLayer.setVisible(false);
-                vectorLayer.setVisible(true);
-            }
-        });
-        initialize();
-        showAll();
-    });
-
-    window.searchDevice = searchDevice;
-    window.showAll = showAll;
-    window.showWarning1 = showWarning1;
-    window.showWarning2 = showWarning2;
-    window.locateDeviceOnMap = locateDeviceOnMap;
-    window.queryDevices = function(status_type) {
-        layer.open({
-            title: '',
-            type: 2,
-            shade: 0.2,
-            maxmin: true,
-            shadeClose: true,
-            anim: 2,
-            offset: 'rb',
-            area: ['100%', '50%'],
-            content: '../page/gnss_q_status?query=' + status_type
-        });
-    };
-
-})();