OpenStreetMap Forum

The Free Wiki World Map

You are not logged in.

Announcement

A fix has been applied to the login system for the forums - if you have trouble logging in please contact support@openstreetmap.org with both your forum username and your OpenStreetMap username so we can make sure your accounts are properly linked.

#26 2017-12-19 01:24:44

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Der zweite code-Schnipsel aus #21 gehört in die Funktion map.on('click'...
Du hast ihn hinter die Funktion geschrieben.

Die Funktion map.on('click'...); sollte so aussehen:

      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');
        }
      });

und Kopierfehler beseitigen:
Zeile 67 raus (var coordinates = feature.getGeometry().getCoordinates();)

Vielleicht solltes du dir selbst ein Weihnachtsgeschenk machen, in dem du das Einrücken deines Codes überarbeitest.

Offline

#27 2017-12-24 14:06:47

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

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

Offline

#28 2017-12-25 12:40:14

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

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

Last edited by axelr (2017-12-25 13:59:59)

Offline

#29 2017-12-31 11:10:17

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

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

Offline

#30 2017-12-31 18:04:21

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Das update sollte man wohl regelmäßig durchführen, es ist aber bei dir nicht vordringlich.
Meist sind Erweiterungen enthalten, die man anwenden könnte, selten ist der Programmcode anzupassen.
Von 3.17.1 nach 3.19.1 ist die Verwendbarkeit von Farben verbessert.
von 3. nach 4. hat sich erkennbar nur die Darstellung der Polregion geändert,
mit der angekündigten Version 5. (nach 4.6.4) ändert sich etwas bei der Compilierung.

Falls du dein Popup-Fenster unter dem Punkt anordnen willst:
in Zeile 133
         'placement': 'button',      statt   'placement': 'top',

Die mehrfachen Marker hatte ich unter #17 schon mal beschrieben.
Bisher nutzt du ein Feature, welches als einziges Element einer Liste übergeben wird.
    features: [iconFeature],
Bei mehreren Markern erzeugt man eine leere Liste
  var iconFeatures = [];
dann füllt man das erste Element hinein
  var iconFeature = ...
  iconFeatures.push(iconFeature);
dann das zweite Element
  iconFeature = ...
  iconFeatures.push(iconFeature);
usw. Dann übergibt man die Liste
    features: iconFeatures,

Die Sache mit der Strecke:
Du kannst von jeder Strecke Anfangs- und Endpunkt mit einen Marker versehen.
Diese mit dem richtigen Stationsnamen zu versehen, erfordert mehr Aufwand.

Die Strecke wird in einer Liste von Koordinaten erfasst
  [ [x0,y0],[x1,y1],[x2,y2],...,[xn,yn] ]
und bekommt einen Namen
  "Suerhop nach Schneverdingen"
Du kannst auf die erste und die letzte Koordinate dieser Liste zugreifen.
Du kannst auch als dritte oder vierte Ausprägung die Zeit aufnehmen.
Üblicherweise werden bei track-Aufzeichnungen [x,y,z,M] genutzt mit z als Höhe und M als Aufzeichnungszeit.
Es geht auch [x,y,M] , zum Format von M muß ich mich nochmal Klug machen.

konkret im Programm (ohne Zeitangabe)
statt Zeile 41 bis 47 (var  iconFeature =... bis var coordinates = ...)
neu:

      var i,iconFeature,iconFeatures=[],coordinates,nameLine; 
      coordinates = [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]; 
      nameLine = "Suerhop nach Schneverdingen"; 
      i = 0; 
      iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'Start '+nameLine,
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature);
      i = coordinates.length - 1; 
      iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'End '+nameLine,
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature);

alte Zeile 53 (name:nameLine) statt (name:'Strecke')
alte Zeile 66 (iconFeature.setStyle(iconStyle);) raus
alte Zeile 101 aktivieren   (iconFeatures)
alte Zeile 102 deaktivieren ([iconFeature])
Die Funktion       var iconStyle = new ol.style.Style({...}); nach oben verschieben (vor Zeile 39)

Dann müßte die Kartenanzeige für eine Strecke ungefähr passen.

Guten Rutsch

Offline

#31 2018-01-01 20:01:24

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin,

