使用Google Maps Javascript API v3数据层样式多个GeoJson文件

Question

我有一个使用谷歌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);

我无法使样式应用于地图，请问有什么想法？

- user2668812

---

这是一个示例，其中根据JSON文件中的属性为每个字母设置颜色：https://developers.google.com/maps/documentation/javascript/examples/layer-data-event - duncan

我正在寻找一个使用静态Json文件的示例。 - user2668812

这正是该示例正在做的事情：https://storage.googleapis.com/maps-devrel/google.json - duncan

Duncan - 我手头的Json文件是静态的，无法修改，这就是为什么我需要独立样式它们的原因。也许我错过了一种在JavaScript加载后更改Json文件的方法。 - user2668812

Answer 1

我已经创建了一个GitHub上的演示项目，其中使用Data Layer加载多边形（边界），同时还展示了如何保留对相应多边形的引用并更新它们的特定样式。请查看此SO答案以获取代码片段（我不想在这里复制它，因为这是冗余的）。

请注意：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
});

- Matej P.

---

第二个选项看起来可能可行，你有如何将这两个图层添加到地图的示例吗？ - user2668812

我已经添加了代码示例，或者你是什么意思？只需使用 var data_layer = new google.maps.Data({map: map}); 创建数据层，它将被添加到地图中。 - Matej P.

这个在一个层面上可以工作。我会尝试在其他层面上使用。感谢你的帮助。 - user2668812

非常感谢@MatejP。我也在寻找这个“另一个选项”，我认为在示例中应该有描述。唯一不确定的事情是：是否有一种方法可以在所有图层上设置特定的通用样式，还是现在被迫打破DRY原则？;) - Christoph Lösch

Answer 2

我认为您需要逐个添加多边形及其样式。可以参考这个示例（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);

- RickTakes

---

你有一个示例可以为Json文件中的每个多边形设置样式吗？ - user2668812

Answer 3

我认为最好的方法是在你加载的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 文件可以有任意多个 属性。

然后在你的 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 ，以便它自动迭代每个要素。

- Nate Beers