使用 Google Maps Javascript API v3 數據層設置多個 GeoJson 文件的樣式

Question

我有一個使用 google api v3 顯示來自 json 文件的多邊形的站點。

該站點有多個 json 多邊形，我需要用不同的顏色設置每個多邊形的樣式並創建形狀的句柄。

我能找到的唯一示例是指純多邊形而不是 json 文件，有一個示例更改了 json 文件（我不能這樣做，因為 json 文件是靜態的。

示例代碼：

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: { lat: 45, lng: -90 }
    });


//1st Json file
map.data.loadGeoJson(
        'https://storage.googleapis.com/mapsdevsite/json/google.json');

//2nd json file  (same as #1 for illustration purpose)
map.data.loadGeoJson(
        'https://storage.googleapis.com/mapsdevsite/json/google.json');

    // I want to style each Json file independently
    map.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1
    });

   // map1.setMap(map);


}

我設法將圖層添加到地圖中，

  data_layer.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');


    // Construct the polygon.
    var nLayer = new google.maps.JSON({
        paths: data_layer,
        strokeColor: 'green',
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: 'green',
        fillOpacity: 0.8
    });

    nLayer.setMap(map);

我無法將樣式應用於地圖。 有什么想法嗎？

Answer 1

我在 github上創建了一個演示，我使用Data Layer加載多邊形（邊界），我還展示了如何保持對各個多邊形的引用並更新它們的特定樣式。 查看this SO answer以獲得一個片段（我不想在這里復制它，因為它是多余的）。

主要注意： new_boundary.feature = data_layer.getFeatureById(boundary_id); 我在哪里存儲對特定功能的引用，我可以隨時使用例如更新哪些樣式：

data_layer.overrideStyle(new_boundary.feature, {
    fillColor: '#0000FF',
    fillOpacity: 0.9
});

它只會更新那個多邊形，而不是全部。 因此，如果您在 geoJSON 文件中的多邊形有一些唯一的 id，或者您可以為所有多邊形分配 id，那么您可以根據這些來引用和更改它們的樣式。

示例中未顯示的另一個選項是具有多個數據層。 在您的應用程序中可以有多個數據層，例如像這樣創建它們：

var data_layer = new google.maps.Data({map: map});
var data_layer_2 = new google.maps.Data({map: map});

然后將數據加載到它們並更改樣式：

data_layer.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json');
data_layer_2.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json');
data_layer.setStyle({
    fillColor: 'green',
    strokeWeight: 1
});
data_layer_2.setStyle({
    fillColor: 'blue',
    strokeWeight: 2
});

Answer 2

我認為最好的方法是在您加載的 json 文件中為您的功能添加一個屬性，如下所示：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "county": "hernando"
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [
                -82.7784371,
                28.694206
              ],
              [
                -82.778214,
                28.6939659
              ],
            ]
          ]
        ]
      }
    }
  ]
}

注意重要的部分：

"properties": {
   "county": "hernando"
},

您的每個 json 文件都可以擁有任意數量的properties

然后在您的 javascript 文件中，您可以執行以下操作：

var map = new google.maps.Map($el[0], args);

map.data.loadGeoJson(
  '/wp-content/themes/hello-theme-child-master/county-json/pinellas.json'
);
map.data.loadGeoJson(
  '/wp-content/themes/hello-theme-child-master/county-json/pasco.json'
);
map.data.loadGeoJson(
  '/wp-content/themes/hello-theme-child-master/county-json/hillsborough.json'
);

map.data.setStyle( function ( feature ) {
  var county = feature.getProperty('county');
  var color = '';

  if ( county === 'pasco ) {
    color = 'orange'
  }
  else { 
    color = 'green'
  }

  return {
    fillColor: color,
    strokeWeight: 1
  };
});

需要注意的重要部分是您必須將一個函數傳遞給setStyle ，以便它自動遍歷每個功能

Answer 3

我認為您需要單獨添加多邊形及其樣式。 從示例（ https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays ）

// Define the LatLng coordinates for the polygon.
var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 3,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});
bermudaTriangle.setMap(map);