Setting different fill colors for geoJSON objects

2019-02-18 04:25发布

问题:

I created a map that has a data layer of geoJSON polygons on it. I have successfully set the fill color using maps.data.SetStyle. Now I want to create a different style for a certain set of polygons that I can identify through unique identifiers.

The Google maps documentation uses .getProperty() but when I loop through the json object that created the data layer I am thrown ane error.

Function is below:

  map.data.setStyle(function(jsonData){
    for(var i = 0; i <= 516; i++){
      var SD_NAME =jsonData.features[i].getProperty('properties.SD_NAME');

    return{
      fillColor: 'green',
      strokeWeight: 1
      }
    }      
  });

Error Message: Uncaught TypeError: Cannot read property '0' of undefined

回答1:

If you look at the example in the Google Documentation and the documentation itself, the setStyle function allows the colors of the polygons to be changed dynamically or based on their properties:

setStyle(style:Data.StylingFunction|Data.StyleOptions) Return Value: None

Sets the style for all features in the collection. Styles specified on a per-feature basis via overrideStyle() continue to apply. Pass either an object with the desired style options, or a function that computes the style for each feature. The function will be called every time a feature's properties are updated.

Something like this will set the object(s) with the "SD_NAME" property equal to "Gee" to be filled with green, everything else will be filled with gray:

map.data.setStyle(function(feature) {
  var SD_NAME = feature.getProperty('SD_NAME');
  var color = "gray";
  if (SD_NAME == "Gee") {
    color = "green";
  }
  return {
    fillColor: color,
    strokeWeight: 1
  }
});

proof of concept fiddle

code snippet:

