tương tác với các lớp geojson độc lập trong google maps api v3

Question

Tôi muốn tải hai lớp geojson vào bản đồ của mình và có thể tạo kiểu chúng độc lập với các quy tắc khác nhau. Tôi có thể hiển thị cả hai tệp geojson của mình với mã bên dưới, nhưng vì chúng là cả hai phần của cùng một đối tượng map.data, tôi chỉ có thể áp dụng kiểu dáng phổ quát cho cả hai. Có cách nào để khắc phục điều này? Cuối cùng (mục tiêu lâu dài) Tôi cũng muốn để có thể chuyển đổi các lớp khác nhau và tắt với một hộp kiểm cũng như (tôi đang tập trung vào phong cách độc lập đầu tiên như vậy là không để overcomplicate vấn đề)

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

bất kỳ Sự giúp đỡ được đánh giá cao. Tôi thấy một số chủ đề có thể áp dụng (chẳng hạn như Google maps GeoJSON- toggle marker layers?) nhưng tôi không chắc chắn làm thế nào để áp dụng nó cho mục đích của tôi.

Answer 1

Vì vậy, tôi chỉ phải làm điều gì đó tương tự và cần thiết để thêm 2 tệp geojson và tạo kiểu cho chúng khác nhau. Những gì bạn muốn làm là khởi tạo bản đồ và sau đó thêm 2 lớp khác nhau. Về cơ bản, thiết lập kiểu dáng cho cả hai. Dưới đây là mã của tôi với các ghi chú. Tôi thực sự sử dụng chức năng này Angular trong một dịch vụ và trả lời một lời hứa.

Thiết lập tùy chọn bản đồ của bạn

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

Đặt bản đồ của bạn cho một biến.

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

Khởi tạo 2 biến sẽ mất lớp. Tôi đã làm tiểu bang và hạt.

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

Sau đó tải tệp GeoJson cho mỗi lớp.

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

Sau đó đặt kiểu cho mỗi lớp.

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

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

Bước cuối cùng là đặt lớp đó thành bản đồ.

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

Sau này tôi đã trả lời lời hứa nhưng bạn chỉ có thể trả lại đối tượng bản đồ. Điều này có ý nghĩa/giúp trả lời câu hỏi của bạn không?

Ngoài ra, trong mỗi lớp setStyle() chức năng bạn có thể thêm kiểu dáng năng động thông qua các chức năng. Giống như thêm một hàm vào fillColor để thay đổi màu dựa trên dữ liệu trong tệp GeoJson.