¿Aplica un estilo de mapa de Google personalizado en OpenLayers2?


10

Recientemente me topé con este interesante artículo que muestra el potencial de agregar estilos personalizados a Google Maps. Algunos ejemplos de mapas de estilo se pueden ver aquí y usted puede diseñar su propia desde cero aquí .

Me gustaría aplicar el tema 'escala de grises' a mi mapa base de OpenLayers: ingrese la descripción de la imagen aquí

La descripción del estilo según la demostración de Google se vería de alguna manera:

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

Mi mapa de Google en OpenLayers actualmente se ve simplemente como:

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

¿Cómo podría aplicar el tema de escala de grises a mi mapa?


Google Maps Colorizr googlemapscolorizr.stadtwerk.org puede ser útil si desea definir sus propios colores específicos.
radek


Algunos ejemplos de jugar con colores: 41latitude.com/post/1268734799/google-styled-maps
radek

¿No quieres dejar ir la recompensa? :) Creo que Simo lo consiguió
Ragi Yaser Burhum

En efecto. Todavía tres días de competencia aunque;]
radek

Respuestas:


20

Parece que puede acceder directamente al objeto googlemap usando layer.mapObject .

Consulte la API de gmap para diseñar la capa: https://developers.google.com/maps/documentation/javascript/styling

Aquí hay una pequeña página de ejemplo que he creado: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

Consulte también el asistente de googlemap: https://mapstyle.withgoogle.com/


¿Tuviste éxito, Radek?
simo

@simo: No estoy seguro exactamente cómo usar 'layer.mapObject'
radek

1
@radek; vas a necesitar crear algunos de tus propios JS para definir tu estilo de mapa; Hay varios buenos ejemplos en el segundo enlace que le mostrarán un flujo muy bueno.
DEWright

1
@radek: no lo he probado, pero supongo que creas tu capa de gmap para que var glayer = new OpenLayers.Layer.Google (opciones) , luego crea tu estilo usando la sintaxis de Gmap y finalmente lo aplicas haciendo glayer.mapObject.mapTypes .set ('hiphop', jayzMapType); ver el ejemplo dado arriba. Si tengo algo de tiempo pronto, intentaré hacerlo y se lo haré saber
simo

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.