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

我无法将样式应用于地图.有任何想法吗 ？

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