[Erledigt] Bild Nullpunkt

Hallo,

bin seit langem auf der Suche nach der richtigen Koordinatenangabe.

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

<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:

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.

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.
Hoffe war verständlich von mir ;-(

Ich bedanke mich für eure HIlfe!

hat sich erledigt.

Das habe ich eingefügt:

var v= (document.getElementById('bild-switch_2').checked)? 490 -  coordinate[0] : coordinate[0];
content.innerHTML = '<code>x: ' +correctedValue.toFixed(2) +' </code></br><code>y: '+ coordinate[1].toFixed(2) + ' </code>';

Vielen Dank für deine Antwor!

Ich habe dein Code mal umgesetzt und habe bevor ich deinen Beitrag gelesen hatte, schon davor was programmiert. Wir haben fast ähnliche weise gemacht, aber das Problem liegt jetzt daran, dass das Popup Fenster mir entgegen der Richtung anzeigt. Auf dem Bild ist der Nullpunkt rechts und nicht links. Bei mir gibt das Programm die richtige Koordinaten aus. Klicke ich an dem Nullpunkt dann zeigt er mir auch P(0/0) an, aber das Popup ist nicht an der Position zu sehen, sondern entgegengesetzt, spricht auf der linken Seite. Wenn ich egal wo auf der rechten Seite an einer bestimmten Position klicke, dann sehe ich das Popup auf der linken Seite und so auch umgekehrt.

Wisst ihr woran es liegen könnte?

Mein Code:

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

closer.onclick = function() {
    container.style.display = 'none';
    closer.blur();
    return false;
};
var overlay = new ol.Overlay({
    element: container,
    positioning: 'bottom-center',
    stopEvent: false
});

var baseLayer = 
    new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: Bild1.png', 
            imageSize: [729, 146],
            projection: pixelProjection,
            imageExtent: pixelProjection.getExtent()
        })
    });

var map = new ol.Map({
    layers: [baseLayer],
    overlays: [overlay],
    target: 'map',
    view: ...
    })
});

Radio Button anklicken siehe den Code oben: function checkedRadioBtn(url, size, extProj){...};

/*
* beim erstem Klick wird angezeigt = true, beim zweitem Klick wird nicht angezeigt = false
*   Das Popup wird dementsprechend angepasst
*/
var clicks = new Boolean(true); 

/*
* Wird gebraucht um das value zu verändern. Bei true "Show coordinate" und bei 
* false "Hide Coordinate"
*/
var buttonClick = new Boolean(true);

var coordinate;

window.onload = function(){
    map.on('click', function(evt){        
        if(!buttonClick){
            var coordinate = evt.coordinate;

            // Nullpunkt spiegeln auf der rechten Seite
            if(document.getElementById('bild-switch_2').checked == true){
                coordinate[0] = 490 - coordinate[0];
                coordinate[1] = coordinate[1];

                overlay.setPosition(coordinate);
            }else{
                overlay.setPosition(coordinate);
            }

            $("#result").show();
            $("#result").text('Koordinaten: x:' + coordinate[0]+ " m - y:" + coordinate[1] + " m");

            container.style.visibility = "visible";

            content.innerHTML = '<p><b>Koordinaten: </p></b></br><code>x: ' + coordinate[0] +' m</code></br><code>y: '+ coordinate[1] + ' m</code>';

            container.style.display = 'block';  

            clicks = false;

        }else if(buttonClick){
            $("#result").hide();
            container.style.visibility = "hidden";

            clicks = true;
        }
    });
};

function checkCoord(){    
    if(buttonClick){
        document.getElementById("koordShow").value = "Show coordinate";
        buttonClick = false;
    }else if(!buttonClick){
        document.getElementById("koordShow").value = "Hide coordinate";
        buttonClick = true;
    }
};

Hoffe könnt mir bei dem Problem helfen. Denn ich sehe den Fehler nicht ;-(

[rudygotya]

Versuch dich mal an aktivem Debugging:

https://developer.chrome.com/devtool...ript-debugging

Im Chrome Inspector findest du unter Sources ein achteckiges Icon => pause on exceptions. Klick das einmal an, so dass es blau wird. Dann klick nochmal auf der Seite. Der Inspector zeigt dir dann die Stelle, an der es kracht. Du kannst dort auch breakpoints setzen.

Falls dir das zu komplex ist für den Einstieg, schau in die Console, klick auf den Pfeil links neben den Error. Dort siehst du auch den call stack. Zum einfachen Debuggen console.log verwenden.

Zu deinem Code:
Im map-click-Listener legst du eine globale Variable coordinate an. In checkPopup machste dir selbst das Leben schwer: Damit das Konstrukt funktioniert, muss "bild-switch_2" als ID im DOM vorhanden sein. Typüberprüfungen und co fehlen auch komplett. Anstelle des innerHTML-Geschwurbels würde ich dir eine Template-Engine ans Herz legen, schau dir bspw. Handlebars, Hogan, underscorejs, ... an. Auf globale Variablen in einer Funktion zu setzen, führt schnell zum nächsten Fehler. Zudem sollte eine Funktion so wenig wie möglich von äußeren Gegebenheiten abhängen, da du sie sonst nicht wiederverwenden kannst.

Für wenig inline-Geschubse könntest du bspw. deinen Code in eine closure packen. Pseudo-Code:

(function() {

    var switchButton = document.getElementById('bild-switch_2'),
        map = new FooBar(), // deine map definition
        overlay = ...,
        content = ...,
        container = ...;

    // überprüfen, ob gerüst im DOM vorhanden
    if( switchButton == null ) {
        // error werfen, alternativ kannste auch einfach returnieren
        throw new Error( 'my script made a booboo.' )
    }


    map.on('click', function( ev ){
        
        var coordinate = ev.coordinate || false;
        
        if( ! coordinate ) {
            return;
        }
        
        if( switchButton.checked == true){
            overlay.setPosition(coordinate[0] = 45- coordinate[0], coordinate[1]);
        }else{
             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'; 
        
    });
    
})(); 

http://bonsaiden.github.io/JavaScript-Garden/
http://eloquentjavascript.net/contents.html

Ich habe jetzt follgendes ausprobiert und zeigt mir ein "Uncaught TypeError: undefined is not a function" ;-(

map.on('click', function(evt){
            coordinate = evt.coordinate;

            checkPopup(coordinate);
   
    });

function checkPopup(coordinate){
    
    if(document.getElementById('bild-switch_2').checked == true){
        overlay.setPosition(coordinate[0] = 45- coordinate[0], coordinate[1]);
    }else{
         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'; 
    
};

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.

Kann mir einer helfen, wo der Fehler liegt ;--( ?