javascript - interactuar con capas geojson independientemente en google maps api v3

google-maps google-maps-api-3

Question

Me gustaría cargar dos capas geojson en mi mapa y poder aplicarles un estilo independiente con diferentes reglas. Puedo mostrar mis dos archivos geojson con el siguiente código, pero como ambos son parte del mismo objeto map.data, solo pude aplicar un estilo universal a ambos. ¿Hay alguna manera de evitar esto? En última instancia (objetivo a más largo plazo) también me gustaría poder activar y desactivar las diferentes capas con una casilla de verificación (me estoy enfocando primero en un estilo independiente para no complicar demasiado el 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);

Cualquier ayuda sería muy apreciada. Vi algunos subprocesos que parecían aplicables (como los mapas de Google GeoJSON ¿¿alternar capas de marcadores? ) Pero no estaba seguro de cómo aplicarlos específicamente para mis propósitos.

Answer 1

Así que solo tenía que hacer algo similar y necesitaba agregar 2 archivos geojson y aplicarles un estilo diferente. Lo que quieres hacer es inicializar el mapa y luego agregar 2 capas diferentes. Básicamente establece el estilo para ambos. A continuación se muestra mi código con notas. De hecho, utilicé esta función angular en un servicio y devolví una promesa.

Configure sus opciones de mapa

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

Establece tu mapa a una variable.

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

Inicializa 2 variables que tomarán capas. Hice estado y condado.

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

Luego carga los archivos GeoJson para cada capa.

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

Después de eso establece el estilo para cada capa.

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

El último paso es establecer la capa en el mapa.

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

Después de esto, devolví una promesa, pero podría devolver el objeto de mapa. ¿Tiene sentido / ayuda responder a tu pregunta?

Además, dentro de cada función setStyle () de capa, puede agregar un estilo dinámico a través de las funciones. Como agregar una función a fillColor que cambiaría el color según los datos en el archivo GeoJson.