Popup Openlayers

Communities Deutschland (Germany)
1

Hallo zusammen,

ich habe Probleme mit den Popup bei Openlayers 3.
Wenn ich auf eine Position am Bild klicke und dann das Bild verschiebe, dann verschiebt sich das Pop-Up-Fenster nicht mit. Und ich weiß nicht wo der Fehler gerade liegt. Ich habe von Openlayers 3 popup.html und popup.js so ähnlich gemacht. Ich poste mal meinen Code hier rein:
Html:


...
<div id="map" class="map">
	<div id="popup" class="ol-popup"></div>
</div>
...

Javascript:


var popup = new ol.Overlay({
    element: document.getElementById('popup')
});

var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point([22, 5]) //is only an example
});

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        src: 'img/icon.png'
    })
});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
    features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});
var map = new ol.Map({
	layers: [
		new ol.layer.Image({
			source: new ol.source.ImageStatic({
                url: 'img/picture.png', 
                imageSize: [566, 145],
                projection: pixelProjection,
                imageExtent: pixelProjection.getExtent()
		})
		}),
	vectorLayer],
    overlays: [popup],
	target: 'map',
	view: new ol.View2D({
		projection: ownProjection,
		center: ol.extent.getCenter(ownProjection.getExtent()),
		zoom: 2
	})
});

map.on('singleclick', function(evt){
    var element = popup.getElement();
  var coord = evt.coordinate;
  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
      coord , 'EPSG:3857', 'EPSG:4326'));

  $(element).popover('destroy');
  popup.setPosition(coord );

  $(element).popover({
    'placement': 'top',
    'animation': false,
    'html': true,
    'content': '<p>Coords: </p><code>x:' +  coord [0] + ' m </br> y:' + coord [1] + ' m</code>'
  });
  $(element).popover('show');

});

Ich hoffe, dass ihr bei meinem Problem weiter helfen könnt. Denn popup von Openlayers 3 funktioniert einwandfrei, aber mit ImageStatic irgendwie nicht.

lg
QJanaQ

2

Das Problem habe ich selbst gelöst. :slight_smile:

3

Das ist sehr schön, dass es dir gelungen ist. Vielleicht könntest du für die Zukunft deine Problemlösung hier noch dokumentieren, wenn jemand nach dem gleichen Problem sucht.

4

ganz besonders weil OL3 noch nicht von Vielen verwendet wird. Ist ja auch noch beta5.

Gruss
walter

5

Das Problem war :
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
units: ‘m’
})
]),

Dies habe ich nicht hier miteingefügt und dieser ScaleLine hat das verursacht. Habe dies in meinem Code auskommentiert.

Aber kann einer von euch mir die imageSize erklären…was es mit der extent zu tun hat. Wieso dieses dann auch ändert.

6

Aus meiner sicher nicht uneingeschränkt für OL3 gültigen Erfahrung mit OL2:

ImageSize: Die Grösse des Bildes in Pixeln
ImageExtent: Die Ecken des Bildes in der Projektion der Karte

Wenn du nichts anderes hast als ein Bild, kann dir das vermutlich egal sein. Kannst dir ja mal Extent anzeigen lassen, vermutlich steht da (0, 0, 566, 145) für kleinsten und grössten x/y-Wert drin.

Aber stell dir vor, du hast eine gescannte historische Karte und willst sie über eine OSM-Karte legen. Dann ist Size die Größe des Scans (in Pixeln) und Extent steckt die Ecken des Scans auf der OSM-Karte fest (in Längen und Breitengraden oder deren Umrechnung in die Kartenprojektion).

Mal nur so geraten: Dein Maßstab scheitert vermutlich daran, dass du ein Bild hast, dessen Größe nur in Pixeln bekannt ist und du einen Maßstab drauflegen willst, der in Metern skaliert sein soll. Keine Ahnung, ob ScaleLine überhaupt in Karten funktioniert, die nur Pixel kennen.

Grüße, Max

7

Kann mir einer helfen wie ich diesen ScaleLine definieren kann?

8

Was Max sagt, klingt doch sehr einleuchtend. Hast du schon mal versucht, deinem Bild (ImageSource) einen extent / ImageExtent zu verpassen?