Google Maps API - 从 geoJSON 获取多边形的不透明度

Question

I'm trying to make a map with a lot of polygons (11 000), and I want each polygon to have the same color, but with different opacity. The opacity/polygons are stored like this:

{'geometry': {'coordinates': [[[10.927456267537572, 45.68179119797432],
      [10.940290010697588, 45.68157387892596],
      [10.939979018768243, 45.67257819153854],
      [10.927147329501077, 45.672795442796335],
      [10.927456267537572, 45.68179119797432]]],
    'type': 'Polygon'},
   'id': 1,
   'properties': {'cellId': 39},
   'style': {'opacity': 0.38888888888888884},
   'type': 'Feature'}

And I want to have the polygon with id 1 to have the opacity stored in the line 'style': {'opacity': 0.38888888888888884}, , and the polygon with id 2 to have a different opacity etc. By default the polygons get shown, but with the same opacity. I'm currently trying:

  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: 46.0840601, lng: 11.1428063}
    });

    map.data.loadGeoJson(
        'trentino-grid.geojson');
    }

    map.data.setStyle(function(feature) { //error here
        var value = feature.getProperty('opacity');
        var opacity = value;
        return {
          fillOpacity: opacity,
          strokeWeight: opacity
        };
    });

But this doesn't work. I get an error for the line marked with the comment: Cannot read property 'data' of undefined . How can I make the error go away and have all these polygons have their own opacity based on opacity in the geoJSON? Thank you!

Answer 1

you have the opacity in the wrong place, it isn't in the style object, it should be in the properties object:

{
  'geometry': {
    'coordinates': [
      [
        [10.927456267537572, 45.68179119797432],
        [10.940290010697588, 45.68157387892596],
        [10.939979018768243, 45.67257819153854],
        [10.927147329501077, 45.672795442796335],
        [10.927456267537572, 45.68179119797432]
      ]
    ],
    'type': 'Polygon'
  },
  'id': 1,
  'properties': {
  'cellId': 39,
  'opacity': 0.1
  },
  'type': 'Feature'
};

proof of concept fiddle

code snippet:

 var geocoder; var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: { lat: 45.681, lng: 10.927 } }); map.data.addGeoJson(geoJson); map.data.setStyle(function(feature) { //error here var value = feature.getProperty('opacity'); var opacity = value; return { fillOpacity: opacity, fillColor: "#00FF00", strokeColor: '#00FF00', strokeWeight: 1, strokeOpacity: opacity }; }); google.maps.event.addDomListener(document.getElementById('btn'), "click", function(evt) { geoJson.properties.opacity = parseFloat(document.getElementById('opacity').value); map.data.addGeoJson(geoJson); }); } google.maps.event.addDomListener(window, "load", initMap); var geoJson = { 'geometry': { 'coordinates': [ [ [10.927456267537572, 45.68179119797432], [10.940290010697588, 45.68157387892596], [10.939979018768243, 45.67257819153854], [10.927147329501077, 45.672795442796335], [10.927456267537572, 45.68179119797432] ] ], 'type': 'Polygon' }, 'id': 1, 'properties': { 'cellId': 39, 'opacity': 0.1 }, 'type': 'Feature' };

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <input id="opacity" value="0.8" /> <input type="button" id="btn" value="set Opacity" /> <div id="map"></div>