Bild Nullpunkt setzen (gelöst) (HTML, CSS und Javascript)

[thread]19126[/thread]

Bild Nullpunkt setzen [gelöst]

Tags: Javascript Ähnliche Threads

Leser: 15

Articles: hide open all | hide show old branches

+6 replies

JuHa

2014-06-02 10:19

User since
2014-04-11
31 Artikel
BenutzerIn
[default_avatar]

Hallo,

bin seit langem auf der Suche nach der richtigen Koordinatenangabe. Und das Forum kann ich hier sehr gut empfehlen. Ich hatte einige Fehler an meinem Code nicht gesehen und habe hier soviele Tipps und Vorschläge erhalten. Finde ich echt toll ;-)

Im Anhang habe ich ein Beispielbild hochgeladen. Ich möchte in OL3 die follgenden extent richtig angeben.
HTML:

Code: (dl )

1
2
3

<label class="radio" for="bild-switch_2">
<input id="bild-switch_2" class="bild-switch_1a" type="radio" name="bilder" value="Bild2" onchange="checkedRadioBtn('Haus.png', [750, 547], [-20, -10, 55, 20])" />Haus
</label>

JS:

Code: (dl )

function checkedRadioBtn(url, size, extProj){
var resultExt,  r2 = 0, ext = 1;
   
    if(extProj[0] < 0){
        ext = extProj[0] * (-1);
        //Dreisatz
        resultExt = (((extProj[2] + ext)*size[1])/size[0])+extProj[1];
    }else{
        resultExt = (((extProj[2] - extProj[0])*size[1]) / size[0])-extProj[1];
    }
    resultExt.toFixed(2);
 
    var newSizeProjection = new ol.proj.Projection({
        code: 'metrics',
        units: 'm',
        extent: [extProj[0], extProj[1], extProj[2], resultExt]  //Xmin, Ymin, Xmax, Ymax
    });
//remove
        map.removeLayer(baseLayer);
 
        //get layers and remove marker
        var allLayers = map.getLayers().getArray()[0];
        map.removeLayer(allLayers);
 
        for(var i = 0; i<icons.length; i++){
            map.removeLayer(icons[i]);  
        }
 
        var extent = newSizeProjection.getExtent();
        var center = ol.extent.getCenter(extent);
 
        var newV = new ol.View2D({
            projection: newSizeProjection,
            center: center,
            zoom: 2
        });
 
        map.updateSize();
        map.addLayer(newL);
        map.getView().getView2D().setProjection(newSizeProjection);
        map.getView().getView2D().setCenter(center);
        $("#extentResult").text('Extent: ' +newSizeProjection.getExtent()[0].toFixed(2)+", "+newSizeProjection.getExtent()[1].toFixed(2)+", "+newSizeProjection.getExtent()[2].toFixed(2)+", "+newSizeProjection.getExtent()[3].toFixed(2));

Code, wenn ich eine Stelle anklicke damit die Koordinaten angezeigt werden.

Code: (dl )

map.on('click', function(evt){
            var coordinate = evt.coordinate;
 
            $("#result").text('You clicked here: x:' + coordinate[0].toFixed(2) + " m - y:" + coordinate[1].toFixed(2) + " m");
           
            overlay.setPosition(coordinate);
            content.innerHTML = '<p>You clicked here:</p></br><code>x: ' +  coordinate[0].toFixed(2) + ' m </br> y: ' + coordinate[1].toFixed(2) + ' m</code>';
            container.style.display = 'block';
    });

Meine Frage wäre wie kann ich den Nullpunkt nicht links definieren sondern wie kann ich dies rechts definieren? Spricht die Meterangabe am Bild sind gespiegelt worden. Nullpunkt fängt nicht wie gewohnt von links an sondern laut Bild von rechts. Also links 55 und rechts -20. Wenn ich die jeweiligen extent Bereich ändere, dann werden auch die Koordinaten nicht richtig angezeigt.
Wenn ich am Bild rechts klicke soll P(-10/2) angezeigt werden und nicht P(52/2).
Hoffe ihr wisst was ich meine.

Ich bedanke mich für eure HIlfe!

Anhänge

image/png
750 x 547
haus.png

Last edited: 2014-06-02 11:46:26 +0200 (CEST)

+5 replies
JuHa

2014-06-02 11:41
User since
2014-04-11
31 Artikel
BenutzerIn
Ich habe jetzt follgendes ausprobiert und zeigt mir aber das Popup gespiegelt. Wenn ich rechts am Bild klicke dann zeigt er mir den Popup links an.
Code: (dl )

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

map.on('click', function(evt){ coordinate = evt.coordinate; if(document.getElementById('bild-switch_2').checked == true){ coordinate[0] = 45- coordinate[0]; coordinate[1] = coordinate[1]; overlay.setPosition(coordinate); }else{ overlay.setPosition(coordinate); } $("#result").show(); $("#result").text('You clicked here: x:' + coordinate[0].toFixed(2) + " m - y:" + coordinate[1].toFixed(2) + " m"); content.innerHTML = 'You clicked here:<code>x: ' + coordinate[0].toFixed(2) + ' m y: ' + coordinate[1].toFixed(2) + ' m</code>'; container.style.display = 'block'; });
Die 45 habe ich am Bild den Wert genommen wo der 0 Punkt liegt. Da es ja fix ist habe ich 45 immer minus die Position was beim alten Wert ist abgezogen um dann auf den richtigen Wert zu kommen. Wie 45-45= 0 also an der Position 45 wird dann 0 angezeigt an der x -Achse. Aber das Popup erscheint entgegengesetzt.

Kann mir einer helfen, wo der Fehler liegt ;--( ?
Last edited: 2014-06-02 14:00:34 +0200 (CEST)
- +4 replies
- JuHa
 
 2014-06-04 12:41
 
 User since
 2014-04-11
 31 Artikel
 BenutzerIn
 
 ist erledigt. Habe bei content den Wert abgezogen. Aber davor zuerst in eine Variable gespeichert und abgefragt, ob Radio angeklcit wurde.
 - +3 replies
 - GwenDragon
 
 2014-06-04 15:39
 
 User since
 2005-01-17
 14748 Artikel
 Admin1
 
 Schreib doch mal deien Lösung hier rein.
 Wenn jemand auch mal sowas gelöst haben will, ist es mit Beispiel schöner und schneller zu verstehen. ;)
 die Drachin Gwen
 
 Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
 - +2 replies
 - JuHa
 
 2014-06-05 13:07
 
 User since
 2014-04-11
 31 Artikel
 BenutzerIn
 
 Hier der Code:
 
 Code: (dl )
 
 1 2 3 4 5 6 7 8 9 10 11 12
 
 map.on('click', function(evt){ coordinate = evt.coordinate; overlay.setPosition(coordinate); var v= (document.getElementById('bild-switch_2').checked)? 45 - coordinate[0] : coordinate[0]; content.innerHTML = 'You clicked here:<code>x: ' +v.toFixed(2) +' m</code><code>y: '+ coordinate[1].toFixed(2) + ' m</code>'; container.style.display = 'block'; });
 
 Die 45 ist der Punkt wo meine 0 auf dem Bild zu sehen ist. Habe einen click Handler eingebaut und geschaut, welche Position welche Koordinaten es hat. Und bei 0 War p(45/0) und habe immer diese Zahl 45 von der angeklickten Stelle abgezogen. Damit mein Nullpunkt auf der rechten Seite befindet. Habe alles spiegelt verkehrt gemacht. Hoffe ich konnte gut erklären.
 Last edited: 2014-06-05 15:15:46 +0200 (CEST)
 - GwenDragon
 
 2014-06-05 14:51
 
 User since
 2005-01-17
 14748 Artikel
 Admin1
 
 Kannst bitte dazuschreiben wie du auf 490 kommst?
 die Drachin Gwen
 
 Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

View all threads created 2014-06-02 10:19.