Moin,
der Weihnachtsstreß (in Form auch von Geschenken…) hat mir doch etwas die Zeit geraubt, aber nun wünsche ich erstmal:
Frohe Weihnachten!
Nun gut, kommen wir nun also zum Code zurück.
Die Zeile 67 gelöscht und map.on hinzugefügt sowie Überarbeitung des ,Einrückens".
Sowie von Openlayer v4.6.3 auf v4.6.4 geupdatet.
Karte wird mit dem Marker und der Linie angezeigt.
Nun sieht es so aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Christian Thal">
<meta name="keywords" lang="de" content="Schienenpost, Post, Schiene, Startseite">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="Startseite.css">
<title>Schienenpost - Die Startseite</title>
<link rel="stylesheet" href="http://www.schienenpost.de/v4.6.4/css/ol.css" type="text/css">
<script src="http://www.schienenpost.de/v4.6.4/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Schienenpost - Startseite</h1>
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="Login.html">Login</a></li>
<li><a href="FAQ.html">FAQ</a></li>
<li><a href="Kontaktseite.html">Kontakt</a></li>
<li><a href="Update.html">Update</a></li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
</nav>
<div id="map" class="map"><div id="popup"></div></div>
<script>
var logoElement = document.createElement('a');
logoElement.href = 'http://www.schienenpost.de/';
logoElement.target = '_blank';
var logoImage = document.createElement('img');
logoImage.src = 'http://www.schienenpost.de/schienenpost.png';
logoElement.appendChild(logoImage);
var scaleLineControl = new ol.control.ScaleLine();
var iconFeature = new ol.Feature({
//geometry: new ol.geom.Point([0, 0]),
geometry: new ol.geom.Point(ol.proj.transform([9.855, 53.315], "EPSG:4326", "EPSG:3857")),
name: 'Bahnhof',
});
var coordinates = [[9.855, 53.315], [9.856, 53.315], [9.869, 53.284], [9.798, 53.110]];
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coordinates).transform("EPSG:4326", "EPSG:3857"),
name: 'Strecke'
})]
}),
style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 1.0],
src: 'http://www.schienenpost.de/marker/marker.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -50]
});
var map = new ol.Map({
controls: ol.control.defaults()
.extend([
new ol.control.OverviewMap(),
new ol.control.FullScreen(),
scaleLineControl
]),
//target 'map',
target: document.getElementById('map'),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'Marker',
source: new ol.source.Vector({
//features: iconFeatures, //array mit mehreren Elementen
features: [iconFeature], //einzelnes Element
})
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([10.627, 53.620]),
zoom: 8
}),
logo: logoElement
});
map.addOverlay(popup);
map.addLayer(layerLines);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
var clickpoint = map.getCoordinateFromPixel(evt.pixel);
if (!isNaN(coordinates[0])) { // Punkt
popup.setPosition(coordinates);
} else if (!isNaN(coordinates[0][0])) { // Linie
popup.setPosition(clickpoint);
} else { // kein brauchbares feature
$(element).popover('destroy');
return;
}
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('name')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
map.on('pointermove', function(e) {
if (e.dragging) {
$(element).popover('destroy');
return;
}
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
Dabei fallen mir jetzt mehr fragen ein:
Ein zweiter Marker wäre hilfreich (am anderen Ende), sähe auch besser aus.
Die kleinen ,Pop-up-Fensterchen" sind wohl nicht auf Mitte getrimmt der Linie wie kann man dort den Fehler beseitigen
(Auf der Linie öffnet sich das Fenster, aber es sieht etwas seitlich verrutscht aus)?
Kann das Fensterchen vom Marker mit dem Fensterchen der Linie komplett verknüpft werden
(sodaß nur noch ein Fensterchen angezeigt wird, anstatt zwei)?
Wie können die Geocoordinaten am besten ausgelagert werden mit der Beschreibung im ,Fensterchen" in eine seperate Datei?
Und zum Schluss:
Gibt es hilfreiche Tipps zum Einrücken und worauf ich achten sollte, oder kommt es am Ende auf den jeweiligen Betrachter an, wie schön er dieses findet
(das es hilfreich ist, zumindest wo das Ende und der Anfang ist, ist schon gut)?
So und jetzt noch zum Schluß:
Gruß
Thal