Radio Button

JQJava · 21. Mai 2014

Hallo,

kann mir einer Helfen wie ich mit Radio Buttons die Bilder wechsel in Openlayers 3?

Mein Code:

Code:

<div id="tree" class="span2">
                        <fieldset id="layerA">
                            <label class="radio" for="bild-switch_1">
                                <input id="bild-switch_1" class="bild-switch_1a" type="radio" name="bilder" value="bild1" onchange="checkedRadioBtn()" checked />Bild1
                             </label>
                            <label class="radio" for="bild-switch_2">
                                <input id="bild-switch_2" class="bild-switch_1a" type="radio" name="bilder" value="Bild2" onchange="checkedRadioBtn()" />Bild2
                             </label>
                            <label class="radio" for="bild-switch_3">
                                <input id="bild-switch_3" class="bild-switch_1a" type="radio" name="bilder" value="Bild3" onchange="checkedRadioBtn()" />Bild3
                             </label>
                        </fieldset>
                </div>

und Javascript:

Code:

function checkedRadioBtn(){
    var radios = document.getElementsByName('input');
    var value;
    for(var i =0; i< radios.length; i++){
        if(radios[i].type === 'radio' && radios[i].checked){
            value = radios[i].value;
        }
    }
};

mein Javascript ist nicht ganz fertig. Ich weiß nicht wie ich die Bilder wechsel. Wenn ich Radio Bild1 klicke dann soll der mir anzeigen, wenn Bild2 dann Bild 2 anzeigen.

Ich freue mich sehr auf eine Hilfe und Ratschläge!

lg

kkapsner · 21. Mai 2014

Wo sind die Bilder denn definiert? Wie sind die Werte in den <input type="radio"> mit irgendwelchen URLs verknüpft?

PS: bist du dir sicher, dass du nur diese drei Radiobuttons auf der ganzen Seite haben wirst?

miniA4kuser · 21. Mai 2014

Werden oder sollen die (gewählten) Bilder dann durch Openlayers verarbeitet bzw. eingebunden werden?
Etwas mehr, nein! Eigentlich viel mehr Informationen werden gebraucht, um die ordentlich weiterhelfen zu können.
Oder eine Beispielseite machen, wo wir sehen können was du bis jetzt so programmiert hast.

Deine Frage ist nämlich so spartanisch, wie wenn ich fragen würde: Hallo,
kann mir einer Helfen wie ich mit Maus und Tastatur einen Brief schreibe in Windows 8?

JQJava · 22. Mai 2014

Sorry für die wenige Informationen.

Nochmal mein ganzer Code.
HTML:

Code:

<div id="tree" class="span2">
                        <fieldset id="layerA">
                            <label class="radio" for="bild-switch_1">
                                <input id="bild-switch_1" class="bild-switch_1a" type="radio" name="bilder" value="bild1" onchange="checkedRadioBtn()" checked />Bild1
                             </label>
                            <label class="radio" for="bild-switch_2">
                                <input id="bild-switch_2" class="bild-switch_1a" type="radio" name="bilder" value="Bild2" onchange="checkedRadioBtn()" />Bild2
                             </label>
                            <label class="radio" for="bild-switch_3">
                                <input id="bild-switch_3" class="bild-switch_1a" type="radio" name="bilder" value="Bild3" onchange="checkedRadioBtn()" />Bild3
                             </label>
                           <label class="radio" for="bild-switch_4">
                                <input id="bild-switch_4" class="bild-switch_1a" type="radio" name="bilder" value="Bild4" onchange="checkedRadioBtn()" />Bild4
                             </label>
                          <label class="radio" for="bild-switch_5">
                                <input id="bild-switch_5" class="bild-switch_1a" type="radio" name="bilder" value="Bild5" onchange="checkedRadioBtn()" />Bild5
                             </label>
                        </fieldset>
                </div>

Dann mein Javascipt. Habe den umgeändert.

Code:

