x

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

Geschrieben von thal1982 (Gast) am 24. Januar 2018 00:41:15: [flux]

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

Antworten: