diff --git a/sec-beidou/src/main/resources/templates/page/device_overview.html b/sec-beidou/src/main/resources/templates/page/device_overview.html
index 29ac597a..cc6e1453 100644
--- a/sec-beidou/src/main/resources/templates/page/device_overview.html
+++ b/sec-beidou/src/main/resources/templates/page/device_overview.html
@@ -23,7 +23,7 @@
             display: flex;
             flex-direction: column;
         }
-        
+
         .stats-panel > .layui-card-body {
             height: auto;
             min-height: 60px;
@@ -32,7 +32,7 @@
             flex-direction: column;
             justify-content: center;
         }
-        
+
         .top-panel-number {
             font-size: 30px;
             border-right: 1px solid #eceff9;
@@ -56,9 +56,9 @@
             display: flex;
             flex-direction: column;
         }
-        .stats-panel .layui-col-xs3 a, 
+        .stats-panel .layui-col-xs3 a,
         .stats-panel .layui-col-md4 a,
-        .stats-panel .layui-col-xs3 div a, 
+        .stats-panel .layui-col-xs3 div a,
         .stats-panel .layui-col-md4 div a {
             display: block;
             margin-bottom: 2px;
@@ -69,22 +69,18 @@
         }
         .btn-wrap {
             z-index: 999;
-            position: absolute;
-            bottom: 20px;
-            right: 20px;
-            padding: 10px;
-            border-radius: 4px;
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            width: auto;
+            position: fixed;
+            bottom: 2rem;
+            margin-left: 1rem;
+            padding: .5rem .5rem;
+            border-radius: .25rem;
+            background-color: #fff;
+            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
         }
         .btn {
-            width: auto;
-            min-width: 75px;
+            width: 75px;
             height: 30px;
+            float: left;
             background-color: #fff;
             color: rgba(27, 142, 236, 1);
             font-size: 14px;
@@ -95,20 +91,44 @@
             line-height: 30px;
             cursor: pointer;
             transition: all 0.3s ease;
-            float: none;
-            display: inline-block;
         }
         .btn:hover, .btn.active {
             background-color: rgba(27, 142, 236, 0.8);
             color: #fff;
         }
-        #map-container {
-            height: 75vh;
-            width: 100%;
-            padding:0px;
+        /* 页面布局优化 */
+        
+        .layuimini-main {
+            height: calc(100vh - 40px);
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .map-wrapper {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
             position: relative;
+        }
+        
+        .map-card {
+            flex: 1;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            border: 1px solid #e6e8eb;
+            display: flex;
+            flex-direction: column;
             overflow: hidden;
         }
+        
+        #map-container {
+            flex: 1;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            position: relative;
+        }
         .map-control-card {
             position: absolute;
             top: 10px;
@@ -169,122 +189,153 @@
             border-radius: 6px;
         }
 
