From f6557a5950ebaa80aec84dda0b0a747e8ecea503 Mon Sep 17 00:00:00 2001 From: Ivan Date: Tue, 22 Aug 2023 18:29:23 +0300 Subject: [PATCH] maps update --- static/styles/main.css | 12 +- static/templates/live.html | 174 +++++---------------------- static/templates/reports/report.html | 5 - static/templates/videos/see.html | 172 +++++++------------------- 4 files changed, 84 insertions(+), 279 deletions(-) diff --git a/static/styles/main.css b/static/styles/main.css index e96edb2..ffa2612 100644 --- a/static/styles/main.css +++ b/static/styles/main.css @@ -1610,7 +1610,7 @@ input[type="datetime-local"] { position: absolute; bottom: 0; right: 0; - + z-index: 2 !important; } .map { @@ -1674,6 +1674,16 @@ input[type="datetime-local"] { margin-left: -40%; margin-bottom: 3px; font-weight: bold; + font-size: 14px !important; +} + +.marker { + cursor: grab !important; +} + +.leaflet-marker-icon { + width: auto !important; + height: auto !important; } .stream-cameras { diff --git a/static/templates/live.html b/static/templates/live.html index 5b20d8f..a6bdc02 100644 --- a/static/templates/live.html +++ b/static/templates/live.html @@ -6,9 +6,8 @@ Трансляция - - - + + @@ -347,46 +346,15 @@ + - - - - - - - diff --git a/static/templates/videos/see.html b/static/templates/videos/see.html index a2b2017..5b36cab 100644 --- a/static/templates/videos/see.html +++ b/static/templates/videos/see.html @@ -6,9 +6,8 @@ Записи - - - + + @@ -348,68 +347,32 @@ function sendPostRequest() { }, }); - routeLayer.getSource().clear(); - markerLayer.getSource().clear(); const geoData = data.geo; - const routePoints = geoData.map((point) => { - return ol.proj.fromLonLat([point.longitude, point.latitude]); - }); + // Очищаем все слои на карте +map.eachLayer(layer => { + if (layer !== map) { + map.removeLayer(layer); + } +}); - const routeFeature = new ol.Feature({ - geometry: new ol.geom.LineString(routePoints), - }); - routeFeature.setStyle(routeStyle); +// Добавляем слой с плитками OpenStreetMap +L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map); - routeLayer.getSource().addFeature(routeFeature); +// Создаем слой для маршрута +const routeLayer = L.layerGroup().addTo(map); - const startMarker = new ol.Feature({ - geometry: new ol.geom.Point(routePoints[0]), - }); - startMarker.setStyle(markerStyle); +// Создаем слой для маркеров +const markerLayer = L.layerGroup().addTo(map); - const endMarker = new ol.Feature({ - geometry: new ol.geom.Point(routePoints[routePoints.length - 1]), - }); - endMarker.setStyle(markerStyle); +// Преобразуем координаты точек маршрута +const routePoints = geoData.map(point => [point.latitude, point.longitude]); - markerLayer.getSource().addFeatures([startMarker, endMarker]); +// Создаем линию маршрута +const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLayer); - const mapElement = document.getElementById("map"); - const map = new ol.Map({ - target: null, - layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM(), - }), - markerLayer, - routeLayer, - ], - view: new ol.View({ - center: ol.proj.fromLonLat([30.282995, 59.855198]), - zoom: 10 - }), - }); - - map.getLayers().clear(); - - map.setTarget(mapElement); - - // Скрыть кнопки приближения/отдаления - map.getControls().forEach(function (control) { - if (control instanceof ol.control.Zoom) { - map.removeControl(control); - } - }); - - // Скрыть информационную панель - map.getControls().forEach(function (control) { - if (control instanceof ol.control.Attribution) { - map.removeControl(control); - } - }); }) .catch((error) => { @@ -571,87 +534,40 @@ function playVideo(channel) { mapArea.style.width = (mapContainer.clientWidth) + 'px'; }); - var startPoint = ol.proj.fromLonLat([0, 0]); -var endPoint = ol.proj.fromLonLat([0, 0]); + var startPoint = [0, 0]; + var endPoint = [0, 0]; -var routeStyle = new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: 'red', - width: 6 - }) -}); + let map; -var markerStyle = new ol.style.Style({ - image: new ol.style.Circle({ - radius: 7, - fill: new ol.style.Fill({ - color: 'red' - }), - stroke: new ol.style.Stroke({ - color: 'white', - width: 2 - }) - }) -}); + // Создаем карту Leaflet + map = L.map('map').setView([59.855198, 30.282995], 10); -var routeSource = new ol.source.Vector({ - features: [ - new ol.Feature({ - geometry: new ol.geom.LineString([startPoint, endPoint]) - }) - ] -}); + // Добавляем базовый слой OpenStreetMap + L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map); -var routeLayer = new ol.layer.Vector({ - source: routeSource, - style: routeStyle -}); + // Создаем маркеры + var startMarker = L.marker(startPoint, { + icon: L.divIcon({ + className: 'custom-icon', + html: '
' + }) + }).addTo(map); -var startMarker = new ol.Feature({ - geometry: new ol.geom.Point(startPoint) -}); -startMarker.setStyle(markerStyle); + var endMarker = L.marker(endPoint, { + icon: L.divIcon({ + className: 'custom-icon', + html: '
' + }) + }).addTo(map); -var endMarker = new ol.Feature({ - geometry: new ol.geom.Point(endPoint) -}); -endMarker.setStyle(markerStyle); + // Создаем линию маршрута + var route = L.polyline([startPoint, endPoint], { color: 'red', weight: 6 }).addTo(map); -var markerSource = new ol.source.Vector({ - features: [startMarker, endMarker] -}); + // Скрыть кнопки приближения/отдаления + map.zoomControl.remove(); -var markerLayer = new ol.layer.Vector({ - source: markerSource -}); - var map = new ol.Map({ - target: 'map', - layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM() - }), - markerLayer, - routeLayer, - ], - view: new ol.View({ - center: ol.proj.fromLonLat([30.282995, 59.855198]), - zoom: 10 - }) - }); - - // Скрыть кнопки приближения/отдаления -map.getControls().forEach(function(control) { - if (control instanceof ol.control.Zoom) { - map.removeControl(control); - } -}); - -// Скрыть информационную панель -map.getControls().forEach(function(control) { - if (control instanceof ol.control.Attribution) { - map.removeControl(control); - } -}); + // Скрыть информационную панель + map.attributionControl.remove();