also Pop-up-Fensterchen hatte ich mal ausprobiert, aber gefiel mir nicht so
('placement': 'button',      statt   'placement': 'top').

Strecke (von Zeile 41 - 47) gemacht, Karte wurde angezeigt.
Zeile 53 geändert, Karte wurde angezeigt.
Zeile 66 raus, Karte wurde angezeigt.
Die Zeile 101 aktivieren, Karte nicht getestet
Die Zeile 102 deaktivieren, Karte nicht getestet.
Zeilenverschub vor die Zeile 39, Karte wird nicht angezeigt.

Was bewirkt eigentlich wenn man:
i = 0;
stattdessen:
i = coordinates.length - 0;
oder ist beides richtig?

Irgendwo liegt ein Fehler vor, der 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 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'
        }))
      });

      var scaleLineControl = new ol.control.ScaleLine();
      
      var i,iconFeature,iconFeatures=[],coordinates,nameLine; 
      coordinates = [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]; 
      nameLine = "Suerhop nach Schneverdingen"; 
      i = coordinates.length - 0; 
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'Start '+nameLine,
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature);
      i = coordinates.length - 1; 
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'End '+nameLine,
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature); 

      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: 'nameLine'
        })]
        }),
         style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
      });

      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({
         (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>

Gruß

Thal

Offline

#32 2018-01-02 00:05:06

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Zeile 109 bis 110 ersetzen durch
         features:(iconFeatures)
Zeile 70 ohne Apostroph.

Mit i = 0; greifst du auf das erste Element im array zu,
mit i = coordinates.length - 0; greifst du hinter das letzte Element, was zu einem Fehler führt.
In javascript läuft der Index von 0 bis (length-1)

Offline

#33 2018-01-02 10:02:53

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin,

die Karte läuft:

<!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 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'
        }))
      });

      var scaleLineControl = new ol.control.ScaleLine();
      
      var i,iconFeature,iconFeatures=[],coordinates,nameLine; 
      coordinates = [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]; 
      nameLine = "Suerhop nach Schneverdingen"; 
      i = 0; 
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'Start '+nameLine,
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature);
      i = coordinates.length - 1; 
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'End '+nameLine,
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature);

      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: nameLine
        })]
        }),
         style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
      });

      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: (iconFeatures), //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 doch über geojson auch bei Openlayer etwas interessantes gefunden:
http://openlayers.org/en/latest/example … l?q=source

Da kann wohl auch eine Verlinkung auf eine Datei geojson erfolgen.
Aber wie ist der Aufbau einer .geojson-Datei?
Bei einer txt-Datei wird ja in der ersten Zeile beschrieben was für Einteilungen vorhanden sind:

lat	lon	title	description	icon	iconSize	iconOffset

Dann erst werden die nachfolgenden Abschnitte hinzugefügt, bzw. der ,,Schlüssel" in der ersten Zeile, weiß genau, welche Zuordnung vorhanden ist:

53.0381069602731	9.708722233772278	<h3>Bahnhof Neuenkirchen</h3>	<h2>Dieser Bahnhof ist Endpunkt der Bahnstrecke.<br><a href="Neuenkirchen.html">Bilder und Fahrpläne</a><br><a href="Geschichte.html">Geschichte</a></h2>  	Kreuz.png	24,24	0,-24
53.023154002972	9.7383713722229	<h3>Haltestelle Gilmerdingen</h3>	<h2>Diese Haltestelle wurde auch ,,Gilmerdingen HBF" genannt.<br><a href="Gilmerdingen.html">Bilder und Fahrpläne</a><br><a href="Geschichte.html">Geschichte</a></h2>  	Kreuz.png	24,24	0,-24

Wie wird aber eine .geojson-Datei geschrieben, deren Aufbau?

Gruß

Thal

Offline

#34 2018-01-02 11:07:01

kartler175
Member
Registered: 2012-09-10
Posts: 213

Re: Openlayer V4.5.0: Marker hinzufügen

thal1982 wrote:

Wie wird aber eine .geojson-Datei geschrieben, deren Aufbau?

Eigentlich nicht so schwer zu finden:

https://de.wikipedia.org/wiki/GeoJSON (als Einstieg).

