Appliquer un style de carte Google personnalisé dans OpenLayers2?


10

Récemment, je suis tombé sur cet article intéressant montrant le potentiel d'ajouter des styles personnalisés à Google Maps. Quelques exemples de cartes stylisées peuvent être vus ici et vous pouvez concevoir votre propre à partir de zéro ici .

Je voudrais appliquer le thème "niveaux de gris" à ma carte de base OpenLayers: entrez la description de l'image ici

La description du style selon la démo de Google ressemblerait en quelque sorte à:

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

Ma carte Google dans OpenLayers ressemble actuellement simplement à:

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

Comment puis-je appliquer un thème en niveaux de gris à ma carte?


Google Maps Colorizr googlemapscolorizr.stadtwerk.org peut être utile si vous souhaitez définir vos propres couleurs spécifiques.
radek


Voici quelques exemples de jouer avec les couleurs: 41latitude.com/post/1268734799/google-styled-maps~~V~~plural~~3rd
radek

Vous ne voulez pas lâcher la prime? :) Je pense que simo l'a compris
Ragi Yaser Burhum

En effet. Encore trois jours de compétition tho;]
radek

Réponses:


20

Il semble que vous puissiez accéder directement à l'objet googlemap à l'aide de layer.mapObject .

Reportez-vous à l'API gmap pour styliser la couche: https://developers.google.com/maps/documentation/javascript/styling

Voici une petite page d'exemple que j'ai créée: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

Voir également l'assistant googlemap: https://mapstyle.withgoogle.com/


Avez-vous réussi, Radek?
simo

@simo: Je ne sais pas exactement comment utiliser « layer.mapObject »
radek

1
@radek; vous devrez créer certains de vos propres JS pour définir le style de votre carte; il y a plusieurs bons exemples sur le deuxième lien là-bas qui vous montreront un très bon flux.
DEWright

1
@radek: Je ne l'ai pas testé mais je suppose que vous créez votre couche gmap comme suit var glayer = new OpenLayers.Layer.Google (options) , puis créez votre style en utilisant la syntaxe Gmap, et enfin appliquez-le en faisant glayer.mapObject.mapTypes .set («hiphop», jayzMapType); voir l'exemple donné ci-dessus. Si j'ai un peu de temps, je vais essayer de le faire et je vous le ferai savoir
simo

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.