Взаимодействовать с уровнями geojson независимо в google-картах api v3

Я хотел бы загрузить два слоя geojson на мою карту и иметь возможность самостоятельно их настраивать с помощью разных правил. Я могу отображать оба моих файла geojson с приведенным ниже кодом, но поскольку они являются частью одного и того же объекта map.data, я смог применить универсальный стиль для обоих. Есть ли способ обойти это? В конечном счете (более долгосрочная цель) я также хотел бы иметь возможность включать и выключать различные слои с помощью флажка (сначала я фокусируюсь на независимом стилировании, чтобы не перекомплементировать проблему).

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

любая помощь будет очень оценена. Я видел некоторые потоки, которые выглядели применимыми (например, Google отображает GeoJSON - переключение уровней маркеров?), но я не был уверен, как применять его специально для моих целей.

Ответы

Ответ 1

Так что мне просто нужно было сделать что-то подобное, и вам нужно было добавить 2 файла geojson и по-разному их стиль. То, что вы хотите сделать, это инициализировать карту, а затем добавить 2 разных слоя. В основном задан стиль для обоих. Ниже мой код с заметками. Я фактически использовал эту функцию Angular в сервисе и вернул обещание.

Настройте параметры своей карты.

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

Установите карту в переменную.

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

Инициализировать 2 переменную, которая будет принимать слои. Я сделал состояние и графство.

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

Затем загрузите файлы GeoJson для каждого слоя.

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

После этого задайте стиль для каждого слоя.

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

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

Последний шаг - установить слой на карту.

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

После этого я вернул обещание, но вы можете просто вернуть объект карты. Означает ли это/помогает ответить на ваш вопрос?

Кроме того, в пределах каждой функции setStyle() вы можете добавить динамическое стилирование через функции. Например, добавьте функцию fillColor, которая изменит цвет на основе данных в файле GeoJson.