diff --git a/sec-beidou/src/main/resources/static/js/device-overview-module/device-markers.js b/sec-beidou/src/main/resources/static/js/device-overview-module/device-markers.js index 09fe1e13..afe1912b 100644 --- a/sec-beidou/src/main/resources/static/js/device-overview-module/device-markers.js +++ b/sec-beidou/src/main/resources/static/js/device-overview-module/device-markers.js @@ -276,12 +276,12 @@ var DeviceMarkers = (function() { }); vectorSource.addFeature(myLocationFeature); - - map.getView().animate({ - center: coordinates, - zoom: 15, - duration: 1000 - }); + + // map.getView().animate({ + // center: coordinates, + // zoom: 15, + // duration: 1000 + // }); }, function(error) { console.error('获取位置失败:', error); @@ -289,6 +289,50 @@ var DeviceMarkers = (function() { ); } } + + function locateMyLocation() { + if (myLocationFeature) { + var geometry = myLocationFeature.getGeometry(); + var coordinates = geometry.getCoordinates(); + + map.getView().animate({ + center: coordinates, + zoom: 15, + duration: 1000 + }); + return true; + } else { + 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 + }); + }, + ); + } + } + return false; + } function startLocationUpdates() { @@ -350,6 +394,7 @@ var DeviceMarkers = (function() { findDeviceById: findDeviceById, locateDevice: locateDevice, getMyLocation: getMyLocation, + locateMyLocation: locateMyLocation, startLocationUpdates: startLocationUpdates, stopLocationUpdates: stopLocationUpdates, updateMyLocationForMapType: updateMyLocationForMapType, diff --git a/sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js b/sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js index d05d6b07..295db851 100644 --- a/sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js +++ b/sec-beidou/src/main/resources/static/js/device-overview-module/device-overview-main.js @@ -91,6 +91,10 @@ var DeviceOverview = (function() { return MapCore.switchMapType(mapType); } + function locateMyLocation() { + return DeviceMarkers.locateMyLocation(); + } + return { init: init, @@ -102,6 +106,7 @@ var DeviceOverview = (function() { queryDevices: queryDevices, locateDeviceOnMap: locateDeviceOnMap, locateDeviceDirectly: locateDeviceDirectly, + locateMyLocation: locateMyLocation, toggleMapFunctionsMenu: toggleMapFunctionsMenu, toggleDeviceId: toggleDeviceId, @@ -134,4 +139,5 @@ window.showPrevForecast = DeviceOverview.showPrevForecast; window.showNextForecast = DeviceOverview.showNextForecast; window.queryDevices = DeviceOverview.queryDevices; window.locateDeviceOnMap = DeviceOverview.locateDeviceOnMap; -window.locateDeviceDirectly = DeviceOverview.locateDeviceDirectly; \ No newline at end of file +window.locateDeviceDirectly = DeviceOverview.locateDeviceDirectly; +window.locateMyLocation = DeviceOverview.locateMyLocation; \ No newline at end of file diff --git a/sec-beidou/src/main/resources/static/js/device-overview-module/map-core.js b/sec-beidou/src/main/resources/static/js/device-overview-module/map-core.js index 7ff00747..030999ac 100644 --- a/sec-beidou/src/main/resources/static/js/device-overview-module/map-core.js +++ b/sec-beidou/src/main/resources/static/js/device-overview-module/map-core.js @@ -88,10 +88,9 @@ var MapCore = (function() { if (deviceList && deviceList.length > 0) { setCenterFromDevices(deviceList); + DeviceMarkers.addDeviceMarkers(deviceList); } - DeviceMarkers.addDeviceMarkers(deviceList); - DeviceMarkers.getMyLocation(); DeviceMarkers.startLocationUpdates(); @@ -212,21 +211,13 @@ var MapCore = (function() { 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 sumLat = 0, sumLon = 0; + for (var i = 0; i < deviceList.length; i++) { + sumLat += deviceList[i].latitude; + sumLon += deviceList[i].longitude; } - - var centerLat = (minLat + maxLat) / 2; - var centerLon = (minLon + maxLon) / 2; + var centerLat = sumLat / deviceList.length; + var centerLon = sumLon / deviceList.length; map.getView().setCenter(ol.proj.fromLonLat([centerLon, centerLat])); } @@ -237,15 +228,22 @@ var MapCore = (function() { return; } + // 保存当前视图状态 + var currentCenter = map.getView().getCenter(); + var currentZoom = map.getView().getZoom(); + map.removeLayer(currentBaseLayer); currentBaseLayer = MapLayers.getLayer(mapType); map.getLayers().insertAt(0, currentBaseLayer); DeviceMarkers.updateMyLocationForMapType(mapType); - - // 重新获取设备列表并添加标记 + var deviceList = window.deviceList || []; DeviceMarkers.addDeviceMarkers(deviceList); + + // 恢复之前的视图状态 + map.getView().setCenter(currentCenter); + map.getView().setZoom(currentZoom); } function toggleDeviceId() { 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 f9512543..31714f41 100644 --- a/sec-beidou/src/main/resources/templates/page/device_overview.html +++ b/sec-beidou/src/main/resources/templates/page/device_overview.html @@ -935,13 +935,16 @@