+        /* 设备总览条样式 */
+        .device-overview-bar {
+            background: white;
+            border: 1px solid #e6e8eb;
+            border-radius: 6px;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+            padding: 10px 15px;
+            margin-bottom: 10px;
+            color: #333;
+        }
+        
+        .overview-stats {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            align-items: center;
+        }
+        
+        .stat-item {
+            display: flex;
+            align-items: center;
+            /* background: #f8f9fa;
+            border: 1px solid #e9ecef; */
+            border-radius: 4px;
+            padding: 5px 10px;
+            min-width: 85px;
+            transition: background-color 0.2s ease;
+            cursor: pointer;
+            height: 28px;
+        }
+        
+        .stat-item:hover {
+            background: #e9ecef;
+        }
+        
+        .stat-item.non-clickable {
+            cursor: default;
+        }
+        
+        .stat-item.non-clickable:hover {
+            background: #f8f9fa;
+        }
+        
+        .stat-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            margin-right: 6px;
+            flex-shrink: 0;
+        }
+        
+        .dot-green { background-color: #48bb78; }
+        .dot-blue { background-color: #4299e1; }
+        .dot-gray { background-color: #a0aec0; }
+        .dot-orange { background-color: #ed8936; }
+        .dot-red { background-color: #f56565; }
+        .dot-yellow { background-color: #ecc94b; }
+        
+        .stat-item span:nth-child(2) {
+            font-size: 12px;
+            color: #666;
+            margin-right: 4px;
+            white-space: nowrap;
+        }
+        
+        .stat-number {
+            font-size: 13px;
+            font-weight: bold;
+            color: #333;
+        }
+
         @media screen and (max-width: 768px) {
+            .layuimini-main {
+                height: calc(100vh - 20px);
+                height: calc(100dvh - 20px); /* 动态视口高度，支持移动端 */
+                overflow: hidden;
+            }
+            
+            .map-wrapper {
+                flex: 1;
+                overflow: hidden;
+            }
+            
+            .map-card {
+                margin: 8px;
+                height: calc(100% - 16px);
+                overflow: hidden;
+            }
+            
+            #map-container {
+                height: 100%;
+                overflow: hidden;
+            }
+            
             .map-control-card {
                 position: static;
                 display: block;
                 margin-bottom: 1em;
-                width: 100%;
-                box-sizing: border-box;
             }
             
-            #map-container {
-                height: 75vh!important; 
-                min-height: 300px;
+            .device-overview-bar {
+                padding: 8px 12px;
+                margin-bottom: 8px;
+                flex-shrink: 0;
+            }
+            
+            .overview-stats {
+                gap: 4px;
+                flex-wrap: wrap;
+            }
+            
+            .stat-item {
+                flex: 0 0 auto;
+                min-width: auto;
+                width: auto;
+                max-width: calc(33.33% - 3px);
+                padding: 3px 6px;
+                font-size: 10px;
+                height: 20px;
+                white-space: nowrap;
                 overflow: hidden;
-                position: relative;
+                text-overflow: ellipsis;
             }
             
-            .ol-viewport, 
-            .ol-layers, 
-            .ol-layer {
-                height: 100% !important;
+            .stat-item span:not(.stat-dot):not(.stat-number) {
+                display: none;
+            }
+            
+            .stat-dot {
+                width: 4px;
+                height: 4px;
+                margin-right: 3px;
+                flex-shrink: 0;
+            }
+            
+            .stat-number {
+                font-size: 11px;
+                font-weight: bold;
             }
             
             .btn-wrap {
                 position: static;
-                margin: 10px auto;
-                width: 100%;
-                justify-content: center;
-                box-sizing: border-box;
+                margin: 0;
+                padding: 8px;
+                margin-bottom: 8px;
+                flex-shrink: 0;
             }
-            
-            .btn {
-                margin-bottom: 5px;
-                font-size: 12px;
-                padding: 0 5px;
-            }
-            
-            .measure-buttons {
-                display: flex;
-                justify-content: space-between;
-            }
-            
-            .search-box input {
-                height: 36px;
-            }
-            
-            .search-box button {
-                height: 36px;
-                width: 60px;
-            }
-        }
-
-        .measure-buttons {
-            margin-top: 10px;
-            display: flex;
-            gap: 5px;
-        }
-        
-        .ol-scale-line {
-            position: absolute;
-            bottom: 8px;
-            left: 8px;
-            background: rgba(255, 255, 255, 0.8);
-            padding: 5px;
-            border-radius: 4px;
-        }
-        
-        .ol-scale-line-inner {
-            border: 1px solid #000;
-            border-top: none;
-            color: #000;
-            font-size: 12px;
-            text-align: center;
-            margin: 1px;
-            padding: 0px 2px;
-        }
-        
-        .ol-scale-container {
-            display: none;
-        }
-
-        .ol-tooltip {
-            position: relative;
-            background: rgba(0, 0, 0, 0.7);
-            border-radius: 4px;
-            color: white;
-            padding: 6px 10px;
-            opacity: 0.9;
-            white-space: nowrap;
-            font-size: 14px;
-            pointer-events: none;
-            font-weight: bold;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-        }
-        .ol-tooltip-measure {
-            opacity: 1;
-            font-weight: bold;
-        }
-        .ol-tooltip-static {
-            background-color: #ffcc33;
-            color: black;
-            border: 1px solid white;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-        }
-        .ol-tooltip-measure:before,
-        .ol-tooltip-static:before {
-            border-top: 6px solid rgba(0, 0, 0, 0.7);
-            border-right: 6px solid transparent;
-            border-left: 6px solid transparent;
-            content: "";
-            position: absolute;
-            bottom: -6px;
-            margin-left: -7px;
-            left: 50%;
-        }
-        .ol-tooltip-static:before {
-            border-top-color: #ffcc33;
         }
     </style>
 
@@ -294,47 +345,61 @@
 <body>
 <div class="layuimini-main">
 
-    <div class="layui-row layui-col-space30 flex-row" style="margin-bottom: 0.5em;">
-        <div class="layui-col-xs12 layui-col-md6">
-            <div class="layui-card top-panel stats-panel">
-                <div class="layui-card-header">设备数量</div>
-                <div class="layui-card-body">
-                    <div class="layui-row layui-col-space5">
-                        <div class="layui-col-xs9 layui-col-md8 top-panel-number">
-                            <a style="color: #1aa094" th:text="${deviceOnlineNum}">2,020</a><br>
-                        </div>
-                        <div class="layui-col-xs3 layui-col-md4">
-                            <a href="#" onclick="queryDevices('offline')" style="color: #bd3004" th:text="'掉线数 '+${deviceOfflineNum}">0</a>
-                            <div th:if="${deviceNoFwdNum>0}"><a href="#" onclick="queryDevices('no_fwd')" style="color: #bd3004" th:text="'未推送数 '+${deviceNoFwdNum}">0</a></div>
-                            <div th:if="${noFix>0}"><a href="#" onclick="queryDevices('nofixed')" style="color: #bd3004" th:text="'长期无效解 '+${noFix}">0</a></div>
-                            <a style="color: #000000" th:text="'装机量 '+${deviceDeployedNum}">2020</a>
-                        </div>
-                    </div>
-                </div>
+    <!-- 设备总览条 -->
+    <div class="device-overview-bar">
+        <div class="overview-stats">
+            <div class="stat-item non-clickable">
+                <span class="stat-dot dot-green"></span>
+                <span>设备数量</span>
+                <span class="stat-number" th:text="${deviceOnlineNum}">1101</span>
             </div>
-        </div>
-        <div class="layui-col-xs12 layui-col-md6">
-            <div class="layui-card top-panel stats-panel">
-                <div class="layui-card-header">告警统计</div>
-                <div class="layui-card-body">
-                    <div class="layui-row layui-col-space5">
-                        <div class="layui-col-xs9 layui-col-md8 top-panel-number">
-                            <a style="color: #f6c102" th:text="${warningTotalNum}">20</a><br>
-                        </div>
-                        <div class="layui-col-xs3 layui-col-md4">
-                            <a href="#" onclick="queryDevices('warning2')" style="color: #bd3004" th:text="'严重 '+${warning2Num}">5</a>
-                            <a href="#" onclick="queryDevices('warning1')" style="color: #f6c102" th:text="'一般 '+${warning1Num}">20</a>
-                            <div th:if="${noGGA>0}"><a href="#" onclick="queryDevices('nogga')" style="color: #e7be1d" th:text="'无GGA '+${noGGA}">0</a></div>
-                        </div>
-                    </div>
-                </div>
+            <div class="stat-item non-clickable">
+                <span class="stat-dot dot-blue"></span>
+                <span>装机量</span>
+                <span class="stat-number" th:text="${deviceDeployedNum}">1123</span>
+            </div>
+            <div class="stat-item" onclick="queryDevices('offline')" th:if="${deviceOfflineNum > 0}">
+                <span class="stat-dot dot-gray"></span>
+                <span>掉线数</span>
+                <span class="stat-number" th:text="${deviceOfflineNum}">22</span>
+            </div>
+            <div class="stat-item" onclick="queryDevices('no_fwd')" th:if="${deviceNoFwdNum > 0}">
+                <span class="stat-dot dot-orange"></span>
+                <span>未推送数</span>
+                <span class="stat-number" th:text="${deviceNoFwdNum}">11</span>
+            </div>
+            <div class="stat-item" onclick="queryDevices('nofixed')" th:if="${noFix > 0}">
+                <span class="stat-dot dot-red"></span>
+                <span>长期无效解</span>
+                <span class="stat-number" th:text="${noFix}">10</span>
+            </div>
+            <div class="stat-item" onclick="queryDevices('warning2')" th:if="${warning2Num > 0}">
+                <span class="stat-dot dot-red"></span>
+                <span>严重告警</span>
+                <span class="stat-number" th:text="${warning2Num}">40</span>
+            </div>
+            <div class="stat-item" onclick="queryDevices('warning1')" th:if="${warning1Num > 0}">
+                <span class="stat-dot dot-orange"></span>
+                <span>一般告警</span>
+                <span class="stat-number" th:text="${warning1Num}">79</span>
+            </div>
+            <div class="stat-item" onclick="queryDevices('nogga')" th:if="${noGGA > 0}">
+                <span class="stat-dot dot-gray"></span>
+                <span>无GGA告警</span>
+                <span class="stat-number" th:text="${noGGA}">4</span>
             </div>
         </div>
     </div>
 
-    <div class="layui-row layui-col-space15">
-        <div class="layui-card top-panel">
-            <div id="map-container" class="layui-card-body">
+    <div class="map-wrapper">
+        <div class="map-card">
+            <ul class="btn-wrap" style="z-index: 99;">
+                <li class="light btn" id="btn-all" onclick="showAll()">全部</li>
+                <li class="night btn" id="btn-warning1" onclick="showWarning1()">一般告警</li>
+                <li class="night btn active" id="btn-warning2" onclick="showWarning2()">严重告警</li>
+                <li class="night btn" id="btn-device-locate" style="display: none; min-width: 120px;"> 设备定位: <span id="current-device-id"></span> </li>
+            </ul>
+            <div id="map-container">
                 <div class="map-control-card">
                     <div class="map-controls">
                         <form class="layui-form">
@@ -354,7 +419,6 @@
                         <input type="text" id="deviceSearch" placeholder="输入设备编号搜索">
                         <button onclick="searchDevice()">搜索</button>
                     </div>
-                    
                     <div class="switch-box">
                         <form class="layui-form">
                             <div class="layui-form-item" style="margin-bottom: 0;">
@@ -363,29 +427,821 @@
                             </div>
                         </form>
                     </div>
-
                 </div>
-                <ul class="btn-wrap">
-                    <li class="light btn" id="btn-all" onclick="showAll()">全部</li>
-                    <li class="night btn" id="btn-warning1" onclick="showWarning1()">一般告警</li>
-                    <li class="night btn active" id="btn-warning2" onclick="showWarning2()">严重告警</li>
-                    <li class="night btn" id="btn-device-locate" style="display: none; min-width: 120px;"> 设备定位: <span id="current-device-id"></span> </li>
-                    <li class="night btn" id="measure-distance">测距</li>
-                    <li class="night btn" id="clear-measure">清除</li>
-                </ul>
             </div>
         </div>
     </div>
 
 </div>
 
-<script th:inline="javascript">
-    window.deviceList = [[${deviceList}]];
-</script>
-
-<script src="../js/ol.js"></script>
 <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
-<script src="../js/device-overview.js"></script>
+
+<script th:inline="javascript">
+    var map;
+    var vectorSource;
+    var vectorLayer;
+    var currentBaseLayer;
+    var greenFeatures = [];
+    var orangeFeatures = [];
+    var redFeatures = [];
+    var marker_state = 3; // 1:all; 2:orange; 3:red
+    var allFeatures = []; // 存储所有设备标记，用于搜索功能
+    var currentSearchedDevice = null; // 当前搜索的设备ID
+    var myLocationFeature = null; // 存储"我的位置"标记
+    var myLocationInterval; // 存储定时更新位置的interval对象
+    var clusterSource;
+    var clusterLayer;
+    var showDeviceId = true;
+    var showCluster = true;
+    var minZoomForLabels = 4;
+    var maxZoomForClustering = 8;
+
+    // 天地图 API 密钥（fengyarnom@gmail.com）
+    var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
+
+    var deviceList = [
+        [# th:each="device : ${deviceList}"]
+    {
+        deviceid: [[${device.deviceid}]],
+            latitude: [[${device.latitude}]],
+        longitude: [[${device.longitude}]],
+        warning: [[${device.warning}]]
+    },
+    [/]
+    ];
+
+    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;
+    }
+
+    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: function(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');
+                                }
+                            };
+                        }
+                    })
+                }),
+                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: function(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');
+                                }
+                            };
+                        }
+                    })
+                })
+            ]
+        }),
+        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: function(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');
+                                }
+                            };
+                        }
+                    })
+                }),
+                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: function(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');
+                                }
+                            };
+                        }
+                    })
+                })
+            ]
+        }),
+        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: function(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');
+                                }
+                            };
+                        }
+                    })
+                })
+            ]
+        }),
+        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: function(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');
+                                }
+                            };
+                        }
+                    })
+                }),
+                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: function(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;
+                    var 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
+                        })
+                    });
+
+                    // 根据缩放级别和设置决定是否显示设备ID
+                    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;
+            }
+        });
+
+        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('mapTypeSelect').value;
+        currentBaseLayer = mapLayers[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
+            })
+        });
+
+        // 设置初始可见性状态
+        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;
+            var 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;
+                var lon = originalCoords.lon;
+                var coordinates;
+
+                if (mapType === 'amap' || mapType === 'amap_satellite') {
+                    // 高德地图使用GCJ-02坐标系，需要转换
+                    var gcjCoord = transform(lat, lon);
+                    coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
+                } else {
+                    // 天地图使用CGCS2000/WGS84坐标系，直接使用
+                    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') {
+                // 高德地图  WGS84 转换为 GCJ-02
+                var gcjCoord = transform(device.latitude, device.longitude);
+                mapCoordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
+            } else {
+                // 天地图 CGCS2000，2000国家大地坐标系，与WGS84实质一样
+                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') {
+                    // 高德地图使用GCJ-02坐标系，需要转换
+                    var gcjCoord = transform(lat, lon);
+                    coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
+                } else {
+                    // 天地图使用CGCS2000/WGS84坐标系，直接使用
+                    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); // 10 min = 10 * 60 * 1000ms
+    }
+
+    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);
+
+        var layerIndex = layer.index;
+        layer.close(layerIndex);
+
+        layer.msg('已定位到设备: ' + 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');
+    }
+    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;
+            if (showCluster) {
+                var zoom = map.getView().getZoom();
+                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();
+    });
+
+    function queryDevices(status_type) {
+        var index = 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,
+        });
+    }
+</script>
 
 </body>
 </html>
\ No newline at end of file