maps update
This commit is contained in:
Ivan
parent
119bc39c9a
commit
f6557a5950
GPG Key ID:
0C191B86D9582583
@ -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 {
|
||||
|
||||
@ -6,9 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Трансляция</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
|
||||
<script src="https://unpkg.com/ol-mapbox-style@9.4.0/dist/olms.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -347,46 +346,15 @@
|
||||
|
||||
<script>
|
||||
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
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);
|
||||
}
|
||||
});
|
||||
var map = L.map('map').setView([59.855198, 30.282995], 10);
|
||||
|
||||
// Скрыть информационную панель
|
||||
map.getControls().forEach(function(control) {
|
||||
if (control instanceof ol.control.Attribution) {
|
||||
map.removeControl(control);
|
||||
}
|
||||
});
|
||||
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map);
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", "../scripts/style.json", true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
var customStyle = JSON.parse(xhr.responseText);
|
||||
map.zoomControl.remove();
|
||||
|
||||
map.getLayers().forEach(function(layer) {
|
||||
layer.setStyle(customStyle.layers[0].paint);
|
||||
});
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
map.attributionControl.remove();
|
||||
|
||||
const markers = [];
|
||||
let markers = [];
|
||||
{{#if ifDBError}}
|
||||
{{else}}
|
||||
|
||||
@ -409,41 +377,39 @@ const selectedDevices = Array.from(checkboxes)
|
||||
function addMarker(device) {
|
||||
const { serial, status, longitude, latitude, direction, speed } = device;
|
||||
|
||||
const markerElement = document.createElement('div');
|
||||
markerElement.className = 'marker';
|
||||
console.log(serial, status, longitude, latitude, direction, speed)
|
||||
console.log("Trying add marker")
|
||||
|
||||
|
||||
if (serial === $("input[name=camera-serial]:checked").val()) {
|
||||
markerElement.innerHTML = `
|
||||
<div class="marker-name active-${status}">${serial}</div>
|
||||
var marker = L.divIcon({
|
||||
className: 'marker',
|
||||
html: `<div class="marker-name active-${status}">${serial}</div>
|
||||
<svg class="active-${status}" id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
|
||||
<path fill="#FF6A4B" d="M12.669 24.673c6.565 0 12-5.435 12-12 0-6.553-5.447-12-12.012-12C6.104.673.67 6.12.67 12.673c0 6.565 5.447 12 12 12Z"/>
|
||||
<path fill="#fff" fill-opacity=".85" d="m7.104 17.92 4.683-11.93c.33-.823 1.423-.846 1.753-.023l4.682 11.953c.318.788-.553 1.47-1.294.73l-3.953-3.953c-.188-.2-.424-.2-.612 0L8.41 18.65c-.753.74-1.623.059-1.306-.73Z"/>
|
||||
</svg>
|
||||
`;
|
||||
</svg>`
|
||||
});
|
||||
} else {
|
||||
markerElement.innerHTML = `
|
||||
<div class="marker-name active-${status}">${serial}</div>
|
||||
var marker = L.divIcon({
|
||||
className: 'marker',
|
||||
html: `<div class="marker-name active-${status}">${serial}</div>
|
||||
<svg class="active-${status}" id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
|
||||
<path d="M12.9815 25.0195C19.5462 25.0336 24.9931 19.6101 25.0073 13.0454C25.0214 6.49253 19.5861 1.03375 13.0214 1.01961C6.46848 1.00549 1.02147 6.44081 1.00735 12.9937C0.993201 19.5584 6.42852 25.0054 12.9815 25.0195Z" fill="#8086F9"/>
|
||||
<path d="M7.43175 18.2547L12.1398 6.33536C12.471 5.51254 13.5652 5.49137 13.8928 6.31561L18.5493 18.2786C18.8653 19.0675 17.9932 19.748 17.2537 19.0052L13.3092 15.0438C13.1215 14.8434 12.8862 14.8429 12.6975 15.0425L8.73605 18.9868C7.98152 19.7264 7.1124 19.0422 7.43175 18.2547Z" fill="white" fill-opacity="0.85"/>
|
||||
</svg>
|
||||
`;
|
||||
</svg>`
|
||||
});
|
||||
}
|
||||
|
||||
const marker = new ol.Overlay({
|
||||
position: ol.proj.fromLonLat([longitude, latitude]),
|
||||
positioning: 'center-center',
|
||||
element: markerElement,
|
||||
stopEvent: false
|
||||
});
|
||||
|
||||
map.addOverlay(marker);
|
||||
markers.push(marker);
|
||||
var markerObj = L.marker([latitude, longitude], { icon: marker });
|
||||
markerObj.addTo(map);
|
||||
markers.push(markerObj);
|
||||
}
|
||||
|
||||
function clearMarkers() {
|
||||
markers.forEach(marker => map.removeOverlay(marker));
|
||||
markers.length = 0;
|
||||
}
|
||||
markers.forEach(marker => map.removeLayer(marker));
|
||||
markers = [];
|
||||
}
|
||||
|
||||
function fetchAndShowMarkers() {
|
||||
console.log(selectedDevices);
|
||||
@ -460,6 +426,7 @@ const selectedDevices = Array.from(checkboxes)
|
||||
clearMarkers();
|
||||
data.devicesData.forEach(device => {
|
||||
addMarker(device);
|
||||
console.log(device);
|
||||
});
|
||||
|
||||
// Поиск устройства с выбранным серийным номером
|
||||
@ -506,6 +473,7 @@ const selectedDevices = Array.from(checkboxes)
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
// Скрытие/Показ дополнительных меню аккаунта
|
||||
const accountMain = document.getElementById('account-main');
|
||||
@ -528,90 +496,6 @@ const selectedDevices = Array.from(checkboxes)
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var checkboxes = document.querySelectorAll('.organisation .checkbox-input');
|
||||
|
||||
checkboxes.forEach((checkbox) => {
|
||||
applyFilterAndSearch();
|
||||
checkbox.addEventListener('change', function() {
|
||||
document.querySelector('#device-all').checked = false;
|
||||
applyFilterAndSearch();
|
||||
const devices = this.parentNode.querySelector('.area-devices');
|
||||
if (this.checked) {
|
||||
devices.style.display = 'block';
|
||||
|
||||
// Активируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = true;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
} else {
|
||||
devices.style.display = 'none';
|
||||
applyFilterAndSearch();
|
||||
|
||||
// Деактивируем дочерние чекбоксы
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
}
|
||||
|
||||
// Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
|
||||
if (!this.checked) {
|
||||
const childCheckboxes = devices.querySelectorAll('.device-filter');
|
||||
childCheckboxes.forEach((childCheckbox) => {
|
||||
childCheckbox.checked = false;
|
||||
applyFilterAndSearch();
|
||||
});
|
||||
devices.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
var table = document.querySelector('#deviceTable');
|
||||
var tableCheckboxAll = table.querySelector('#device-all');
|
||||
var tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
|
||||
tableCheckboxAll.addEventListener('click', function(event) {
|
||||
table = document.querySelector('#deviceTable');
|
||||
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
if (tableCheckboxAll.checked) {
|
||||
tableCheckboxes.forEach((tableCheckbox) => {
|
||||
tableCheckbox.checked = true;
|
||||
});
|
||||
} else {
|
||||
tableCheckboxes.forEach((tableCheckbox) => {
|
||||
tableCheckbox.checked = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#deviceTable').click( function(event) {
|
||||
table = document.querySelector('#deviceTable');
|
||||
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
|
||||
|
||||
|
||||
for (var i = 0; i < tableCheckboxes.length; i++) {
|
||||
tableCheckboxes[i].addEventListener('click', function(event) {
|
||||
for (var j = 0; j < tableCheckboxes.length; j++) {
|
||||
if (!tableCheckboxes[j].checked || tableCheckboxes[j].disabled) {
|
||||
tableCheckboxAll.checked = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
tableCheckboxAll.checked = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Получаем ссылки на элементы
|
||||
const videoContainers = document.querySelectorAll('.stream-video-container video');
|
||||
|
||||
@ -6,13 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Отчёт {{Id}}</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
|
||||
<script src="https://unpkg.com/ol-mapbox-style@9.4.0/dist/olms.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js'></script>
|
||||
<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@ -6,9 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Записи</title>
|
||||
<link rel="stylesheet" href="../styles/main.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
|
||||
<script src="https://unpkg.com/ol-mapbox-style@9.4.0/dist/olms.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -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: '<div style="background-color: red; width: 14px; height: 14px; border: 2px solid white; border-radius: 50%;"></div>'
|
||||
})
|
||||
}).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: '<div style="background-color: red; width: 14px; height: 14px; border: 2px solid white; border-radius: 50%;"></div>'
|
||||
})
|
||||
}).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();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user