以编程方式为FusionTablesLayer更改颜色

时间:2012-12-04 14:08:43

标签: javascript styles google-fusion-tables

我正在使用融合表中的kml将一组多边形读到Google地图上。我有一个4种颜色的数组,我想以编程方式为这4种颜色中的一种颜色着色,具体取决于另一个数组中的值。

不知何故,地图一次只会着色4个多边形,即使我指定只有4个样式。如何为所有130个多边形着色?

这是我的代码:

function setInitialStyles() {
layer = new google.maps.FusionTablesLayer({
      map : map,
      query : {
        select : "geometry",
        from : "1gwSN6n_00uZ7YuAP7g4FiUiilybqDRlRmWJrpvA"
      }
    });

var options = {
      styles : [
      {
        polygonOptions:
        {
            fillColor: "#ffffff",
            strokeColor: "#bcbcbc",
            fillOpacity: ".75"
        }
    }
    ]
    };

var styles = [];

var style1 = candColor[0];
var style2 = candColor[1];  
var style3 = candColor[2];  
var style4 = candColor[3];  

for (var i=0;i<countyCodes.length; i++) {
  var c = countyCodes[i];
  var whereClause = "'COUSUBFP' = " + c;
  var myStyle;
  if (countyColors[i] == "#0D58A6" ) { myStyle = style1; }
  if (countyColors[i] == "#981400" ) { myStyle = style2; }
  if (countyColors[i] == "#E3D132" ) { myStyle = style3; }
  if (countyColors[i] == "#007F37" ) { myStyle = style4; }

  options.styles.push({
          where: whereClause,
          polygonOptions: {
            fillColor: myStyle
          }
    });

}


 layer.setOptions(options);
}

2 个答案:

答案 0 :(得分:1)

你做不到。目前,FusionTablesLayer仅限于一个样式图层,最多可包含五种应用样式。请参阅有关limitation of FusionTablesLayer

的文档

您可以定义应用于所有多边形的常规样式规则(如WHERE子句)。但同样:你只能定义5个这样的规则。

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: '1gwSN6n_00uZ7YuAP7g4FiUiilybqDRlRmWJrpvA'
  },
  styles: [{
    polygonOptions: {
        fillColor: "#ffffff",
        strokeColor: "#bcbcbc",
        fillOpacity: ".75"
    }
  }, {
    where: "population < 1000",
    polygonOptions: {
      fillColor: "#0000FF"
    }
  }, {
    where: "population > 10000",
    polygonOptions: {
      fillOpacity: 1.0
    }
  }]
});
layer.setMap(map);

答案 1 :(得分:1)

您的样式数组只能是5个元素as I mentioned in the last question you asked on this

approach (using the Fusion Tables API v1, currently matching on name, not COUSUBFP, as your original table didn't include that column)可能对您有用,但它会将多边形渲染为原生Google Maps API v3对象,因此可能会出现性能问题。