Offline

#35 2018-01-02 13:04:29

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin kartler175,
also im ersten Schritt würde ich dann so es ,,befülen":

{ "type": "LineString",
    "coordinates": 
  [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]];
  "nameLine":
  Suerhop nach Schneverdingen;
  "color:" red;
  "width:" 3;
}

Da gibt es mit Sicherheit noch mehr Beispiele.
Irgendwie muß dann ja es auch Verknüpft und ausgelesen werden können.
Interessant, das durch keine Vordefinition nur in einer Anfangszeile, doch trotzdem es übersichtlich wirkt, auf den ersten Blick.

Gruß

Thal

Offline

#36 2018-01-02 13:55:47

kartler175
Member
Registered: 2012-09-10
Posts: 213

Re: Openlayer V4.5.0: Marker hinzufügen

So einfach ist das doch wieder nicht.

"LineString" ist der "geometry"-Teil eines "Feature". Dazu kommt noch der "properties"-Teil. Dort hinein gehört eine Liste mit Eigenschaften des "Feature".

Ein oder mehrere "Feature" werden in einer "features"-Liste zusammegefasst, die in eine "FeatureCollection" gepackt wird.

Das ist in kurzen Worten, was im verlinkten Beispiel gezeigt wird. Das auf deine Anwendungsfall zu übertragen, überlass ich jetzt einmal dir.

Zum ausprobieren: http://geojson.io/#map=6/50.092/7.075

Offline

#37 2018-01-02 16:06:38

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Bei den styles in .geojosm kocht jeder sein eigenes Süppchen. Die von kartler175 beschriebenen styles beziehen sich nach meinem Kenntnisstand nur auf den mapbox-Symbolkatalog.

Offline

#38 2018-01-02 16:43:14

kartler175
Member
Registered: 2012-09-10
Posts: 213

Re: Openlayer V4.5.0: Marker hinzufügen

axelr wrote:

Bei den styles in .geojosm kocht jeder sein eigenes Süppchen. Die von kartler175 beschriebenen styles beziehen sich nach meinem Kenntnisstand nur auf den mapbox-Symbolkatalog.

Das GeoJSON-Format hat ja auch mit der Darstellung nichts zu tun und kennt keine styles, sondern ist ein Format zur Beschreibung und zum Austausch von Geo-Objekten. Die "properties"-Liste kann beliebige Schlüssel-Werte-Paare enthalten. Wie diese Werte interpretiert und ausgegeben werden, ist Angelegenheit der Darstellungsoftware, sei es Openlayer, Leaflet oder jedes beliebige Javascript-Skript. geojson.io verwendet z.B. die Properties "stroke" für die Linienfarbe und "stroke-width" für die Linienstärke.

Offline

#39 2018-01-03 13:05:25

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin,

ach, also die ,,Darstellungssoftware" muß geeignete ,,Schlüssel" vorfinden in der Datei, die auch durch die ,,Darstellungssoftware" interpretierbar sind?

Mit Darstellungssoftware meinte ich jetzt Openlayer, Leaflet, etc..

Was gilt denn dann bei Openlayer als interpretierbar?
Gibt es auch ein Openlayer-Symbolkatalog (das lange Wort hatte ich auch bei der ,,Suche" eingegeben, nichts brauchbares)?

Also nach dem ersten durchschauen würde ich dann erstmal so sagen:

{ "type": "LineString",
    "coordinates": 
  [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]],
  "nameLine":
  Suerhop nach Schneverdingen,
  "color:"
  red,
  "width:"
  3,
}

Mal ; in , geändert, scheint überall gleich zu sein.
Rein theoretisch müsste ja dann die Farbe und die Breite heraus genommen werden, da die Styles immer das gleiche definieren würden (nur im jetzigen Fall, später mehr), dann würde es nur noch so aussehen:

{ "type": "LineString",
    "coordinates": 
  [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]],
  "nameLine":
  Suerhop nach Schneverdingen,
}

,,nameLine" würde ja wohl nicht zu den Styles zählen, oder?

Aber wie geht es weiter?

Gruß

Thal

Offline

