interagisce con i layer geojson in modo indipendente in google maps api v3

Question

Vorrei caricare due layer geojson sulla mia mappa ed essere in grado di modificarli in modo indipendente con regole diverse. Posso visualizzare entrambi i miei file geojson con il codice seguente, ma dal momento che entrambi fanno parte dello stesso oggetto map.data, sono stato in grado di applicare entrambi lo stile universale a entrambi. C'è un modo per aggirare questo? Infine (obiettivo a lungo termine) Vorrei anche essere in grado di commutare i diversi strati e disattivata con una casella di controllo così (mi sto concentrando sulla designazione indipendente prima in modo da non complicare il problema)

function initialize() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 12, 
    center: {lat: 39.218509, lng: -94.563703} 
}); 

map.data.loadGeoJson('https://url1'); 
map.data.loadGeoJson('https://url2'); 

map.data.setStyle(function(feature) { //styling rules here} 

google.maps.event.addDomListener(window, 'load', initialize); 

qualsiasi l'aiuto sarebbe molto apprezzato Ho visto alcuni thread che sembravano applicabili (ad esempio Google maps GeoJSON- toggle marker layers?) ma non ero sicuro di come applicarlo specificamente per i miei scopi.

Answer 1

Quindi ho dovuto fare qualcosa di simile e avevo bisogno di aggiungere 2 file geojson e di modificarli in modo diverso. Quello che vuoi fare è inizializzare la mappa e poi aggiungere 2 diversi livelli. Fondamentalmente impostare lo stile per entrambi. Di seguito è riportato il mio codice con le note. In realtà ho usato questa funzione Angolare in un servizio e ho restituito una promessa.

Impostare le opzioni mappa

var mapOptions = { 
      zoom: 4, 
      scrollwheel: false, 
      center: new google.maps.LatLng(40.00, -98), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

Impostare la mappa per una variabile.

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

Inizializza 2 variabile che richiederà livelli. Ho fatto stato e contea.

var countyLayer = new google.maps.Data(); 
var stateLayer = new google.maps.Data(); 

Quindi caricare i file GeoJson per ogni livello.

countyLayer.loadGeoJson('counties.json'); 
stateLayer.loadGeoJson('states.json'); 

Quindi impostare lo stile per ogni livello.

stateLayer.setStyle({ 
    strokeColor: 'red', 
    strokeWeight: 5 
}); 

countyLayer.setStyle({ 
    strokeColor: 'black', 
    strokeWeight: 1 
}); 

L'ultimo passaggio è impostare il livello sulla mappa.

countyLayer.setMap(map); 
stateLayer.setMap(map); 

Dopo questo ho restituito una promessa, ma si può solo restituire l'oggetto della mappa. Questo ha senso/aiuta a rispondere alla tua domanda?

Inoltre, all'interno di ogni funzione setStyle() è possibile aggiungere uno stile dinamico tramite le funzioni. Come aggiungere una funzione a fillColor che cambierebbe il colore in base ai dati nel file GeoJson.