Moin axelr,
dein Wissen ist ja ziehmlich hilfreich.
Nun beantworte ich paar Kleinigkeiten:
Das Update mit Openlayers führe ich immer durch, durch ein Update verbessert sich eventuell der Code, bzw. es dient auch gleichzeitig zum Lückenschliessen von Fehlern.
Aber ist schon interessant, das der Programmcode auch unter der Version 3.19.1 läuft.
Ich habe die Nadel über dem Sollpunkt angepasst (wusste ich vorher nicht), Sollpunkt ist für mich wichtig, daher offset: [0,-0]
Ich bin gespannt auf den zweiten Marker, aber kann man nicht die Endpunkte des Line-Strings automatisch mit den Marker besetzten?
Natürlich ohne Umweg über Koordinaten für die beiden Marker (Endkoordinaten werden dann eher ausgelesen aus dem Line-String), so würde ich denken.
Komisch, in den beiden Fensterchen steht etwas unterschiedliches, beides gleich wäre etwas besser.
Mir scheint auch .geojson auf den Blick in die Zukunft die richtige Wahl zu sein.
Ich habe immer ja noch das eine Problemchen:
Ich fahre samstags regelmäßig von Suerhop nach Schneverdingen (und dort weiter mit dem Bus 105, nach Neuenkirchen), gleiche Uhrzeit und gleicher Zug, tja, da kann ich doch auch ein Brief oder Postkarte oder Packet mitnehmen, tja dies ist der Gedanke der sich dahinter verbirgt.
Programmierkenntnisse, bißchen von HTML und CSS leicht vorhanden, Java bzw. Scripte eher wohl nicht.
Daher ist eine Integration später in eine Datenbank sehr wertvoll mit:
Linie, Endpunkten/ Anfangspunkt, Beschreibung was mitgenommen wird (Packet, Brief, Postkarte), eventuell Preis (eher Server kostendeckend mal zu betreiben, Programmierer wäre schön, aber ich rechne eher mit einer geringen Nachfrage), Kontaktmöglichkeit.
Dies sind wohl momentan die weiteren Zukunftswünsche, natürlich muß eine zweite Bearbeitungskarte vorhanden sein, inder man auch alles nach einem Login bearbeiten kann.
Also noch einiges vor, aber Stück für Stück wird es doch jetzt schon interessanter auch für andere die eventuell Marker und Line-Strings einsetzen möchten.
Als Editor verwende ich:
gedit (Mein Betriebssystem ist Ubuntu, kein Windows), ist sehr einfach gehalten und sehr platzsparend, dort wird auch wenigstens farbliche Unterschiede gemacht (HTML und CSS sehr gut, Scripte auch).
Sprichwörtlich rücke ich auch dann von Hand ein…
Nun kommt der jetzige Code:
<!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="http://www.schienenpost.de/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="http://www.schienenpost.de/bootstrap.min.css">
<script src="http://www.schienenpost.de/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, -0]
});
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().data('bs.popover').options.content = feature.get('name');
$(element).popover('show');
} else {
$(element).popover('hide');
}
});
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>
Ich habe auch mal die anderen Links beim laden angepasst - dies ist ja besser für die anderen Server.
So nun wünsche ich aber allen auch den Lesenden mal einen guten Rutsch ins neue Jahr.
Gruß
Thal