2014-04-11 43 views
7

Mam niektóre GeoJSON zwrócił z wywołania do bazy danych PostGIS. Chciałbym móc dodać znacznik dla każdej funkcji i móc przełączać różne typy znaczników/funkcji. Obecnie używam JavaScriptu do generowania znaczników dla każdej funkcji, dodając je do tablic zgodnie z typem, a następnie przechodząc przez ustawienia tablic wyświetlaj/ukryj, aby przełączać "warstwy".Google map GeoJSON- przełącza warstwy znaczników?

Działa to dobrze, ale zastanawiam się, czy nowa funkcja GeoJSON oferuje lepszy sposób na zrobienie tego. O ile jednak widzę, wszystkie funkcje są dodawane do tych samych datalayerów, a przełączanie ich zestawów wymagałoby albo ustawiania stylów, albo tylko zastępowania nowymi, wstępnie przefiltrowanymi GeoJSON.

Pytanie brzmi więc, czy możliwe jest posiadanie więcej niż jednej warstwy danych, a także łatwe dodawanie/usuwanie ich z mapy, czy lepiej byłoby spojrzeć na coś w stylu OpenLayers?

EDYCJA: Nieco więcej badań pokazuje, że jest dość prosta.

Dla każdego typu funkcji w kolekcji obiektów, którą chcemy włączyć, utwórz nowy obiekt danych. Dodaj wszystkie odpowiednie funkcje do tego obiektu danych.

var datalayer = new google.maps.Data(); 
datalayer.addGeoJson(feature); 
datalayer.setMap(mainmap); 

Następnie przechowaj każdy obiekt danych/typ funkcji jako parę klucz-wartość. Na przełącznik, wyciągnij odpowiedni obiekt danych i setMap odpowiednio:

var datalayer= featuretypesobj["feature type to toggle"]; 
datalayer.setMap(mymap); //or 
datalayer.setMap(null); 

Odpowiedz

10

Można również utworzyć oddzielne warstwy

var layer_1 = new google.maps.Data(); 
var layer_2 = new google.maps.Data(); 

następnie wypełnić go, na przykład z danych JSON

layer_1.loadGeoJson('/path/to/data.json'); 
layer_2.loadGeoJson('/path/to/data2.json'); 

następnie dodać/usunąć je na mapie

layer_1.setMap(map); 
layer_2.setMap(map); 
layer_1.setMap(null); 
2

dodać: var layer_1 = new google.maps.Data(); powinno być wykonane wewnątrz funkcji inicjalizacji mapy, jako:

var map; 

    var data_layer_for_ramps; 



    function initialize() { 

      map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 12, 
       center: new google.maps.LatLng(-33.897907, 151.179138),//-33.8151,151.0032 
       mapTypeId: 'roadmap' 
      }); 

      data_layer_for_ramps = new google.maps.Data(); 
     }