Czy możliwe jest wyszarzenie mapy Google Maps z wyjątkiem niektórych obszarów?

15

To, czego szukam, to sposób na podkreślenie określonego obszaru na mapie Google Maps poprzez wyszarzenie reszty świata.

Słyszałem o pewnym rozwiązaniu polegającym na użyciu 2 wielokątów, z których 1 jest widoczny, a drugi nie i że działa tylko wtedy, gdy mapa jest statyczna (brak ruchu mapy). Jednak chcę, aby użytkownik mógł powiększać i przeciągać mapę.

Interesują mnie również inne sposoby, w których nie chciałem podkreślać danego obszaru.

aktualizacja:

Kiedy wypróbowuję rozwiązanie opublikowane przez radek (tj. Tworzenie pliku KML z wielokątem z externalBoundaryIs (większy niż widok) i innerBoundaryIs (będący obszarem do podkreślenia)) mam problem, że kiedy powiększam, prostokątne obszary nie są objęte otaczający wielokąt. Widzieć:

wprowadź opis zdjęcia tutaj

Ktoś z doświadczeniem / rozwiązaniem tego?

aktualizacja2:

W końcu miałem czas przetestować rozwiązanie radka za pomocą Google Fusion Tables. Na początku miałem takie same problemy z brakującymi kafelkami jak z KML (patrz obrazek powyżej), ale po kolejnym załadowaniu wygląda na to, że się podniósł i wyświetlał płytki całkowicie poprawnie. Mam wrażenie, że hack jquery w jego rozwiązaniu był przeznaczony dla płytek, które się nie ładowały:

setTimeout(function(){ 
        $("img[src*='googleapis']").each(function() { 
            $(this).attr("src",$(this).attr("src")+"&"+(new Date()).getTime()); 
        }); 
    }, 5000);

Ponieważ płytki wydawały się ładować po odświeżeniu, sam nie użyłem hacka. Jeśli błąd wystąpi dla każdego nowego użytkownika, będę z nim eksperymentować.

mrg
źródło

Odpowiedzi:

18

Blog Google Maps Mania wskazuje na przykład szwajcarskiej mapy granic administracyjnych :

wprowadź opis zdjęcia tutaj

Kod Vasilego znajduje się na github .

radek
źródło
1
To rzeczywiście pokazuje funkcjonalność, której szukam! Będę musiał zanurkować w źródle, aby sprawdzić, czy w moim przypadku jest to łatwe do wdrożenia. Mówią o włamaniach (od razu dostaję obawy związane z IE7).
mrg
Czy użycie tabel Google Fusion jest koniecznością w tym przykładzie? Nie używam tego w tej chwili. Pobiorę kod github i sprawdzę, jakie są wymagania.
mrg
2
Sprowadza się to do utworzenia wielokąta w KML z zewnętrzną granicą, która jest światem, i wewnętrzną granicą, która jest twoim obszarem zainteresowań. Oprócz trudności ze stylizowaniem przezroczystości, powiększam się, wciąż powiększając dziury w mojej półprzezroczystej warstwie. Czy ktoś ma z tym jakieś doświadczenie?
mrg
1
Pliki KML ładują się dość wolno, więc zmienianie ich przez cały czas może dać bardzo leniwy efekt. Poza tym, czy nie musiałbym ciągle zmieniać nazwy, aby mieć pewność, że stary kml nie zostanie zbuforowany? Mam wrażenie, że potrzebuję wiedzy na temat Google Fusion Tables.
mrg
1
Czy istnieje prostsza implementacja, która może używać pliku KML zamiast FusionTables? Muszę tylko podświetlić kolorem 1 ciągły obszar (granice miasta) i wyszarzyć wszystko inne. Sprawdziłem kod Vasile'a, ale jest on naprawdę skomplikowany i wydaje się zależeć od włamań do przeglądarki. Ponadto, jeśli to rozwiązanie może korzystać z sugestii Elrobisa , aby okno mapy było podstawą efektu wyszarzenia , myślę, że będzie ono znacznie bardziej stabilne / szybsze. {narysuj granicę wokół miasta i pokoloruj ją} // zrobione {wyszarz wszystko Z WYJĄTKIEM obszaru wewnątrz granicy} ??????????????
user1845528,
3

jeśli narzędzie opublikowane przez @radek ci nie pomogło, istnieje inne narzędzie, które korzysta ze zwykłych funkcji google.maps.Polygon: http://maps.vasile.ch/geomask/

Zasadniczo postępuje zgodnie z algorytmem uzwojenia: wielokąt maski (wszechświata) jest digitalizowany zgodnie z ruchem wskazówek zegara, a wszystkie wielokąty wewnętrzne są przekształcane cyfrowo w kierunku przeciwnym do ruchu wskazówek zegara http://en.wikipedia.org/wiki/Winding_number

Vasile Cotovanu
źródło