使用融合表时将边界（例如多边形边界）保存到变量？

Question

我有一个使用融合表创建的覆盖层。我正在使用以下方法从表中检索值：

var vname = e.row['l_name'].value;

这是正常的。我单击覆盖层中的多个多边形之一，并能够检索与其相关的信息。我想知道，是否可以以相同的方式使用几何列？

var vgeom = e.row['geometry'].value;

这给了我错误“TypeError：e.row.geometry is undefined”。我想要做的是保存我单击的多边形边界并对此多边形执行某些操作。

有任何想法吗？

Answer 1

FusionTablesCell似乎不支持获取表格的geometry字段。但是，您可以查看Google Visualization API，特别是用于通过查询访问几何数据的DataTable对象，而不是使用Maps Javascript API访问Fusion Table，根据您的表返回KML。然后，您可以使用geoxml3 library来解析KML并存储Polygon对象。

这是一个simple sample JSbin。逻辑是从Fusion表中查询Nova Scotia的多边形，作为KML字符串返回。此字符串不完全正确KML，因此KML文件的标准元素将添加到字符串中。然后将该字符串传递给geoxml3解析器并添加到地图中，以及一些简单的样式。请注意，解析器需要一段时间来解析KML。相关代码：

var query = "SELECT 'Place' as Place, 'geometry' as geom " +
  "FROM 1GK_AefKlsiBzyufbFDuRqvF9RZTdJOUXqnIiCaO9 " +
  "WHERE 'Place' =  'Nova Scotia'";

var queryText = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query(
  'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

gvizQuery.send(function(response) {
  var table = response.getDataTable();
  var geo = table.getValue(0,1);
  geo = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.1"><Document><Placemark>' +
    geo + '</Placemark></Document></kml>';
  var parser = new geoXML3.parser({map:map});
  parser.parseKmlString(geo,parser.docs);    
  parser.docs[0].gpolygons[0].setOptions({fillColor: 'red', fillOpacity: 0.5});
});

Answer 2

创建一个新的数字公式列，例如“poly”，并将其设置为指向“geometry”。

var vgeom = e.row['poly'].value;

它将几何体作为一个字符串返回，例如<...> lng，lat ... lng，lat，你可以解析为有用的东西

function getPolygon( parseable ) { /* <...><coordinates>lng,lat lng,lat</coordinates></...> */
        var poly = [];
        var coordsArray = parseable.replace(/<(?:.|\n)*?>/gm, '').split( ' ' );
        for ( var i = 0; i < coordsArray.length; i++ )
        { 
            var coords = coordsArray[i].split( "," );
            poly.push( new google.maps.LatLng( parseFloat( coords[1] ), parseFloat( coords[0] ) ) ); 
        } 
        return poly;
      }

如果添加以下内容，您还可以处理漏洞：

function getPolyShape( parseable ) { /* <outerBoundaryIs>...<coordinates>border</coordinates>...</outerBoundaryIs><innerBoundaryIs>...<coordinates>hole1</coordinates>...</innerBoundaryIs><innerBoundaryIs>...<coordinates>hole2</coordinates>...</innerBoundaryIs> */
    var poly = [];
    var border = parseable.split( '</outerBoundaryIs>' );
    poly.push( getPolygon( border[0].replace( /<(?:.|\n)*?>/gm, '' ) ) );
    var holes = border[1].split( '</innerBoundaryIs>' );
    for ( var i = 0; i < holes.length - 1; i++ ) {
        poly.push( getPolygon( holes[i].replace( /<(?:.|\n)*?>/gm, '' ) ) );
    }
    return poly;
  }