interagieren mit Geojson-Schichten unabhängig in Google Maps api v3

Question

Ich möchte zwei Geojson-Ebenen in meine Karte laden und in der Lage sein, sie unabhängig voneinander mit unterschiedlichen Regeln zu stylen. Ich kann meine beiden Geojson-Dateien mit dem folgenden Code anzeigen, aber da beide Teil des gleichen map.data-Objekts sind, konnte ich nur universelles Styling auf beide anwenden. Gibt es einen Weg dazu? Letztes Ende (längerfristige Ziel) Ich möchte auch in die Lage sein mag auch die verschiedenen Schichten und Ausschalten mit einer Checkbox zu wechseln (ich auf unabhängigen Styling bin konzentriert zuerst, um das Problem nicht verkomplizieren)

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); 

jeden Hilfe würde sehr geschätzt werden. Ich sah einige Threads, die anwendungsgerecht aussahen (wie Google maps GeoJSON- toggle marker layers?), aber ich war mir nicht sicher, wie ich es speziell für meine Zwecke anwenden sollte.

Answer 1

Also musste ich einfach etwas ähnliches tun und musste 2 Geojson-Dateien hinzufügen und sie anders stylen. Was Sie tun möchten, ist die Karte zu initialisieren und dann 2 verschiedene Ebenen hinzuzufügen. Grundsätzlich legen Sie das Styling für beide fest. Unten ist mein Code mit Notizen. Ich habe tatsächlich diese Funktion Angular in einem Dienst verwendet und ein Versprechen abgegeben.

Ihre Kartenoptionen

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

Ihre Karte setzen auf eine Variable einrichten.

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

Initialize 2 Variable, die Schichten übernehmen wird. Ich habe Staat und Grafschaft gemacht.

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

Dann laden Sie die GeoJson-Dateien für jede Schicht.

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

Danach legen Sie den Stil für jede Ebene fest.

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

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

Der letzte Schritt besteht darin, die Ebene auf die Karte zu setzen.

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

Danach gab ich ein Versprechen zurück, aber Sie konnten nur das Kartenobjekt zurückgeben. Macht das Sinn/Hilfe bei der Beantwortung Ihrer Frage?

Außerdem können Sie innerhalb jeder setStyle() - Funktion dynamische Funktionen durch Funktionen hinzufügen. Fügen Sie z. B. fillColor eine Funktion hinzu, die die Farbe basierend auf Daten in der GeoJson-Datei ändert.