Google maps GeoJSON- chuyển đổi các lớp đánh dấu?

Question

Tôi có một số GeoJSON được trả về từ một cuộc gọi đến cơ sở dữ liệu PostGIS. Tôi muốn có thể thêm điểm đánh dấu cho mỗi đối tượng địa lý và có thể chuyển đổi các loại điểm đánh dấu/đối tượng địa lý khác nhau. Hiện tại tôi đang sử dụng JavaScript để tạo điểm đánh dấu cho mỗi đối tượng địa lý, thêm chúng vào mảng theo loại và sau đó thực hiện cài đặt mảng hiển thị/ẩn khi thích hợp để chuyển đổi 'lớp'.

Điều này có tác dụng OK, nhưng tôi tự hỏi liệu chức năng GeoJSON mới có cung cấp cách tốt hơn để làm điều này không. Theo như tôi có thể thấy, tất cả các tính năng được thêm vào cùng một datalayer và toggling bộ trong số họ sẽ liên quan đến một trong hai phong cách thiết lập hoặc chỉ thay thế bằng mới, trước lọc GeoJSON.

Vì vậy, câu hỏi đặt ra là có thể có nhiều lớp dữ liệu và dễ dàng thêm/xóa chúng khỏi bản đồ hoặc tôi có tốt hơn khi nhìn vào thứ gì đó như OpenLayers không?

EDIT: Bit nghiên cứu thêm cho thấy nó khá đơn giản.

Đối với mỗi loại đối tượng địa lý trong bộ sưu tập tính năng mà chúng tôi muốn bật, hãy tạo đối tượng Dữ liệu mới. Thêm tất cả các tính năng có liên quan vào đối tượng dữ liệu đó.

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

Sau đó lưu trữ từng đối tượng dữ liệu/loại đối tượng làm cặp khóa-giá trị. Về chuyển đổi, rút ​​khỏi các đối tượng dữ liệu có liên quan và setMap như thích hợp:

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

Answer 1

Bạn cũng có thể tạo các lớp riêng biệt

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

sau đó cư nó, ví dụ với dữ liệu json

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

sau đó thêm/gỡ bỏ chúng trên bản đồ

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

Answer 2

Để Địa chỉ: var layer_1 = new google.maps.Data(); nên được thực hiện bên trong chức năng khởi tạo bản đồ, như:

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