Openlayer V4.6.4 Problem Popup mit Linestring (Zwei Fragen/ Probleme)

Communities Deutschland (Germany)
1

Moin,

das Problem was sich momentan auftut ist:

Verschiedene LineStrings haben ja verschiedene Namen, aber im Popup-Fensterchen taucht nur einer auf, welche Lösung gibt es hier?
Meine LineStrings sehen ja doch gut aus, aber ich habe mal Opacity: 0.4 ausprobiert - nix, es verändert sich gar nix.
Hat hierzu jemand noch einen Vorschlag/ Lösungsmöglichkeit?

Die Index-Datei:

<!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 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 ({Opacity: 0.4, color : 'red', width: 3})}),
      });

      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.once ('moveend', function(e) {
         layerLines.getSource ().getFeaturesCollection ().forEach
      });
         
      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>

Die css-Datei:

h1 {
   text-align: center;
  }
nav ul
   {
   list-style: none;
   text-decoration: none;
   text-align: center;
  }
li
   {
   display: inline-block;
   box-shadow: 5px 7px 9px grey;
   border-radius: 20px;
   background: #CBC6C6;
   color: #000000;
   margin-left: 2px;
   margin-bottom: 2px;
   }
nav a
   {
   display: block;
   border-radius: 20px;
   background: #CBC6C6;
   padding: 10px;
   color: #000000;
   }
nav a:hover
   {
   background: #1E3FC3;
   }
@charset "utf-8";

html,body {
  background-color: #FFF;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
  overflow: auto;
  color: #000;
}
 
a {
  color: #0000FF;
  text-decoration: none;
}
 
a:hover {
  color: #000011;
  text-decoration: underline;
}

#descriptionToggle, #map
  {margin-top: auto}
 
#map {
  height: 82%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 1em;
  color: #000;
}
.olFramedCloudPopupContent {
	font-size: 0.8em;
	font-family: Verdana, sans-serif;
}
#descriptionToggle {
        text-align: center;
  	font-size: 1em;
	z-index: 10000;
	left: 80px;
	height: 14px;
	border-left: 1px solid #000040;
	border-bottom: 1px solid #000040;
	border-right: 1px solid #000040;
	padding: 2px 10px;
	margin-right: auto;
	background-color: #EEE;
	font-size: 12px;
	cursor: default;
	opacity: 0.7;
} 
#descriptionToggle:hover {
	background-color: #FFF;
	opacity: 1;
}
#description {
        text-align: center;
	z-index: 10000;
	left: 80px;
	top: 18px;
	border: 1px solid #000040;
	padding: 10px 10px;
	margin-right: auto;
	background-color: #FFF;
	font-size: 12px;
}
 
#attribution {
	bottom: 0;
	left: 0;
	padding: 5px 8px 1px 8px;
	position: absolute;
	font-size: 11px;
	font-style: italic;
	z-index: 1000;
}

#layer {
	position: absolute;
	top: 60px;
	right: 10px;	
	z-index: 10002;
}

#layer > div {
	border: 1px solid #000;
	background-color: #FFF;
	padding: 4px 5px;
	font-size: 0.7em;
	cursor: default;
	margin-bottom: 4px;

}
#layer div:hover {
}
#layer .active {
	background-color: #EEF;
}

.hide { display: none; }

.ol-scale-line {
    left: 50% !important;
}

Und die geojson-Datei:

{"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"}
},
{ "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], [9.60113, 52.86486]]
  },
  "properties": {"name": "Buchholz nach Walsrode"}
},
{ "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"}
}
]}

Kleiner Hinweis: opacity habe ich in der Index-Datei mal versuchsweise eingebaut gehabt (

style: new ol.style.Style ({stroke: new ol.style.Stroke ({Opacity: 0.4, color : 'red', width: 3})}),

, bzw. ist ja immer noch drin, geht leider nicht…

Gruß

Thal

2

Moin,

opacity hatte ich an die falsche Stelle gesetzt!
Das Problem ist jetzt nur noch:
Abgestufte Deckung nach Linienüberlagerungen (mehrere LineStrings würden ja dann stärker aussehen müssen, im Moment ist dies nicht der Fall).
Jetzt funktioniert , mit dem opacity es:

<!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 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})
         }),
         opacity: 0.4
      });

      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.once ('moveend', function(e) {
         layerLines.getSource ().getFeaturesCollection ().forEach
      });
         
      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>

Bleiben dann nur noch zwei Punkte offen:
Überlagernde Deckung und Popups sollen alles anzeigen, wenn die auf ein Linestring mit verschiedenen Linestrings stoßen.

Wer Beispielseiten oder Vorschläge hat, immer her damit.

Gruß

Thal