#40 2018-01-03 16:57:04

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Bezüglich deines example in #33 solltest du dich eher am http://openlayers.org/en/latest/examples/geojson.html orientieren.

Der .geojson Datensatz steht üblicherweise in einer externen Datei mit Endung .geojson oder .json .
Er kann auch in javascript direkt angegeben werden, siehe example
    var geojsonObject = { ... };
Besonderheit bei json ist aus meiner Sicht: Es darf kein abschließendes Komma hinter der letzten Angabe gesetzt werden und alle Textangaben erfolgen in Anführungszeichen.

Im zweiten Codeschnipsel #39 fehlt das Schlüsselwort properties und name sollte auch name heissen. Das nameLine ist ein Variablenname in deinem Programm. Der Datensatz, den du aus deinen Eingaben erzeugen musst sollte im Kern wie folgt aussehen:

{ "type": "Feature",
   "geometry":{"type": "LineString",
     "coordinates":  [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]
   },
   "properties":{"name": "Suerhop nach Schneverdingen"}
}

Zum Symbolkatalog: Mir ist bei openlayers kein Standard-Katalog bekannt, eine Einbindung wird irgenwie gehen, ABER
bei deiner Anwendung wird es auf etwa 5 Symbole hinauslaufen. Ich würde diese als fünf .png-Dateien einbinden.

Last edited by axelr (2018-01-03 17:05:15)

Offline

#41 2018-01-05 18:17:00

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin,

ich habe die geojson-Datei unter schienenpost.geojson schon gespeichert gehabt.

Die Einbindung habe ich mal angenommen, das es so ist:

<!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 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'
        }))
      });

      var scaleLineControl = new ol.control.ScaleLine();

      var new ol.format.GeoJSON = readFeatures (source:'http://www.schienenpost.de/schienenpost.geojson');
      
      var i,iconFeature,iconFeatures=[],coordinates,nameLine; 
      coordinates = [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]; 
      nameLine = "Suerhop nach Schneverdingen"; 
      i = 0; 
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'Start '+nameLine,
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature);
      i = coordinates.length - 1; 
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'End '+nameLine,
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature);

      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: nameLine
        })]
        }),
         style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
      });

      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: (iconFeatures), //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>

Dabei habe ich die Zeile 48 neu ergänzt:

var new ol.format.GeoJSON = readFeatures (source:'http://www.schienenpost.de/schienenpost.geojson');

Zumindest bin ich davon auch ausgegangen: http://openlayers.org/en/latest/apidoc/ … oJSON.html
readFeatures liest ja wohl dann alles in der Datei heraus.
Aber wie wird es dann dargestellt (Karte wird nicht angezeigt)?

Gruß

Thal

Offline

#42 2018-01-08 00:01:21

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Stell erst mal etwas im Programmcode um
hinter Zeile 124 einfügen:
      map.addLayer(layerMarker);
Zeile 108 bis 114 raus
Zeile 78 bis 84 ersetzen durch zunächst inhaltslosen layer:
      var layerMarker = new ol.layer.Vector({
        title: 'Marker',
        source: new ol.source.Vector()
      });
Zeile 68 bis 76 auf das Lesen von geojosm umstellen:
      var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          url:'schienenpost.geojson'
        }),
        style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
      });
Zeile 50 bis 66 zur Funktion machen (brauchst du später wieder):
   Zeile 50 bis 66 einrücken
   hinter Zeile 66 neu
        layer.getSource().addFeatures(iconFeatures);
      };
   vor Zeile 50 einfügen:
      var markerStartEnd = function(layer,feature){
Zeile 48 raus

Der schienenpost.geojosm-Datei fehlt der Eintrag FeatureCollection, dieser ist bei einer Aufzählung mehrerer einzelner Features erforderlich.

{"type":"FeatureCollection","features":[
  { "type": "Feature",
    "geometry": {"type": "LineString",
    "coordinates": [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]
    },
    "properties": {"name": "Suerhop nach Schneverdingen"}
  },
  { "type": "Feature",
    "geometry": {"type": "LineString",
    "coordinates": [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124], [9.83132, 52.98300]]
    },
    "properties": {"name": "Suerhop nach Soltau"}
  },
  { "type": "Feature",
    "geometry": {"type": "LineString",
    "coordinates": [[9.87646, 53.32468], [9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]
    },
    "properties": {"name": "Buchholz nach Schneverdingen"}
  }
]}

Offline

#43 2018-01-08 11:03:31

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin,

also die geojosm-Datei habe ich geändert:

{"type": "FeatureCollection", "features":[
{ "type": "Feature",
  "geometry": {"type": "LineString",
  "coordinates": [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]
  },
  "properties": {"name": "Suerhop nach Schneverdingen"}
},
{ "type": "Feature",
  "geometry": {"type": "LineString",
  "coordinates": [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124], [9.83132, 52.98300]]
  },
  "properties": {"name": "Suerhop nach Soltau"}
},
{ "type": "Feature",
  "geometry": {"type": "LineString",
  "coordinates": [[9.87646, 53.32468], [9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]
  },
  "properties": {"name": "Buchholz nach Schneverdingen"}
}
]}

Und erstmal die lange Liste der Änderungen abgearbeitet, dabei sieht es jetzt 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="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 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'
        }))
      });

      var scaleLineControl = new ol.control.ScaleLine();
      
      var markerStartEnd = function(layer,feature){
         i,iconFeature,iconFeatures=[],coordinates,nameLine; 
         coordinates = [[9.85551, 53.31578], [9.856, 53.315], [9.869, 53.284], [9.79875, 53.11124]]; 
         nameLine = "Suerhop nach Schneverdingen"; 
         i = 0;
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'Start '+nameLine,
         });
         iconFeature.setStyle(iconStyle);
         iconFeatures.push(iconFeature);
         i = coordinates.length - 1; 
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform(coordinates[i], "EPSG:4326", "EPSG:3857")),
         name: 'End '+nameLine,
         });
         iconFeature.setStyle(iconStyle);
         iconFeatures.push(iconFeature);
         layer.getSource().addFeatures(iconFeatures);
      };

      var layerLines = new ol.layer.Vector({
         source: new ol.source.Vector({
         format: new ol.format.GeoJSON(),
         url: 'http://www.schienenpost.de/schienenpost.geojson'
         })
         style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red', width: 3})}),
      });

      var layerMarker = new ol.layer.Vector({
         title: 'Marker',
         source: new ol.source.Vector()
      });

      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()
         }),
        ],
         view: new ol.View({
         center: ol.proj.fromLonLat([10.627, 53.620]),
         zoom: 8
        }),
         logo: logoElement
      });

      map.addOverlay(popup);
      map.addLayer(layerLines);
      map.addLayer(layerMarker);
      
      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>

Karte wird nicht angezeigt.
Ich habe auch versuchsweise dieses raus genommen (Zeile: 50 - 52) funktionierte nicht, dabei fiel mir ein, das das i doch notwendig ist, also versuchsweise die Zeile: 50 - 51 nur raus genommen (wird doch in der geojson-Datei genannt), aber Karte funktionierte nicht.

Gruß

Thal

Offline

#44 2018-01-08 13:06:37

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Zeile 74 mit Komma abschließen.

Das Leseverfahren funktioniert so nicht Cross-Origin, deshalb würde ich in Zeile 73 die url nur lokal angeben:
         url: 'schienenpost.geojson'

Offline

#45 2018-01-08 13:22:54

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Um die Marker wie bisher anzuzeigen, jedoch jetzt aus dem gelesenen geojosm-Datensatz:
Vor Zeile 117 einfügen:

      map.once('moveend', function(e) {
         layerLines.getSource().getFeaturesCollection().forEach(function(feature){
           markerStartEnd(layerMarker,feature);
         });
      });

Zeilen 50 bis 51 ändern zu:

        coordinates = feature.getGeometry().getCoordinates(); 
        nameLine = feature.getProperties()['name']; 

Zeilen 54 und 61 ändern zu:

            geometry: new ol.geom.Point(coordinates[i]),

Der Zeile 49 fehlt vorne var
Zeile 73 mit Komma abschließen und dahinter einfügen:
          useSpatialIndex:false

Es bleibt im Moment ein Problem:
Deine Wege und Marker liegen teils übereinander. Im Popup wird derzeit nur das vorderste Element gezeigt.

