使用Google Maps Javascript API v3数据层设计多个GeoJson文件

style multiple GeoJson files with the Google Maps Javascript API v3 data layer

本文关键字：文件 GeoJson 数据 Maps Google Javascript API v3 使用      更新时间：2023-09-26

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

我无法让样式应用到地图上。有什么想法吗?

我在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
});

我想你会想要单独添加多边形和它们的样式。从示例(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);

我认为最好的方法是为你的特性添加一个属性，在你加载的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，以便它自动遍历每个特性

相关文章：