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.

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.

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

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.

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/ol.format.GeoJSON.html
readFeatures liest ja wohl dann alles in der Datei heraus.
Aber wie wird es dann dargestellt (Karte wird nicht angezeigt)?

Gruß

Thal

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"}
  }
]}

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

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’

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.

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

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.

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

In Zeile 72 fehlt das Komma am Ende

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

Moin,

ich frage mich - und jetzt dich - warum du wochenlang hier in nur Minischritten weiterkommst, indem du “menschliche Debugger” verwendest.

Bitte benutze endlich den Debugger im Browser (UMSCH-STRG I) und du kommst wesentlich schneller voran.

Gruss
walter

ps: muss man natürlich “lesen” können: er sagt, dass ab Zeile 70 ein } fehlen würde, was aber die Folge des fehlenden Kommas ist.

Moin wambacher,

das mit dem Debugger ist mir aus dem Blickfeld geraten, als ich vor drei, vier Jahren eine andere Internetseite aufgebaut hatte, war diese html und css geschrieben.
Ich hatte es mit dem Debugger es ebend getestet - stimmt ist hilfreich.
(Hinweis für andere: Er meinte den Debugger unter dem Firefox-Browser).

Gibt es eigentlich Editoren wie bei html oder css für Openlayer?
Wäre eine interessante Frage.

Gruß

Thal

Ich nutze unter Linux JEDIT - braucht Java, aber das sollte wegen Josm ja bereits installiert sein. Macht sprachabhängiges Highlighting und kann mit einem Plugin auch “fancy format”.

Wird wohl unter Win und Mac ebenfalls laufen, da Java.

Gruss
walter

Ne, er meinte den Debugger, den es in egal welchen Browser gibt, welcher häufig mit F12 oder eben Umschalt-Strg-I (Inspector) aufgerufen werden kann. :wink:

PS: da OpenLayers auch nur Javascript ist, tut es jeder vernünftige Editor, welcher HTML und css kann.

Moin,

Ach das wusste ich nicht, das jeder Browser ein ,Debbuger" mitführt.

Nochmal zurück zum Code:
Das jetzige Problem ist ja das mehrere LineStrings auch noch zum Teil gleiche Koordinaten vorweisen, dadurch werden die LineStrings nicht mehr einzeln angezeigt, sondern komplett als durchgehende Linie.
Dies ist ein Problem.

Ich habe hierzu eine Frage, auf einer anderen Internetseite (https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/if…else) habe ich diesen gefunden:

if (bedingung) anweisung1 [else anweisung2]

Aber wie soll denn dann die Bedingung geschrieben werden?
coordinates würde wohl dann hinkommen, oder gibt es andere Beispiele/ hilfreiche Seiten zu dem Problem?

Gruß

Thal

Moin,

da die Thematik:
Openlayer mit Marker doch ganz positiv erledigt ist (nebenbei der LineString), so sehe ich es als abgeschlossen an.
Wegen dem speziellen Fall (LineString verschieben bei der Darstellung) werde ich einen neuen Thread erstellen.

Gruß

Thal