Anwenden eines benutzerdefinierten Google-Kartenstils in OpenLayers2?

Kürzlich bin ich auf diesen interessanten Artikel gestoßen, der das Potenzial des Hinzufügens benutzerdefinierter Stile zu Google Maps zeigt. Einige Beispiele für gestylt Karten zu sehen ist hier , und Sie können Ihre eigenen von Grund auf neu entwerfen hier .

Ich möchte das Graustufen-Thema auf meine OpenLayers-Basiskarte anwenden: Geben Sie hier die Bildbeschreibung ein

Die Stilbeschreibung laut Google- Demo würde irgendwie so aussehen:

var styles = {
  'Greyscale': [
    {              
      featureType: 'all',
      rules: [
        {saturation: -100},
        {gamma: 0.50}
      ]
    }
  ]
}

Meine Google-Karte in OpenLayers sieht derzeit einfach so aus:

var gmap = new OpenLayers.Layer.Google("Google Streets",
    {
    'numZoomLevels': 20,
    'sphericalMercator': true}
);

Wie kann ich ein Graustufenthema auf meine Karte anwenden?

openlayers-2 google-maps Radek
quelle

Google Maps Colorizr googlemapscolorizr.stadtwerk.org kann hilfreich sein, wenn Sie Ihre eigenen spezifischen Farben definieren möchten.

Radek

Siehe auch

radek

Einige Beispiele für das Spielen mit Farben: 41latitude.com/post/1268734799/google-styled-maps

Radek

Willst du das Kopfgeld nicht loslassen? :) Ich denke, Simo hat es verstanden

Ragi Yaser Burhum

Tatsächlich. Noch drei Wettkampftage tho;]

Radek

Antworten:

Es scheint, dass Sie mit layer.mapObject direkt auf das googlemap-Objekt zugreifen können .

Informationen zum Formatieren der Ebene finden Sie in der gmap-API: https://developers.google.com/maps/documentation/javascript/styling

Hier ist eine kleine Beispielseite, die ich erstellt habe: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

Siehe auch den Googlemap-Assistenten: https://mapstyle.withgoogle.com/

simo
quelle

Hast du Erfolg gehabt, Radek?

Simo

@simo: Ich bin mir nicht sicher, wie ich 'layer.mapObject' verwenden soll

radek

@radek; Sie müssen einige Ihrer eigenen JS erstellen, um Ihr Kartenstyling zu definieren. Auf dem zweiten Link gibt es einige gute Beispiele, die Ihnen einen sehr guten Ablauf zeigen.

DEWright

@radek: Ich habe es nicht getestet, aber ich denke, Sie erstellen Ihre gmap-Ebene als var glayer = new OpenLayers.Layer.Google (Optionen) , erstellen dann Ihren Stil mit der Gmap-Syntax und wenden ihn schließlich mit glayer.mapObject.mapTypes an .set ('hiphop', jayzMapType); siehe das gegebene Beispiel oben. Wenn ich bald etwas Zeit habe, werde ich versuchen, es zu tun und Sie wissen lassen

simo

@radek: Hier gehen wir empreinte-urbaine.eu/mapping/styled_gmap.html

simo