reports map update
This commit is contained in:
Ivan
parent
f9a19ec312
commit
f46aebb877
GPG Key ID:
0C191B86D9582583
@ -1626,7 +1626,7 @@ input[type="datetime-local"] {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 29px;
|
/* border-radius: 29px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.properties {
|
.properties {
|
||||||
|
|||||||
@ -9,6 +9,10 @@
|
|||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/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://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>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@ -184,98 +188,46 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var prevLongitude = {{PrevLongitude}};
|
||||||
|
var prevLatitude = {{PrevLatitude}};
|
||||||
|
var nextLongitude = {{NextLongitude}};
|
||||||
|
var nextLatitude = {{NextLatitude}};
|
||||||
|
|
||||||
<script>
|
var startPoint = [prevLatitude, prevLongitude];
|
||||||
|
var endPoint = [nextLatitude, nextLongitude];
|
||||||
|
|
||||||
var prevLongitude = {{PrevLongitude}};
|
var map = L.map('map').setView(startPoint, 17);
|
||||||
var prevLatitude = {{PrevLatitude}};
|
|
||||||
var nextLongitude = {{NextLongitude}};
|
|
||||||
var nextLatitude = {{NextLatitude}};
|
|
||||||
|
|
||||||
var startPoint = ol.proj.fromLonLat([prevLongitude, prevLatitude]);
|
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.png').addTo(map);
|
||||||
var endPoint = ol.proj.fromLonLat([nextLongitude, nextLatitude]);
|
|
||||||
|
|
||||||
var routeStyle = new ol.style.Style({
|
var routeStyle = {
|
||||||
stroke: new ol.style.Stroke({
|
|
||||||
color: 'red',
|
color: 'red',
|
||||||
width: 6
|
weight: 6
|
||||||
})
|
};
|
||||||
});
|
|
||||||
|
|
||||||
var markerStyle = new ol.style.Style({
|
var routeCoordinates = [startPoint, endPoint];
|
||||||
image: new ol.style.Circle({
|
var route = L.polyline(routeCoordinates, routeStyle).addTo(map);
|
||||||
|
|
||||||
|
var markerStyle = {
|
||||||
radius: 7,
|
radius: 7,
|
||||||
fill: new ol.style.Fill({
|
fillColor: 'red',
|
||||||
color: 'red'
|
|
||||||
}),
|
|
||||||
stroke: new ol.style.Stroke({
|
|
||||||
color: 'white',
|
color: 'white',
|
||||||
width: 2
|
weight: 2,
|
||||||
})
|
opacity: 1,
|
||||||
})
|
fillOpacity: 1
|
||||||
});
|
};
|
||||||
|
|
||||||
var routeSource = new ol.source.Vector({
|
var startMarker = L.circleMarker(startPoint, markerStyle).addTo(map);
|
||||||
features: [
|
var endMarker = L.circleMarker(endPoint, markerStyle).addTo(map);
|
||||||
new ol.Feature({
|
|
||||||
geometry: new ol.geom.LineString([startPoint, endPoint])
|
|
||||||
})
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
var routeLayer = new ol.layer.Vector({
|
// Убрать кнопки приближения/отдаления
|
||||||
source: routeSource,
|
map.zoomControl.remove();
|
||||||
style: routeStyle
|
|
||||||
});
|
|
||||||
|
|
||||||
var startMarker = new ol.Feature({
|
// Убрать информационную панель
|
||||||
geometry: new ol.geom.Point(startPoint)
|
map.attributionControl.remove();
|
||||||
});
|
</script>
|
||||||
startMarker.setStyle(markerStyle);
|
|
||||||
|
|
||||||
var endMarker = new ol.Feature({
|
|
||||||
geometry: new ol.geom.Point(endPoint)
|
|
||||||
});
|
|
||||||
endMarker.setStyle(markerStyle);
|
|
||||||
|
|
||||||
var markerSource = new ol.source.Vector({
|
|
||||||
features: [startMarker, endMarker]
|
|
||||||
});
|
|
||||||
|
|
||||||
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([prevLongitude, prevLatitude]),
|
|
||||||
zoom: 14
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
// Скрыть кнопки приближения/отдаления
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user