Menerapkan gaya peta Google khusus di OpenLayers2?


10

Baru-baru ini saya menemukan artikel menarik ini yang menunjukkan potensi menambahkan gaya khusus ke Google Maps. Beberapa contoh peta gaya dapat dilihat di sini dan Anda dapat mendesain sendiri dari awal di sini .

Saya ingin menerapkan tema 'greyscale' ke peta dasar OpenLayers saya: masukkan deskripsi gambar di sini

Deskripsi gaya menurut demo Google akan terlihat seperti:

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

Peta Google saya di OpenLayers saat ini terlihat seperti:

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

Bagaimana saya bisa menerapkan tema skala abu-abu ke peta saya?


Google Maps Colorizr googlemapscolorizr.stadtwerk.org dapat membantu jika Anda ingin menentukan warna spesifik Anda sendiri.
radek


Beberapa contoh bermain dengan warna: 41latitude.com/post/1268734799/google-styled-maps
radek

Tidak ingin melepaskan karunia? :) Saya pikir simo mengerti
Ragi Yaser Burhum

Memang. Masih tiga hari kompetisi;]
radek

Jawaban:


20

Tampaknya Anda dapat langsung mengakses objek googlemap menggunakan layer.mapObject .

Rujuk ke gmap API untuk menata layer: https://developers.google.com/maps/documentation/javascript/styling

Ini adalah contoh halaman kecil yang saya buat: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

Lihat juga panduan googlemap: https://mapstyle.withgoogle.com/


Apakah Anda berhasil, Radek?
simo

@simo: Saya tidak yakin bagaimana cara menggunakan 'layer.mapObject'
radek

1
@radek; Anda perlu membuat beberapa JS Anda sendiri untuk menentukan gaya peta Anda; ada beberapa contoh bagus pada tautan kedua yang akan menunjukkan aliran yang sangat baik kepada Anda.
DEWright

1
@radek: Saya belum mengujinya, tetapi saya kira Anda membuat lapisan gmap Anda sebagai var glayer = OpenLayers.Layer.Google baru (opsi) , kemudian buat gaya Anda menggunakan sintaks Gmap, dan akhirnya menerapkannya dengan melakukan glayer.mapObject.mapTypes .set ('hiphop', jayzMapType); lihat contoh yang diberikan di atas. Jika saya punya waktu dekat, saya akan coba melakukannya dan beri tahu
simo

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.