• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Pixelkoordinaten vom Bild in Meter ausgeben lassen

J

JQJava

New member
Hallo Zusammen,

ich bin neu hier!

Nach langer Recherche bin ich auf keine gescheite Lösung gekommen. Ich bin an etwas selbst zu experimentieren. Meine Gedanke wäre, wie bekomme ich in OpenLayers Javascript eine Pixelkoordinaten vom Bild in Meter ausgegeben?
Im Anhang habe ich schon meine selbst implementierter Code. Nur der funktioniert nicht so richtig. Kann nichts markieren.

Auf eine Hilfe wäre ich sehr dankbar! :)

Viele Grüße
JQJava
 

Anhänge

  • code.zip
    21,9 KB · Aufrufe: 8
Hi!
Kannst du den Code minimiert online zur Verfügung stellen und hier den Link posten? Die Hilfsbereitschaft wäre dann erfahrungsgemäß höher.

Erg.: Verschoben
 
Zuletzt bearbeitet:
mikdoe schrieb:
Hi!
Kannst du den Code minimiert online zur Verfügung stellen und hier den Link posten? Die Hilfsbereitschaft wäre dann erfahrungsgemäß höher.

Erg.: Verschoben
Zum Vergrößern anklicken....

Wie soll ich den Code minimiert online zur Verfügung stellen? Damit es verstanden wird, braucht man den ganzen Code. Oder verstehe ich falsch?
 
Ich hätte den Testlink auch lieber mit nicht minimiertem Code, da man da viel einfacher Beakpoints zum debuggen setzten kann.

Aber generell ist mir nicht ganz klar, welche Meter du haben willst. Die (Centi-)Meter auf dem Bildschirm? Die wirst du nicht gescheit berechnet bekommen, da du keinen Zugriff auf die Bildschirmgröße hast - nur auf die Bildschirmauflösung.

PS: Steht eventuell etwas in der Fehlerkonsole?
 
Erst mal Danke für eure Hilfe!

Ich habe meinen Code etwas minimiert. Da waren einige Zeilencode die überflüssig waren.

Code: 
var pixelProjection = new ol.proj.Projection({
	code: 'pixel',
	units: 'pixels',
	extent: [0, 0, 400, 80]
});