Last edited by axelr (2018-01-08 13:33:48)

Offline

#46 2018-01-09 11:02:45

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin,

in Zeile 74 steht da hinten ein Komma, daher habe ich auch keines ergänzt (versuchsweise auch bei den Klammern, aber war ja auch falsch), Karte wird nicht angezeigt.
Die Url habe ich geändert.
Zeilen 49, 50, 51 ,54 ,61 und 73 geändert.
Vor der Zeile 117 hatte ich auch eingefügt.
Karte funktioniert aber nicht.
Der 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 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'
        }))
      });

      var scaleLineControl = new ol.control.ScaleLine();
      
      var markerStartEnd = function(layer,feature){
         var i,iconFeature,iconFeatures=[],coordinates,nameLine; 
         coordinates = feature.getGeometry().getCoorddinates(); 
         nameLine = feature.getProperties()['name']; 
         i = 0;
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(coordinates[i]),
         name: 'Start '+nameLine,
         });
         iconFeature.setStyle(iconStyle);
         iconFeatures.push(iconFeature);
         i = coordinates.length - 1; 
         iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(coordinates[i]),
         name: 'End '+nameLine,
         });
         iconFeature.setStyle(iconStyle);
         iconFeatures.push(iconFeature);
         layer.getSource().addFeatures(iconFeatures);
      };

      var layerLines = new ol.layer.Vector({
         source: new ol.source.Vector({
         format: new ol.format.GeoJSON(),
         url: 'schienenpost.geojson'
         }), useSpatialIndex: false
         style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red', width: 3})}),
      });

      var layerMarker = new ol.layer.Vector({
         title: 'Marker',
         source: new ol.source.Vector()
      });

      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()
         }),
        ],
         view: new ol.View({
         center: ol.proj.fromLonLat([10.627, 53.620]),
         zoom: 8
        }),
         logo: logoElement
      });

      map.addOverlay(popup);
      map.addLayer(layerLines);
      map.addLayer(layerMarker);
      
      map.on('click', function(evt) {
         map.once('moveend', function(e) {
         layerLines.getSource().getFeaturesCollection().forEach(function(feature){
         markerStartEnd(layerMarker,feature);
         });
         });
         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>

Kann das Problem nicht umschifft werden mit: Abweichung bei erster Besetzung (zweite Besetzung abweichende Darstellung neben der Breite des LineStrings)?

Gruß

Thal

Offline

#47 2018-01-09 11:49:11

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

Der Abschnitt layerLines sollte so aussehen:

      var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          url:'schienenpost.geojson',
          useSpatialIndex:false
        }),
        style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red',width: 3})}),
      });

Die ersten Befehle nach Aufbau der Karte:

      map.addOverlay(popup);
      map.addLayer(layerLines);
      map.addLayer(layerMarker);
      
      map.once('moveend', function(e) {
         layerLines.getSource().getFeaturesCollection().forEach(function(feature){
           markerStartEnd(layerMarker,feature);
         });
      });

      map.on('click', function(evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
          function(feature) {
            return feature;
          });
        if (feature) {

u.s.w.

Wenn du in Zeile 50 getCoordinates ohne Doppel-d schreibst, sollte alles angezeigt werden.

Last edited by axelr (2018-01-09 13:27:35)

Offline

#48 2018-01-10 00:46:51

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin,

also jetzt sieht der Code 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="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 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'
         }))
      });

      var scaleLineControl = new ol.control.ScaleLine();
      
      var markerStartEnd = function(layer,feature){
         var i,iconFeature,iconFeatures=[],coordinates,nameLine; 
         coordinates = feature.getGeometry().getCoordinates(); 
         nameLine = feature.getProperties()['name']; 
         i = 0;
         iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(coordinates[i]),
            name: 'Start '+nameLine,
         });
         iconFeature.setStyle(iconStyle);
         iconFeatures.push(iconFeature);
         i = coordinates.length - 1; 
         iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(coordinates[i]),
            name: 'End '+nameLine,
         });
         iconFeature.setStyle(iconStyle);
         iconFeatures.push(iconFeature);
         layer.getSource().addFeatures(iconFeatures);
      };

      var layerLines = new ol.layer.Vector({
         source: new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: 'schienenpost.geojson'
            useSpatialIndex: false
         }),
         style: new ol.style.Style({stroke: new ol.style.Stroke({color : 'red', width: 3})}),
      });

      var layerMarker = new ol.layer.Vector({
         title: 'Marker',
         source: new ol.source.Vector()
      });

      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()
            }),
         ],
         view: new ol.View({
            center: ol.proj.fromLonLat([10.627, 53.620]),
            zoom: 8
         }),
         logo: logoElement
      });

      map.addOverlay(popup);
      map.addLayer(layerLines);
      map.addLayer(layerMarker);
      
      
      map.once('moveend', function(e) {
         layerLines.getSource().getFeaturesCollection().forEach(function(feature){
            markerStartEnd(layerMarker,feature);
         });
      });
         
      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>

