0

I am currently using a Google Maps Fusion Table for County information to display the county boundaries for Texas. There are over 200+ counties in Texas. I am looping through an array of values for each county and need to color-code the county based on the value in the array. There are 4 levels of colors for the county: Stop, Warning, Watch and Open. Everything seems to be working, except that the color is only being applied to 5 counties. The limit of styles is 5 and the limit of layers is also 5, but I am only using 1 layer and 4 styles.

Can someone tell me what I am dong wrong? Or is this just not possible via the API?

Below is a snippet of the code:

var styles = new Array();
var ftLayer = new google.maps.FusionTablesLayer();

function loadTexas() {
    loadFusionLayer('TX');
    ftLayer.setMap(map);
    for (var i = 0; i < aryCounty.length; i++) {
        styleLayer("'State Abbr.' = 'TX' AND 'County Name' = '" +
            aryCounty[i].County + "'", 1000);
    }
    ftLayer.set('styles', styles);
}

function loadFusionLayer(state) {    
    if (state != null) {
        where = "'State Abbr.' IN ('" + state + "')";
    }
    var select = "geometry, 'State Abbr.', 'County Name'";
    ftLayer.setOptions({          
        query: {            
            select: select,            
            from: countyTableId,            
            where: where
        }  
    });        
} 

function styleLayer(where, actualValue) {
    var color = setPolygonColorBy(actualValue);
    styles.push({                        
        where: where,                  
        polygonOptions: {                              
            fillColor: color,            
            fillOpacity: 0.6           
        }          
    });         
}

function setPolygonColorBy(actualValue, divisor) { 
    var status;
    var stop = STATUS_LAYER_STYLES["Stop"].color;
    var warning = STATUS_LAYER_STYLES["Warning"].color;
    var watch = STATUS_LAYER_STYLES["Watch"].color;
    var open = STATUS_LAYER_STYLES["Open"].color;
    if (actualValue >= minValue && actualValue < midValue) {
        status = watch;
    }
    else if (actualValue >=midValue && actualValue < maxValue) {
        status = warning;
    }
    else if (actualValue >= maxValue) {
        status = stop;
    }
    else {
        status = open;
    }
    return status;
}
4

2 回答 2

0

你真的只有4种风格。您需要将每个县的美元价值放入您自己的融合表中。您可以下载US Counties Fusion Table，也许只有 TX 县，然后创建一个新的 FT。然后添加您自己的美元价值列。（更简单更好的方法是将您的 actualValues 与 Counties 表合并，但我不熟悉合并表。您需要您的实际值和 State-County 键值。合并应该创建一个您拥有的新表）

然后，您可以按照Maps FT Docs中的说明创建 4 种样式。

这里可能存在语法错误。

ftLayer = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: countyTable_with_actualValues_Id },
  styles: [{
    // default color
    where: "'State Abbr.' ='" + state + "'";
    polygonOptions: {
      fillColor: open
    }
  }, {
    where: "'State Abbr.' ='" + state + "' AND actualValue >= " + maxValue;
    polygonOptions: {
      fillColor: stop
    }
  }, {
    where:  "'State Abbr.' ='" + state + "' AND actualValue >= " + minValue + "AND actualValue < " + midValue;
    polygonOptions: {
      fillColor: watch
    },
   // Final condition left as an exercise :-)
  }]
});

ftLayer.setMap(map);
于 2012-05-25T12:02:23.040 回答
0

答案更新：

如果您的公司不想将数据推送出去，并且您正在编写一个仅供员工使用的内部应用程序，那么您就不想使用 Fusion Tables。Fusion Tables 中的数据通常向公众开放，并通过以下两种方式之一发布：

在此处输入图像描述

2012 年 5 月 25 日评论的后续行动（如果您决定继续使用 FusionTables）：

有了您的评论，我更了解您在做什么。我相信你在loadTexas调用styleLayer函数来创建FusionTablesStyle对象的函数中的代码是正确的。

看起来可疑的部分是loadTexas函数和loadFusionLayer函数中代码的顺序。函数中还缺少一个var where声明loadFusionLayer。我不认为它会导致问题（至少在您显示的代码中没有），但它确实无意中创建了一个全局，因此在下面的代码中更正了该问题。我建议进行以下更改：

  1. var fusionTablesOptions在全局空间中创建一个新的并用于fusionTablesOptions设置.ftLayer FusionTablesLayer
  2. 更改 的声明var ftLayer，使其分配给：null。
  3. 迭代aryCounty数组，构建styles数组，并将其分配给fusionTablesOptions.styles属性。
  4. 分配fusionTablesOptions.map给google.maps.Map命名的现有实例：（并删除函数map中的这行代码：）。loadTexasftLayer.setMap(map);
  5. 分配fusionTablesOptions.query给loadFusionLayer函数中构建的对象。
  6. 现在fusionTablesOptions已经设置了所有必要的属性，创建一个新的实例google.maps.FusionTablesLayer，传递fusionTablesOptions给构造函数。
var styles = new Array();
//Step 1:
var fusionTablesOptions = {};
//Step 2:
var ftLayer = null;
    
function loadTexas() {
    //Step 3:       
    for (var i = 0; i < aryCounty.length; i++) {
        //Call to the styleLayer function not shown to reduce code size
    }
    fusionTablesOptions.styles = styles;
    //Step 4:
    fusionTablesOptions.map = map;
    loadFusionLayer('TX');
}
    
function loadFusionLayer(state) {    
    var where = null;    //Corrects the missing var keyword
    if (state != null) {
        where = "'State Abbr.' IN ('" + state + "')";
    }
    
    var select = "geometry, 'State Abbr.', 'County Name'";
    //Step 5:
    fusionTablesOptions.query : {            
        select: select,            
        from: countyTableId,            
        where: where
    }
    //Step 6:
    ftLayer = new google.maps.FusionTablesLayer( fusionTablesOptions );
}

为大答案道歉，但我想确保我以一种易于审查或实施的方式清楚地传达了我的所有建议。

于 2012-05-25T01:40:02.143 回答