Question

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

我的代码出了什么问题？或者甚至有一种更简单的方法来根据它们的属性设置多边形的样式？

Answer 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对象。

造型谷歌地图数据层

1 个答案: