Evidenzia poligono e tinta resto della mappa utilizzando Google Maps

Question

Mi piacerebbe visualizzare un poligono evidenziato utilizzando Google Maps. L'idea è che il poligono in questione verrà visualizzato normalmente e il resto della mappa dovrebbe essere leggermente oscurato.

Ecco un immagine di esempio quello che vorrei realizzare con un poligono da Austria: alt text http://a.imagehost.org/0613/google_maps_tint_example.png

Purtroppo, io sono un rookie completa quando si tratta di Google Maps API e mappa roba in generale.

Quindi, è possibile farlo con le API di Google Maps? Se sì, con quale versione (v2, v3)? Sarebbe più facile farlo con altri toolkit di mappe, come gli openlayer?

PS: Un'idea che avevo, era quello di costruire un poligono inversa (in questo esempio, tutto il mondo meno la forma d'Austria) e quindi visualizzare una sovrapposizione di colore nero con trasparenza con questo poligono invertita. Ma mi sembra abbastanza complicato.

Answer 1

Google Maps API v3 consente di disegnare polygons con i fori. Ecco l'esempio di Google Pentagon. È molto più facile che cercare di invertire un poligono. Fondamentalmente, crea le coordinate per un poligono gigante che è più grande di quanto tu non abbia mai bisogno. Quello sarà sempre il primo poligono nel tuo poligono. L'area che stai evidenziando sarà sempre il secondo poligono.

Ecco alcuni codice per modificare Google Bermuda Triangle demo di utilizzare un poligono con un foro:

var everythingElse = [ 
    new google.maps.LatLng(0, -90), 
    new google.maps.LatLng(0, 90), 
    new google.maps.LatLng(90, -90), 
    new google.maps.LatLng(90, 90), 
    ]; 



    var triangleCoords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.75737), 
    new google.maps.LatLng(25.774252, -80.190262) 
    ]; 




    bermudaTriangle = new google.maps.Polygon({ 
    paths: [everythingElse, triangleCoords], 
    strokeColor: "#000000", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#000000", 
    fillOpacity: 0.5 
    }); 

    bermudaTriangle.setMap(map); 

Answer 2

Per quanto riguarda:

il resto della mappa dovrebbe essere oscurato un po '.

Questo può essere fatto con Maps API v3 utilizzando Styled Maps.

C'è anche un Styled Maps Wizard in cui è possibile giocare con le impostazioni, quindi premere Show JSON per far passare l'array come primo argomento su new google.maps.StyledMapType.

Per ottenere l'effetto desiderato solo di ridurre il Lightness per tutto, nella procedura guidata si vorrà vedere questo nel box Map Style a destra:

Feature type: all 
Element type: all 
Lightness: -70 

che esporterà a:

[ 
    { 
    "stylers": [ 
     { "lightness": -70 } 
    ] 
    } 
] 

E look like this.

Answer 3

UTILIZZO GeoJSON

<div id="googleMap" style="width:500px;height:380px;"></div> 

// define map properties 
    var mapProp = { 
     center: new google.maps.LatLng(23.075984, 78.877656), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
//create google map 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

// define geojson 
    var geojson = { 
     "type": "FeatureCollection", 
     "features": [{ 
      "type": "Feature", 
      "geometry": { 
       "type": "Polygon", 
       "coordinates": [ 
        [ 
         [0, 90], 
         [180, 90], 
         [180, -90], 
         [0, -90], 
         [-180, -90], 
         [-180, 0], 
         [-180, 90], 
         [0, 90] 
        ], 
        [ 
         [79.56298828125, 25.18505888358067], 
         [76.53076171875, 21.37124437061832], 
         [83.38623046875, 21.24842223562701], 
         [79.56298828125, 25.18505888358067] 
        ] 
       ] 
      }, 
      "properties": {} 
     }] 
    }; 
//add geojson to map 
    map.data.addGeoJson(geojson); 

in caso di file di GeoJSON esterna utilizzare

map.data.loadGeoJson('url-to-geojson-file'); 

nota: Google ha utilizzato .json come estensione per il file GeoJSON e non.GeoJSON https://developers.google.com/maps/documentation/javascript/datalayer

creare il GeoJSON qui
https://google-developers.appspot.com/maps/documentation/utils/geojson/

esempio di lavoro https://jsfiddle.net/841emtey/5/