Marker-Icons abhängig von der Zoomstufe

Communities Deutschland (Germany)
#1

Hallo zusammen

Ich arbeite gerade das erste mal mit einer GEO-Karte. Nun besagt meine Aufgabenstellung, das ich die enthaltenen Marker welche benutzt werden je nach Zoom-Sufe unterschiedlich in Größe und verwendeter Grafik sein sollen.

Ich habe mit

map.events.register('moveend', map, handleZoom);

ein Event registriert, welche auch korrekt angesprochen wird.

            function handleZoom(event) {
                var akt_zoom = map.getZoom();

                if ( akt_zoom <= 9 ) {
                    // Change Icon ....
                }
            }

Nun tappe ich im Dunklen, wie ich es bewerkstellige den Marker-Icon zu verändern.
Ich würde mich über Infos und Hilfestellungen wirklich freuen.

Danke

#2

Hier gäbe es ein paar Ansätze für eine Umsetzung.

#3

Das habe ich auch gefunden. Es ist meiner Ansicht nach auch eine gute Idee. Nur lese ich da raus, das dies ein anderes Frame-Work ist; zumindest aber eine andere JS-Datei.
Ist diese irgendwo zu finden? Auf der Seite an sich finde ich nichts :frowning:

:Edit
habe gerade versucht, mich dort anzumelden (funktioniert alles nur über API-Key) – leider werden keine neuen Registrierungen angenommen. Diese Möglichkeit scheidet also leider aus.

#4

So? Für dich sollte dann die function resize maßgebend sein…

#5

ich habe die Funktion umbauen wollen, das er mir das Bild austauscht …
irgendwie funktioniert es aber nicht so – es passiert nichts.
Ist eventeull eine Ursache, das als Ausgangs-Situation eine XML verwendet wird, welche über

new OpenLayers.Layer.GeoRSS

eingelesen wird?
In der habe ich nämlich den icon definiert.

:Edit
Ich habe nun den folgenden Ansatz gefunden:

            var marker_klein = 'map2_point4.gif';
            var marker_gross = 'map2_point4.png';
            var size_1       = new OpenLayers.Size(10, 10);
            var size_2       = new OpenLayers.Size(22, 22);
            var marker_1     = new OpenLayers.Icon(marker_klein, size_1);
            var marker_2     = new OpenLayers.Icon(marker_gross, size_2);
.....
            function handleZoom(event) {
                var akt_zoom = map.getZoom();

                if (akt_zoom <= 9) {
                    if ( marker_aktuell != marker_klein ) {
                        setOverlayIcons(2);
                    }
                } else {
                    if ( marker_aktuell != marker_gross ) {
                        setOverlayIcons(1);
                    }
                }
            }

            function setOverlayIcons(marker_mode)
            {
                if ( marker_mode == 1 ) {
                    var size = size_1;

                    marker_aktuell = marker_klein;
                } else {
                    var size = size_2;

                    marker_aktuell = marker_gross;
                }

                var rss_data = georss2.features;
                var offset   = new OpenLayers.Pixel(-(size.w/2), -size.h);
                var icon     = new OpenLayers.Icon(marker_aktuell, size, offset);

                for (var i = 0; i < rss_data.length; i++) {
                    var feature = rss_data[i];
                    var newdata = feature.data;

                    newdata.icon = icon;
                    georss2.removeMarker(feature.marker);

                    var newfeature = new OpenLayers.Feature(georss2, feature.lonlat, newdata);
                    var marker     = newfeature.createMarker();

                    marker.events.register('click', newfeature, georss2.markerClick);

                    georss2.features[i] = newfeature;
                    georss2.addMarker(marker);
                }
            }

damit entfernt er zwar alle Marker korrekt – aber er fügt die neuen nicht ein. Auch wenn ich dann wieder raus zoome, bleiben die Marker “verschwunden”

#6

Hallo
Nach ewigen rumprobieren und testen habe ich nun eine Lösung, welche auch funktioniert.
Der Tipp mit den Zoom war definitiv falsch. Die lösung habe ich in einem alten Thread von 2007 gefunden

als erstes habe ich die (in meinem Fall 2) Icon global definiert

            var marker_klein = 'map2_point4.gif';
            var marker_gross = 'map2_point4.png';
            var size_1       = new OpenLayers.Size(10, 10);
            var size_2       = new OpenLayers.Size(22, 22);
            var marker_1     = new OpenLayers.Icon(marker_klein, size_1);
            var marker_2     = new OpenLayers.Icon(marker_gross, size_2);

in der Funktion init() der RSS-Teil

                georss2 = new OpenLayers.Layer.GeoRSS( 'GeoRSS dynamisch',
                                                       'map2_big.xml',
                                                       {
                                                         'projection'         : proj4326,
                                                         'internalProjection' : proj4326,
                                                         'externalProjection' : proj4326,
                                                         'visibility'         : true,
                                                         'icon'               : marker_1
                                                       }
                                                     );

........

                map.events.register('zoomend', map, handleZoom);

als nächstes unter zoomend die neue Funktion

            function handleZoom(event) {
                var akt_zoom = map.getZoom();

                if (akt_zoom <= 9) {
                    if ( marker_aktuell != marker_klein ) {
                        marker_aktuell = marker_klein;
                        setOverlayIcons(marker_klein, size_1);
                    }
                } else {
                    if ( marker_aktuell != marker_gross ) {
                        marker_aktuell = marker_gross;
                        setOverlayIcons(marker_gross, size_2);
                    }
                }
            }

In der wird überprüft, welche Zoom-Stufe gewählt ist und dann entsprechend die eigendliche Funktion zum wechseln des Icon aufgerufen.

            function setOverlayIcons(grafik, size)
            {
                var rss_data = georss2.features;
                var anzahl   = rss_data.length;

                for (var i = 0; i < anzahl; i++) {
                    var feature = rss_data[i];
                    var newdata = feature.data;

                    // Unbedingt einen neuen Icon erstellen, da der vom
                    // vorigen Schleifendurchlauf sonst verschwindet!!
                    var icon = new OpenLayers.Icon(grafik, size);

                    newdata.icon = icon;

                    var newfeature = new OpenLayers.Feature(georss2, feature.lonlat, newdata);

                    georss2.features[i] = newfeature;

                    var marker = newfeature.createMarker();

                    marker.events.register('click', newfeature, georss2.markerClick);

                    georss2.removeMarker(feature.marker);
                    georss2.addMarker(marker);
                }
            }

In der Schleife werden alle Icons eines Layers aufgerufen und der Reihe nach mit dem neuen Bild versehen. Danach wird das alte OnClick im neuen Incon registriert und der “alte” Icon vom Layer entfernt. Dann wird der “neue” hinzugefügt.
Das wars dann auch schon :slight_smile: