feat: 新增谷歌地图

sec-beidou/src/main/resources/templates/page/device_overview.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
     <link rel="stylesheet" href="../css/public.css" media="all">
     <link rel="stylesheet" href="../css/ol.css">
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEBxB5n9vikPHbfNMzo_dzneXJi77YqjE" async defer></script>
     <style>
         .top-panel {
             border: 1px solid #eceff9;
@@ -583,6 +584,10 @@
                             <option value="tianditu_terrain">天地图-地形</option>
                             <option value="amap_satellite">高德-卫星影像</option>
                             <option value="amap">高德-矢量</option>
+                            <option value="google_satellite" th:if="${role=='SUPER_ADMIN'}">谷歌-卫星影像</option>
+                            <option value="google_terrain" th:if="${role=='SUPER_ADMIN'}">谷歌-地形图</option>
+                            <option value="google_roadmap" th:if="${role=='SUPER_ADMIN'}">谷歌-道路图</option>
+                            <option value="google_hybrid" th:if="${role=='SUPER_ADMIN'}">谷歌-混合</option>
                         </select>
                     </div>
 
@@ -756,6 +761,30 @@
                 })
             ]
         }),
+        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({
@@ -1099,6 +1128,9 @@
                     // 高德地图使用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]);
@@ -1127,6 +1159,9 @@
                 // 高德地图  WGS84 转换为 GCJ-02
                 var gcjCoord = transform(device.latitude, device.longitude);
                 mapCoordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
+            } else if (currentMapType.startsWith('google_')) {
+                // Google地图使用WGS84坐标系，直接使用
+                mapCoordinates = ol.proj.fromLonLat([device.longitude, device.latitude]);
             } else {
                 // 天地图 CGCS2000，2000国家大地坐标系，与WGS84实质一样
                 mapCoordinates = ol.proj.fromLonLat([device.longitude, device.latitude]);
@@ -1173,6 +1208,14 @@
 
     function onMapTypeChange() {
         var mapType = document.getElementById('mapTypeSelectNew').value;
+        
+        // 检查用户权限，如果不是SUPER_ADMIN但尝试使用Google地图，则阻止并提示
+        if(mapType.startsWith('google_') && [[${role}]] != "SUPER_ADMIN") {
+            layer.msg('您没有权限使用谷歌地图服务');
+            document.getElementById('mapTypeSelectNew').value = 'tianditu_terrain_hybrid';
+            mapType = 'tianditu_terrain_hybrid';
+        }
+        
         switchMapType(mapType);
     }
 
@@ -1198,13 +1241,16 @@
             navigator.geolocation.getCurrentPosition(function(position) {
                 var lon = position.coords.longitude;
                 var lat = position.coords.latitude;
-                var currentMapType = document.getElementById('mapTypeSelect').value;
+                var currentMapType = document.getElementById('mapTypeSelectNew').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 if (currentMapType.startsWith('google_')) {
+                    // Google地图使用WGS84坐标系，直接使用
+                    coordinates = ol.proj.fromLonLat([lon, lat]);
                 } else {
                     // 天地图使用CGCS2000/WGS84坐标系，直接使用
                     coordinates = ol.proj.fromLonLat([lon, lat]);