Hier in dem Code, was ihr auch im Zip-Datei sehen könnt, in extent: [0, 0, 400, 80] möchte ich die Größe (in Meter oder auch Km) des Bildes angeben. Also Spricht, die Länge und Hohe vom realen Bild (in dem Beispiel Haus oder Schiff). Die Koordinaten gibt der mir soweit schonmal richtig aus, aber wenn ich am Bildrahmenende unten anklicke, dann zeigt er mir z.B. 0.3434 und 20.342. Soll aber nicht sein. Weil das Haus oder Schiff die untere Grenze befindet sich nicht am Bildrahmenende unten. Wisst ihr wie ich meine? Habe etwas schwer beim Schreiben :-( Nochmal grob: ich möchte in Meter nur die Koordinaten was auf dem Bild zusehen ist ausgegeben bekommen. Also nur den Grundriss.

Zu hesst:
oder willst du über eine selbst definierte bildpixel zu meter projektion umrechnen?
Zum Vergrößern anklicken....
Jedes Bild hat seine eigene Bildpixel die ich dann auch angeben muss. Genau es soll in Meter dargestellt werden. Z.B. habe ich die Koordinaten vom Grundriss das es 600 m lang ist und 300 m hoch ist. Diese Koordinaten möchte ich eingeben, damit auch die Koordinaten stimmen, wenn ich auf eine Stelle klicke. Soll mir dann auch P(300/100) ausgeben und nicht P(900/500). Dieser Punkt ist ja schon außerhalb vom Grundriss.
Nur weiß ich nicht wie ich das realisieren soll. :-(

Vielleicht könnt ihr mir weiter helfen!
Freue mich sehr auf weitere Vorschläge oder Ideen.

LG
 

Anhänge

  • Code.zip
    1,6 KB · Aufrufe: 1
JQJava schrieb:
Hier in dem Code, was ihr auch im Zip-Datei sehen könnt, in extent: [0, 0, 400, 80] möchte ich die Größe (in Meter oder auch Km) des Bildes angeben.
Zum Vergrößern anklicken....
und das geht nicht? du hast pixel, willst aber meter, dann würde ich schon mal
Code: 
var pixelProjection = new ol.proj.Projection({
	code: 'metric',
	units: 'm',
	extent: [0, 0, 400, 80]
});
nehmen, also 400 m breit und 80 m hoch

JQJava schrieb:
Weil das Haus oder Schiff die untere Grenze befindet sich nicht am Bildrahmenende unten. Wisst ihr wie ich meine?
Zum Vergrößern anklicken....
und extent: [0, 80, 400, 0] hilft da nicht?
 
Danke für die schnelle Anwort hesst!

ich habe das umgesetzt wie du es mir vorgeschlagen hast. Habe in der Api dann auch nachgeschaut. So eine Kleinigkeit ist mir leider nich aufgefallen :-(
Also die Koordinaten zeigen richtig. Habe noch umgesetzt:
Code: 
var pixelProjection = new ol.proj.Projection({
	code: 'metric', //'pixel',
	units: 'm', //als Meter //'pixels',
	extent: [-1.5, -1.5, 400, 85]
});
Habe die Vermutung das hier dieser 'm' keine Auswirkung hat :-(

Ich möchte das der Bug bei 0 anfängt und auch der Boden des Grundrisses. Denn es soll, wenn ein Marker gesetzt wird, auch richtig angezeigt werden. Wenn ich ein P(300/10) eingebe, dann soll er auch am Grundriss an dem Punkt einen Marker setzen. Daher muss der Boden vom Grundriss bei 0 anfangen, damit mein x und y richtig gesetzt wird.
Jetzt stellt die Frage, kann ich mir die Werte ausgeben lassen als Meter? Dies bin ich am probieren und habe dies raus:
Code: 
map.on('click', function(evt) {
	var coordinate = evt.coordinate;
	console.log('You clicked here: x:' + coordinate[0] + " m - y:" + coordinate[1] + " m");
});
Da ich immer diese JavaScript-Konsole öffnen muss, ist es etwas unschön. Wie kann ich es programmieren, dass die Ergebnisse unter dem Bild angezeigt wird?
 
Zuletzt bearbeitet:
Wenn da jetzt in der Konsole die richtigen Werte stehen, kannst du doch anstatt dem console.log dir den Text doch z.B. mittels .innerHTML in eine DOM-Node reinschreiben...
 
Ach ja, stimmt. Danke! :) Ich werde an noch einer Sache experimentieren. Bei Fragen darf ich mich immer hier wenden, oder? :)
 
Hi nochmals,

jetzt klappt es alles, aber habe jetzt ein anderes Problem. Und zwar mit dem Popup.
Vorgehensweise:
1) boundless.css und boundless.js runtergeladen, weil bei Openlayers 3 mit den Popup nicht klappt
2) die beiden Dateien habe ich in meinem Ordner eingefügt
3)
HTML: 
<link rel="stylesheet" href="../css/boundless.css" type="text/css">
und
HTML: 
<script src="boundless.js" type="text/javascript"></script>
habe ich in meine html Code eingebunden
4) in die Map:
HTML: 
<div id="map" class="map">
		<div id="popup" class="ol-popup"></div>
	</div>
5)
Code: 
.ol-popup {
        display: none;
        position: absolute;
        background-color: white;
        -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖"; 
      }
eingefügt in die html
6) Dann in Javascript habe ich den Code hier stehen:
Code: 
var popup = new Boundless.Popup({
    element: document.getElementById('popup'),
    closeBox: true,
    offsetY: -25,
    autoPan: true
});
var map = new ol.Map({
layers: [
		new ol.layer.Image({
			source: new ol.source.ImageStatic({
			url: 'data/bild.png',
			imageSize: [733, 152],
			projection: pixelProjection,
			imageExtent: pixelProjection.getExtent()
		})
		}),
		new ol.layer.Tile({
			source: source
		})
	],
    overlays: [popup],
	target: 'map',
	view: new ol.View2D({
		projection: pixelProjection,
		center: ol.extent.getCenter(pixelProjection.getExtent()),
		zoom: 2
	})
});
map.on('singleclick', function(evt){
    var coordinate = evt.coordinate;
    popup.setPosition(coordinate);  
    popup.setContent("x: "+coordinate[0]+" m - y: "+coordinate[1]+" m");
    popup.show();

});

Popup zeigt nach jedem Klick mit den Koordinaten richtig an. Mein Problem ist, was ich schon seit Stunden den Fehler nicht sehe, das das Popup sich nicht mit dem Bild verschieben lässt. Verschiebe ich das Bild mit der Maus, dann bleibt das Popupfenste da stehen wo ich angeklickt habe. Dies soll nicht so sein. Dann das nächste Problem ist, dass ich an der Position anklicke und auch das Popup zeiger an der Position anzeigen soll. Der zeigt mir einwenig weiter oberhalb des angeklickten Position.