In Zeile 50 habe ich natürlich auch geändert.
Karte funktioniert natürlich nicht.

In Zeile 121 steht so:

});

Ist dort das Semikolon wichtig?
Versuchsweise habe ich es natürlich mal weg genommen - Karte funktionierte nicht...
Alle Klammern scheinen mir doch auch eine abschließende Klammer zu besitzen.

Gruß

Thal

Offline

#49 2018-01-10 01:58:03

axelr
Member
Registered: 2014-03-18
Posts: 122

Re: Openlayer V4.5.0: Marker hinzufügen

In Zeile 72 fehlt das Komma am Ende

Offline

#50 2018-01-10 10:20:50

thal1982
Member
Registered: 2012-08-27
Posts: 55

Re: Openlayer V4.5.0: Marker hinzufügen

Moin,

die Karte wird angezeigt, der 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 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'
         }))
      });

      var scaleLineControl = new ol.control.ScaleLine();
      
      var markerStartEnd = function (layer,feature) {
         var i, iconFeature, iconFeatures = [], coordinates, nameLine; 
         coordinates = feature.getGeometry ().getCoordinates (); 
         nameLine = feature.getProperties () ['name']; 
         i = 0;
         iconFeature = new ol.Feature ({
            geometry: new ol.geom.Point (coordinates[i]),
            name: 'Start'+nameLine,
         });
         iconFeature.setStyle (iconStyle);
         iconFeatures.push (iconFeature);
         i = coordinates.length - 1; 
         iconFeature = new ol.Feature ({
            geometry: new ol.geom.Point (coordinates[i]),
            name: 'End'+nameLine,
         });
         iconFeature.setStyle (iconStyle);
         iconFeatures.push (iconFeature);
         layer.getSource ().addFeatures (iconFeatures);
      };

      var layerLines = new ol.layer.Vector ({
         source: new ol.source.Vector ({
            format: new ol.format.GeoJSON (),
            url: 'schienenpost.geojson',
            useSpatialIndex: false
         }),
         style: new ol.style.Style ({stroke: new ol.style.Stroke ({color : 'red', width: 3})}),
      });

      var layerMarker = new ol.layer.Vector ({
         title: 'Marker',
         source: new ol.source.Vector ()
      });

      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 ()
            }),
         ],
         view: new ol.View ({
            center: ol.proj.fromLonLat ([10.627, 53.620]),
            zoom: 8
         }),
         logo: logoElement
      });

      map.addOverlay (popup);
      map.addLayer (layerLines);
      map.addLayer (layerMarker);
      
      
      map.once ('moveend', function(e) {
         layerLines.getSource ().getFeaturesCollection ().forEach (function (feature) {
            markerStartEnd (layerMarker,feature);
         });
      });
         
      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>

Du hast recht, verschiedene Linestrings verdecken sich selbst, wenn einzelne Punkte  der Koordinaten gleich sind.
Ich habe mal einfach die Suchmaschine betätigt, aber keine passende Antwort erhalten.
Ich glaube eine Definition, die beschreibt wenn ein Punkt besetzt ist, dann verschiebt sich die Koordinate des zweiten LineStrings und der weiteren um die Breite des LineStrings.
Dies wäre wohl ein möglicher Lösungsweg.
Aber gibt es auch dafür Definationen bei Openlayer?

Gruß

Thal

Offline

Board footer

Powered by FluxBB