Ich fang mal hinten an. Für das Einrücken wird es wohl irgendwelche Werkzeuge geben, ich nutze einen normalen Editor und Rücke von Hand ein. Ein Editor, der schließende Klammer zu öffnender Klammer anzeigt ist sinnvoll.
Geokoordinaten auslagern geht als .gpx .kml .scv .txt .geojson , was am besten ist hängt von Datenmenge und Gestaltungsanforderungen ab. Ich habe mit gpx angefangen, um Daten vom Garmin oder Datenlogger sichtbar machen zu können. Bei den meist mitgelieferten Editoren zu gpx werden allerdings nach Änderungen viel zu große Dateien erzeugt.
In deinem Fall würde ich bezüglich Linien .geojson für die Zukunft ins Auge fassen. Farbe, Breite, Name, Title, Description können direkt im Datensatz angegeben werden.
Bezüglich Punkten teste ich derzeit selbst andere Wege. Bisher war .scv das angesagte Format, scheint aber aus der Mode zu kommen, bei .geojosm kocht jeder sein eigenes Süppchen bei den Styles.
Bleib zunaechst mal bei der direkten Angabe im Programmcode.
Zwei Fensterchen gleichzeitig sehe ich nicht, du meinst wahrscheinlich das unter #21 am Ende erwähnte Problem. Im Popup wird der falsche Text dargestellt.
Ich habe dazu etwas rumprobiert. Zwischen jquery, bootstrap und deinem Programmcode gibt es irgendein Timing-Problem
– der Eine ist noch nicht fertig, während der Andere den nächsten Schritt ausführt –
Man kann solche Probleme durch Rückmeldungen lösen oder das Problem vemeiden.
Ich würde das Problem umschiffen, indem der Text direkt an den richtigen Speicherplatz geschrieben wird:
statt
‘content’: feature.get(‘name’)
setze hinter der schließenden Klammer
$(element).popover().data(‘bs.popover’).options.content = feature.get(‘name’);
Damit können auch alle destroy-Anweisungen zu hide-Anweisungen reduziert werden.
Die Funktion map.on(‘click’…); sieht dann so aus:
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('hide');
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');
}
});
Zum zweiten Marker später.
Du verwendest eine Nadel und ordnest das Popup-Fensterchen mit Abstand über dem Sollpunkt (unterer Punkt der Nadel) an
offset: [0, -50]
Ich bevorzuge die Anordnung unter der Nadel, da dann die Spitze der Nadel und der Hinweispfeil auf den gleichen Punkt verweisen können, ohne sich gegenseitig zu verdecken. Muster:
http://www.roeltgen.com/vergleichspunkte/bilder4ol.html
Letzter Punkt openlayers muss nicht dauernd geupdatet werden. Dein Programmcode läuft unter Version 3.19.1 genauso gut wie unter der aktuellen Version 4.6.4
Frohes Fest