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();