function checkedRadioBtn(){

    var newL;
if(document.getElementById("bild-switch_1").checked){

        newL = new ol.layer.Image({
             source: new ol.source.ImageStatic({
                url: 'Bild1.png', 
                imageSize: [122, 44],
                projection: proj,
                imageExtent: proj.getExtent()
            })
        });
        
    }else if(document.getElementById("bild-switch_2").checked){

        newL = new ol.layer.Image({
             source: new ol.source.ImageStatic({
                url: 'Bild2.png', 
                imageSize: [722, 154],
                projection: proj,
                imageExtent: proj.getExtent()
            })
        });
     ...
 map.removeLayer(baseLayer);
     map.addLayer(newL);
};

Das anklicken von Radiobutton funktioniert. Aber mir ist aufgefallen, dass das vorherige Bild nicht entfernt wird. Wenn das vorherige Bild etwas größer war als das danach, dann sieht man noch den Rest des vorherigen Bild.

Hier der Link dazu. Nur die Bilder werden nciht angezeigt. Aber da habt ihr dann den kompletten Code.
Edit fiddle - JSFiddle

Freue mich auf weitere Hilfe!

mikdoe · 22. Mai 2014

In Stack steht was dazu: javascript - Removing a layer in OpenLayers - Stack Overflow
Hilft das?

JQJava · 22. Mai 2014

Trotzdem vielen Dank für eure Hilfe, aber jetzt klappt es.

Code:

var allLayers = map.getLayers(baseLayer).getArray()[0];
map.removeLayer(allLayers);

Den Code führe ich vor der if-Bedingung aus. Es funktioniert auch!

Bei weiteren Fragen, darf ich mich jederzeit melden, oder?

mikdoe · 22. Mai 2014

JQJava schrieb:
Bei weiteren Fragen, darf ich mich jederzeit melden, oder?

Ja, sicher! Und empfehl uns weiter

JQJava · 22. Mai 2014

Ich habe jetzt eine andere Frage. Wie ihr oben sieht und im Link Edit fiddle - JSFiddle.
Habe ich jede Menge if-Bedingungen bei function checkedRadioBtn(){...}; stehen. Da ich noch 18 Bilder und über 200 Zeilencode habe, will ich dies irgendwie verkürzen, wenn es geht. Könnt ihr mir da weitere Tipps geben? Wäre echt dankbar!

kkapsner · 23. Mai 2014

Da du jQuery schon am Start hast, kannst du es auch verwenden...

Aber zu deiner Frage: ja, man kann den Code extrem verkürzen, indem man Daten und Funktionalität trennt. Soll heißen:

pack' alle Informationen in das HTML und nichts ins JS:

HTML:

<fieldset id="layerA">
                            <label class="radio">
                                <input class="bild-switch_1a" type="radio" name="bilder" value="Bild1" data-image="Bild1.png" data-image-width="733" data-image-height="152" checked/>Bild 1
                             </label>
                            <label class="radio">
                                <input class="bild-switch_1a" type="radio" name="bilder" value="Bild2" data-image="Bild2.png" data-image-width="2476" data-image-height="574"/>Bild 2
                             </label>
                            <label class="radio">
                                <input class="bild-switch_1a" type="radio" name="bilder" value="Bild3" data-image="Bild3.png" data-image-width="2458" data-image-height="609"/>Bild 3
                             </label>
                            <label class="radio">
                                <input class="bild-switch_1a" type="radio" name="bilder" value="Bild4" data-image="Bild4.png" data-image-width="2447" data-image-height="338"/>Bild 4
                             </label>
                            <label class="radio">
                                <input class="bild-switch_1a" type="radio" name="bilder" value="Bild5" data-image="Bild5.png" data-image-width="2449" data-image-height="333"/>Bild 5
                             </label>
                            <label class="radio">
                                <input class="bild-switch_1a" type="radio" name="bilder" value="Bild6" data-image="Bild6.png" data-image-width="2452" data-image-height="334"/>Bild 6
                             </label>
                            <label class="radio">
                                <input class="bild-switch_1a" type="radio" name="bilder" value="Bild7" data-image="Bild7.png" data-image-width="2460" data-image-height="356"/>Bild 7
                             </label>
                        </fieldset>

und greife in JS einfach nur darauf zurück:

Code:

var pixelProjection = new ol.proj.Projection({
	code: 'metrics',
	units: 'm',
	extent: [-1.5, -1.5, 420, 87]  
});

var map = new ol.Map({
    layers: [baseLayer],
    target: 'map',
    view: new ol.View2D({
        projection: pixelProjection,
        center: ol.extent.getCenter(pixelProjection.getExtent()),
        zoom: 2
    })
});

map.addControl(new ol.control.ZoomSlider());

$(document).ready(function(){
    var layer = null;
    $(".bild-switch_1a").change(function(){
        var $this = $(this);
        if (layer){
            map.removeLayer(layer);
        }
        if (this.checked){
            layer = new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url: $this.data("image"), 
                    imageSize: [$this.data("imageWidth"), $this.data("imageHeight")],
                    projection: pixelProjection,
                    imageExtent: pixelProjection.getExtent()
                })
            });
        }
    }).change();
});

- ungetestet.

JQJava · 23. Mai 2014

Erst mal vielen Dank für deine Hilfe kkapsner!

Ich habe deinen Vorschlag mal ausprobiert, aber leider funktioniert es nicht so ganz wie ich es haben will. Aber ich habe eine andere Lösung dazu grob mitgeteilt bekommen und habe dies versucht zu realisieren. Aus über so vielen LOC hat es sich dermaßen sehr reduziert.
Hier mein Lösungsansatz:

Code:

<label class="radio">
                                <input class="bild-switch_1a" type="radio" name="bilder" value="Bild1" data-image="Bild1.png" onchange="RadioButton('Bild1.png', [733, 152])" checked/>Bild 1
                             </label>

JS:

Code:

function RadioButton(url, size){
    newL = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: url, 
            imageSize: size,
            projection: proj,
            imageExtent: proj.getExtent()
        })
    });
    map.removeLayer(layer);
    var allLayers = map.getLayers().getArray()[0];
    map.removeLayer(allLayers);

    for(var i = 0; i<icons.length; i++){
        map.removeLayer(icons[i]);   
    }  
    map.addLayer(newL);
    map.updateSize();
};

