maps update
This commit is contained in:
Ivan
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user