style wielu plików GeoJson z warstwą danych Google Maps JavaScript API v3

Question

Mam witrynę, która używa google api v3 do wyświetlania wielokątów z plików json.

Witryna ma wiele wielokątów json, muszę nadać każdemu wielokątowi inny kolor i utworzyć uchwyt do kształtu.

Jedyne przykłady, które można znaleźć odnoszą się do czystych wielokątów i plików nie json, jest jednym z przykładów, który zmienia plik json (nie mogę tego zrobić, ponieważ pliki json są statyczne kod

próbki.

var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: { lat: 45, lng: -90 } 
    }); 


//1st Json file 
map.data.loadGeoJson(
     'https://storage.googleapis.com/mapsdevsite/json/google.json'); 

//2nd json file (same as #1 for illustration purpose) 
map.data.loadGeoJson(
     'https://storage.googleapis.com/mapsdevsite/json/google.json'); 

    // I want to style each Json file independently 
    map.data.setStyle({ 
     fillColor: 'green', 
     strokeWeight: 1 
    }); 

    // map1.setMap(map); 


} 

udało mi się uzyskać warstwę dodana do mapy przy użyciu,

data_layer.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json'); 


    // Construct the polygon. 
    var nLayer = new google.maps.JSON({ 
     paths: data_layer, 
     strokeColor: 'green', 
     strokeOpacity: 0.5, 
     strokeWeight: 1, 
     fillColor: 'green', 
     fillOpacity: 0.8 
    }); 

    nLayer.setMap(map); 

nie mogę styl nałożenia na mapie. jakieś pomysły?

Answer 1

Stworzyłem demo on github gdzie załadować wielokąty (granice) używając Data Layer i ja również pokazać, jak zachować odniesienie do odpowiednich wielokątów i aktualizować swoje specyficzne style. Sprawdź kod this SO answer (nie chcę go tutaj kopiować, ponieważ jest zbędny).

Wskazówka głównie: new_boundary.feature = data_layer.getFeatureById(boundary_id); gdzie przechowywać odniesienie do konkretnej funkcji, które style mogę zaktualizować w każdej chwili za pomocą np .:

data_layer.overrideStyle(new_boundary.feature, { 
    fillColor: '#0000FF', 
    fillOpacity: 0.9 
}); 

I to wystarczy zaktualizować że jeden wielokąt, nie wszystkie z nich. Jeśli więc twoje wielokąty w plikach geoJSON mają unikalne identyfikatory lub możesz przypisać je do wszystkich, możesz na ich podstawie odwoływać się i zmieniać ich style.

Inną opcją, nie pokazaną w przykładzie, jest posiadanie wielu warstw danych. W aplikacji można umieścić wiele warstw danych, np. utworzyć je tak:

var data_layer = new google.maps.Data({map: map}); 
var data_layer_2 = new google.maps.Data({map: map}); 

a następnie załadować dane do nich i zmieniać style:

data_layer.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json'); 
data_layer_2.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json'); 
data_layer.setStyle({ 
    fillColor: 'green', 
    strokeWeight: 1 
}); 
data_layer_2.setStyle({ 
    fillColor: 'blue', 
    strokeWeight: 2 
}); 

Answer 2

Myślę, że będziesz chciał dodać wielokąty i ich styl indywidualnie. Z przykładu (https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays)

// Define the LatLng coordinates for the polygon. 
var triangleCoords = [ 
    {lat: 25.774, lng: -80.190}, 
    {lat: 18.466, lng: -66.118}, 
    {lat: 32.321, lng: -64.757} 
]; 

// Construct the polygon. 
var bermudaTriangle = new google.maps.Polygon({ 
    paths: triangleCoords, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35 
}); 
bermudaTriangle.setMap(map);