var map;

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

  // Load GeoJSON.
  // map.data.loadGeoJson(
  //    'https://storage.googleapis.com/mapsdevsite/json/google.json');
  map.data.addGeoJson(geoJsonData);

  map.data.setStyle(function(feature) {
    var SD_NAME = feature.getProperty('SD_NAME');
    var color = "gray";
    if (SD_NAME == "Gee") {
      color = "green";
    }
    return {
      fillColor: color,
      strokeWeight: 1
    }
  });
}
var geoJsonData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "letter": "G",
      "color": "blue",
      "rank": "7",
      "ascii": "71",
      "SD_NAME": "Gee"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [123.61, -22.14],
          [122.38, -21.73],
          [121.06, -21.69],
          [119.66, -22.22],
          [119.00, -23.40],
          [118.65, -24.76],
          [118.43, -26.07],
          [118.78, -27.56],
          [119.22, -28.57],
          [120.23, -29.49],
          [121.77, -29.87],
          [123.57, -29.64],
          [124.45, -29.03],
          [124.71, -27.95],
          [124.80, -26.70],
          [124.80, -25.60],
          [123.61, -25.64],
          [122.56, -25.64],
          [121.72, -25.72],
          [121.81, -26.62],
          [121.86, -26.98],
          [122.60, -26.90],
          [123.57, -27.05],
          [123.57, -27.68],
          [123.35, -28.18],
          [122.51, -28.38],
          [121.77, -28.26],
          [121.02, -27.91],
          [120.49, -27.21],
          [120.14, -26.50],
          [120.10, -25.64],
          [120.27, -24.52],
          [120.67, -23.68],
          [121.72, -23.32],
          [122.43, -23.48],
          [123.04, -24.04],
          [124.54, -24.28],
          [124.58, -23.20],
          [123.61, -22.14]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "o",
      "color": "red",
      "rank": "15",
      "ascii": "111"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [128.84, -25.76],
          [128.18, -25.60],
          [127.96, -25.52],
          [127.88, -25.52],
          [127.70, -25.60],
          [127.26, -25.79],
          [126.60, -26.11],
          [126.16, -26.78],
          [126.12, -27.68],
          [126.21, -28.42],
          [126.69, -29.49],
          [127.74, -29.80],
          [128.80, -29.72],
          [129.41, -29.03],
          [129.72, -27.95],
          [129.68, -27.21],
          [129.33, -26.23],
          [128.84, -25.76]
        ],
        [
          [128.45, -27.44],
          [128.32, -26.94],
          [127.70, -26.82],
          [127.35, -27.05],
          [127.17, -27.80],
          [127.57, -28.22],
          [128.10, -28.42],
          [128.49, -27.80],
          [128.45, -27.44]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "o",
      "color": "yellow",
      "rank": "15",
      "ascii": "111"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [131.87, -25.76],
          [131.35, -26.07],
          [130.95, -26.78],
          [130.82, -27.64],
          [130.86, -28.53],
          [131.26, -29.22],
          [131.92, -29.76],
          [132.45, -29.87],
          [133.06, -29.76],
          [133.72, -29.34],
          [134.07, -28.80],
          [134.20, -27.91],
          [134.07, -27.21],
          [133.81, -26.31],
          [133.37, -25.83],
          [132.71, -25.64],
          [131.87, -25.76]
        ],
        [
          [133.15, -27.17],
          [132.71, -26.86],
          [132.09, -26.90],
          [131.74, -27.56],
          [131.79, -28.26],
          [132.36, -28.45],
          [132.93, -28.34],
          [133.15, -27.76],
          [133.15, -27.17]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "g",
      "color": "blue",
      "rank": "7",
      "ascii": "103",
      "SD_NAME": "Gee"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [138.12, -25.04],
          [136.84, -25.16],
          [135.96, -25.36],
          [135.26, -25.99],
          [135, -26.90],
          [135.04, -27.91],
          [135.26, -28.88],
          [136.05, -29.45],
          [137.02, -29.49],
          [137.81, -29.49],
          [137.94, -29.99],
          [137.90, -31.20],
          [137.85, -32.24],
          [136.88, -32.69],
          [136.45, -32.36],
          [136.27, -31.80],
          [134.95, -31.84],
          [135.17, -32.99],
          [135.52, -33.43],
          [136.14, -33.76],
          [137.06, -33.83],
          [138.12, -33.65],
          [138.86, -33.21],
          [139.30, -32.28],
          [139.30, -31.24],
          [139.30, -30.14],
          [139.21, -28.96],
          [139.17, -28.22],
          [139.08, -27.41],
          [139.08, -26.47],
          [138.99, -25.40],
          [138.73, -25.00],
          [138.12, -25.04]
        ],
        [
          [137.50, -26.54],
          [136.97, -26.47],
          [136.49, -26.58],
          [136.31, -27.13],
          [136.31, -27.72],
          [136.58, -27.99],
          [137.50, -28.03],
          [137.68, -27.68],
          [137.59, -26.78],
          [137.50, -26.54]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "l",
      "color": "green",
      "rank": "12",
      "ascii": "108"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [140.14, -21.04],
          [140.31, -29.42],
          [141.67, -29.49],
          [141.59, -20.92],
          [140.14, -21.04]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "letter": "e",
      "color": "red",
      "rank": "5",
      "ascii": "101"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [144.14, -27.41],
          [145.67, -27.52],
          [146.86, -27.09],
          [146.82, -25.64],
          [146.25, -25.04],
          [145.45, -24.68],
          [144.66, -24.60],
          [144.09, -24.76],
          [143.43, -25.08],
          [142.99, -25.40],
          [142.64, -26.03],
          [142.64, -27.05],
          [142.64, -28.26],
          [143.30, -29.11],
          [144.18, -29.57],
          [145.41, -29.64],
          [146.46, -29.19],
          [146.64, -28.72],
          [146.82, -28.14],
          [144.84, -28.42],
          [144.31, -28.26],
          [144.14, -27.41]
        ],
        [
          [144.18, -26.39],
          [144.53, -26.58],
          [145.19, -26.62],
          [145.72, -26.35],
          [145.81, -25.91],
          [145.41, -25.68],
          [144.97, -25.68],
          [144.49, -25.64],
          [144, -25.99],
          [144.18, -26.39]
        ]
      ]
    }
  }]
};
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>