Ich hoffe, dass ich verständlich geschrieben habe.
Bedanke mich sehr auf weitere Hilfe!

Im Anhang ist nochmal der ganze Code.

lg
 

Anhänge

  • Code.zip
    5,1 KB · Aufrufe: 0
Hallo Zusammen,

Das zweite Problem:
Dann das nächste Problem ist, dass ich an der Position anklicke und auch das Popup zeiger an der Position anzeigen soll. Der zeigt mir einwenig weiter oberhalb des angeklickten Position.
Zum Vergrößern anklicken....

Habe ich heute gelöst. Und zwar:
Code: 
 offsetY: -25
soll ins
Code: 
 offsetY: 0
geändert werden. Bis ich drauf kam... nach etwas googeln und reinlesen habe ich die Lösung gefunden. Bin leider nicht ein Profi in Javascript.
Aber das erste Problem ist noch offen. Wenn ich an einer Position am Bild klicke und mir das Popupfenster angezeigt wird und ich dabei das Bild verschiebe, dann verschiebt sich mein Popupfenster nicht mit. Wie kann ich dies lösen?

Habe boundless.js und .css entfernt und arbeite mit bootstrap. Statt von oben der Code:
Code: 
var popup = new Boundless.Popup({
    element: document.getElementById('popup'),
    closeBox: true,
    offsetY: -25,
    autoPan: true
});
habe ich dies:
Code: 
var popup = new ol.Overlay({
    element: document.getElementById('popup')
});
und das:
Code: 
map.on('singleclick', function(evt){
    var coordinate = evt.coordinate;
    $("#result").text('You clicked here: x:' + coordinate[0] + " m - y:" + coordinate[1] + " m");
    
    var element = popup.getElement();
  var coordinate = evt.coordinate;
  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
      coordinate, 'EPSG:3857', 'EPSG:4326'));

  $(element).popover('destroy');
  popup.setPosition(coordinate);
  // the keys are quoted to prevent renaming in ADVANCED_OPTIMIZATIONS mode.
  $(element).popover({
    'placement': 'top',
    'animation': false,
    'html': true,
    'content': '<p>You clicked here: </p><code>x:' +  coordinate[0] + ' m </br> y:' + coordinate[1] + ' m</code>'
  });
  $(element).popover('show');

});

Wäre echt super, wenn ich einen Lösungsansatz von euch bekommen könnte. Denn ich sehe irgendwie den Fehler nicht! :-(

lg
JQJava
 
Zuletzt bearbeitet:
So wie du im "singleclick"(?)-Event die Position des Popovers auf die Mausposition setzt, musst du auch im Event, das ausgelöst wird, wenn das Bild verschoben wird (ich hab' keine Ahnung, wie das heißt...), die Position neu berechnen und dann setzen.
 
hmm ich verstehe nicht so genau, was du meinst mit der Berechnung. Kann man diesen Popup nicht als "anchor" setzen? Nur weiß ich es nicht wie. Denn wenn ich einen Marker setze und das Bild dabei verschiebe, dann bleibt der Marker fest auf dem Bild. Und es ändert sich auch nach jeder zoomstufe. Aber wenn ich an dem Marker klicke und das Popupfenster öffnet sich und dann das Bild verschiebe dann geht es nicht mehr. Der Marker verschiebt sich mit aber das Popupfenster bleibt in der Position... hm :-(
 
Hmm bin etwas überfragt. Wie erstelle ich den einen Testlink? Ansonsten nach einer Erklärung mache ich es dann gerne. Vielleicht versteht ihr dann mein Problem mehr. :)
 
Ein Testlink geht so: Sachen auf einen Webserver hochladen sodass man das Problem betrachten kann. Link dazu hier rein kopieren.
 
Ach das Problem habe ich selbst noch gelöst :-D Aber trotzdem Danke für eure Hilfe!
Kann mir einer verraten wie ich einen Marker erstellen kann ohne vom Textfile zu lesen? Also meine, damit ein Marker erstellt wird, habe ich im Textfile geschrieben wie
Code: 
point	title	description	icon
10,20	 my orange title	my orange description	
2,4	my aqua title my aqua description
Habe ich von Openlayers 3.

Aus der Datei hat er dann den Marker gesetzt. Aber wie mache ich es, dass ich im Label Field eintippe bei X: 12 Y: 12 und da soll ein Marker erstellt werden. Oder das ein Icon rechts oben zu sehen ist und ich drauf klicke und dann am Bild klicke und an der Position soll ein marker erstellt werden, aber mit den richtigen Koordinatenangabe mit Popup-Fenster.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben