Aplicando estilo personalizado de mapa do Google no OpenLayers2?


10

Recentemente, deparei-me com este artigo interessante, mostrando o potencial de adicionar estilos personalizados ao Google Maps. Alguns exemplos de mapas estilizados podem ser vistos aqui e você pode criar seu próprio aqui a partir do zero .

Gostaria de aplicar o tema 'escala de cinza' ao meu mapa base do OpenLayers: insira a descrição da imagem aqui

A descrição do estilo de acordo com a demonstração do Google seria semelhante a:

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

Atualmente, meu mapa do Google no OpenLayers se parece com:

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

Como posso aplicar o tema em escala de cinza ao meu mapa?


O Google Maps Colorizr googlemapscolorizr.stadtwerk.org pode ser útil se você quiser definir suas próprias cores específicas.
Radek


Alguns exemplos de brincar com as cores: 41latitude.com/post/1268734799/google-styled-maps
radek

Não quer deixar ir a recompensa? :) Acho que simo entendeu
Ragi Yaser Burhum

De fato. Ainda três dias de competição tho;]
radek 11/06/11

Respostas:


20

Parece que você pode acessar diretamente o objeto googlemap usando layer.mapObject .

Consulte a API do gmap para estilizar a camada: https://developers.google.com/maps/documentation/javascript/styling

Aqui está um pequeno exemplo de página que eu criei: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

Veja também o assistente do googlemap: https://mapstyle.withgoogle.com/


Você conseguiu, Radek?
simo

@simo: Não sei exatamente como usar o 'layer.mapObject'
radek

1
@radek; você precisará criar algumas de suas próprias JS para definir o estilo do seu mapa; Existem vários bons exemplos no segundo link, que mostrarão um fluxo muito bom.
18711 Dewright 06/06

1
@radek: Eu não testei, mas acho que você cria sua camada gmap como var varayer = new OpenLayers.Layer.Google (opções) , depois cria seu estilo usando a sintaxe Gmap e, finalmente, aplica-a usando glayer.mapObject.mapTypes .set ('hiphop', jayzMapType); veja o exemplo fornecido acima. Se eu tiver algum tempo em breve, vou tentar fazê-lo e deixá-lo saber
simo

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.