样式化谷歌地图数据层答案

【问题标题】：styling google maps data layer样式化谷歌地图数据层
【发布时间】：2016-03-13 23:09:12
【问题描述】：

我使用来自 Postgis 的数据，这些数据通过 geojson 加载并作为数据层添加到 Google 地图上。

//Load mapdata via geoJson
var parzelle = new google.maps.Data();
parzelle.loadGeoJson("./mapdata/get_ugs_geojson.php");

// Set the stroke width, and fill color for each polygon
var featureStyle = {
  fillColor: '#ADFF2F',
  fillOpacity: 0.1,
  strokeColor: '#ADFF2F',
  strokeWeight: 1
}

// Apply style settings to data layer
parzelle.setStyle(featureStyle);

// Add data layer to map
parzelle.setMap(map);

我想根据属性（在本例中为栖息地代码）设置显示的多边形的样式。我尝试了以下方法，但不再显示多边形。

//Load mapdata via geoJson
var parzelle = new google.maps.Data();
parzelle.loadGeoJson("./mapdata/get_ugs_geojson.php");

// Styles depending on habitat
var styles = {
  6510: {fillColor: "#00cc00", fillOpacity: 0.1, strokeWeight: 1.5, strokeColor: "#00cc00", strokeOpacity: 0.8},
  6430: {fillColor: "#00cc00", fillOpacity: 0.1, strokeWeight: 1.5, strokeColor: "#00cc00", strokeOpacity: 0.8},
  6210: {fillColor: "#ff9900", fillOpacity: 0.1, strokeWeight: 1.5, strokeColor: "#ff9900", strokeOpacity: 0.8},
  9150: {fillColor: "#993300", fillOpacity: 0.1, strokeWeight: 1.5, strokeColor: "#993300", strokeOpacity: 0.8},
  9180: {fillColor: "#992200", fillOpacity: 0.1, strokeWeight: 1.5, strokeColor: "#992200", strokeOpacity: 0.8}
};

var habitat = parzelle.feature.getProperty ('fk_habitat_target');
var featureStyle = styles[habitat] || {};

parzelle.setStyle(featureStyle);
parzelle.setMap(map);

我的代码有什么问题？或者也许有更简单的方法来根据属性设置多边形样式？

【问题讨论】：

您的 GeoJSON 是什么样的？请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。

标签： google-maps postgis geojson

【解决方案1】：

数据层功能的动态样式的工作方式如下，实际上非常酷：您提供一个返回此类对象的函数，而不是向setStyle() 方法提供包含样式的对象。在该函数中，您可以对属性或您喜欢的任何其他内容做出反应，以更改样式。

var featureStyling = function(feature) {
  var StyleOptions = {
      fillColor: feature.getProperty('fk_habitat_target') == 6510
                  ? '#00cc00'
                  : '#993300'
  };
  return StyleOptions;
};
map.data.setStyle(featureStyling);

当然，这只是一个简化的示例，您可能会使用 switch/case 语句来切换属性并为每个属性值返回一个完全不同的 StyleOptions 对象。

【讨论】：