Es klappt! ;-) Was hält ihr zu dieser Lösung?

JQJava · 23. Mai 2014

Mit welcher Methode kann ich herausfinden wie groß mein Bild ist? Damit ich in

Code:

var projec= new ol.proj.Projection({
	code: 'metrics',
	units: 'm',
	extent: [-1.5, -1.5, ?, ?]  
});

bei den Fragenzeichen (?) die richtige Werte stehen habe. Damit auch die Meter angaben stimmen.
Ich möchte dies mit einem Dreitsatz berechnen, aber zuerst muss ich herausfinden, wie groß mein Bild ist.
Kann mir da einer helfen?

kkapsner · 24. Mai 2014

Ist im Grunde genommen das gleiche in grün und mit inline-Eventlistener (bäh...).

Sind denn die Maßstäbe für alle Bilder gleich? Wenn nicht, musst du ja für jedes Bild ein neues Projection-Objekt erstellen. Das kannst du ja in der Funktion RadioButton() (in JS werden normale Funktionen meistens mit Kleinbuchstaben am Anfang geschrieben. Konstruktoren haben einen Großbuchstaben.) direkt vor dem "newL = ..." machen und dir richtigen Werte kannst du ja auch als Parameter übergeben.

JQJava · 26. Mai 2014

Wäre es vielleicht besser wenn die den gleichen Maßstab hätten? Also die Bilder? Weil die ganzen Bildern haben zusammen alle einen Zusammenhang.
Ich habe folgendes programmiert und würde gerne wissen, ob mein Code soweit korrekt ist.

function checkedRadioBtn(){...};
Den code habe ich hier: Edit fiddle - JSFiddle

Vorgehen:

Code:

 <label class="radio" for="bild-switch_1"><input id="bild-switch_3" class="bild-switch_1a" type="radio" name="bilder" value="Bild3" onchange="checkedRadioBtn('Bild1.png', [733,152])" />Bild 3
</label>

die Projection ist 444, 66 da jedes Bild ja unterschiedlich groß ist habe ich den yMax mit Dreisatz berechnet. Spricht 444*152/733 = 92 soll mein yMax sein. Also meine Höhe. Und so habe ich für die anderen Bilder die ich selektiere gemacht. Richtig so?

Mein nächstes Problem wäre, dass wenn ich ein Radio button aktiviere und dann zeichnen will und danach ein anderes Radio button aktiviere, dann wird die Zeichnung im Hintergrund gesehen und die Bilder überlappen sich. Leider finde ich den Fehler nicht und würde mich freuen, wenn ihr mir dabei weiterhelfen könnt. Code ist auch in fiddle: function checkMeassure(){...};

lg

kkapsner · 28. Mai 2014

JQJava schrieb:
Wäre es vielleicht besser wenn die den gleichen Maßstab hätten? Also die Bilder? Weil die ganzen Bildern haben zusammen alle einen Zusammenhang.

Klingt nach einer guten Idee. Aber wenn die Bilder einen unterschiedlichen Maßstab haben, musst du das auch irgendwo speichern - bzw. dem Skript sagen.

JQJava schrieb:
Ich habe folgendes programmiert und würde gerne wissen, ob mein Code soweit korrekt ist.

Da das fiddle nicht funktionabel ist und ich gerade keine Zeit hab', mich da durchzufuchsen, kann ich dir das nicht sagen. Aber funktioniert denn alles so, wie du es gerne hättest?

JQJava schrieb:
die Projection ist 444, 66 da jedes Bild ja unterschiedlich groß ist habe ich den yMax mit Dreisatz berechnet. Spricht 444*152/733 = 92 soll mein yMax sein. Also meine Höhe. Und so habe ich für die anderen Bilder die ich selektiere gemacht. Richtig so?

Woher sollen wir das wissen? Nur du kennst die Verhältnisse auf deinen Bildern...

JQJava schrieb:
Mein nächstes Problem wäre, dass wenn ich ein Radio button aktiviere und dann zeichnen will und danach ein anderes Radio button aktiviere, dann wird die Zeichnung im Hintergrund gesehen und die Bilder überlappen sich. Leider finde ich den Fehler nicht und würde mich freuen, wenn ihr mir dabei weiterhelfen könnt. Code ist auch in fiddle: function checkMeassure(){...};

Sollten die Bilder nicht durch die ganzen .removeLayer() Sachen verschwinden? Ich sehe auch nicht, dass checkMeassure() irgendwo aufgerufen wird...

JQJava · 02. Juni 2014

Vielen Dank für eure Hilfe! ;-D Es klappt. Habe die eingefügten Layers einfach in einem Array gespeichert und dann die aufgerufen udn glöscht.

kkapsner · 02. Juni 2014

Bitte - gern geschehen.

Radio Button

JQJava

New member

kkapsner

Super Moderator

miniA4kuser

Lounge-Member

JQJava

New member

mikdoe

Moderator

JQJava

New member

mikdoe

Moderator

JQJava

New member

kkapsner

Super Moderator

JQJava

New member

JQJava

New member

kkapsner

Super Moderator

JQJava

New member

kkapsner

Super Moderator

JQJava

New member

kkapsner

Super Moderator