Stosujesz niestandardowy styl mapy Google w OpenLayers2?


10

Ostatnio natknąłem się na ten interesujący artykuł pokazujący potencjał dodawania niestandardowych stylów do Map Google. Niektóre przykłady stylu mapach można zobaczyć tutaj i można zaprojektować własne od podstaw tutaj .

Chciałbym zastosować motyw „skali szarości” do mojej mapy bazowej OpenLayers: wprowadź opis zdjęcia tutaj

Opis stylu zgodny z wersją demonstracyjną Google wyglądałby jakoś:

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

Moja mapa Google w OpenLayers wygląda obecnie tak:

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

Jak mogę zastosować motyw skali szarości do mojej mapy?


Google Maps Colorizr googlemapscolorizr.stadtwerk.org może być pomocny, jeśli chcesz zdefiniować własne kolory.
radek


Kilka przykładów zabawy kolorami: 41latitude.com/post/1268734799/google-styled-maps
radek

Nie chcesz puścić nagrody? :) Myślę, że simo to dostało
Ragi Yaser Burhum,

W rzeczy samej. Jeszcze trzy dni zawodów;]
radek

Odpowiedzi:


20

Wygląda na to, że możesz bezpośrednio uzyskać dostęp do obiektu googlemap za pomocą layer.mapObject .

Zapoznaj się z interfejsem API gmap, aby stylizować warstwę: https://developers.google.com/maps/documentation/javascript/styling

Oto mała przykładowa strona, którą utworzyłem: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

Zobacz także kreator googlemap: https://mapstyle.withgoogle.com/


Udało ci się, Radku?
simo

@simo: Nie jestem pewien, jak dokładnie używać „layer.mapObject”
radek,

1
@radek; będziesz musiał stworzyć własny JS, aby zdefiniować styl mapy; na drugim linku znajduje się kilka dobrych przykładów, które pokażą ci bardzo dobry przepływ.
DEWright

1
@radek: Nie przetestowałem tego, ale wydaje mi się, że tworzysz warstwę gmap jako var varlayer = new OpenLayers.Layer.Google (opcje) , następnie stwórz swój styl za pomocą składni Gmap i na koniec zastosuj go wykonując glayer.mapObject.mapTypes .set („hiphop”, jayzMapType); patrz podany przykład powyżej. Jeśli niedługo będę miał czas, postaram się to zrobić i powiadomię cię
simo

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.