使用融合表时将边界(例如多边形边界)保存到变量?

时间:2018-04-08 07:26:15

标签: javascript google-maps-api-3 google-fusion-tables

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

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

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

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

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

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

FusionTablesCell似乎不支持获取表格的geometry字段。但是,您可以查看Google Visualization API,而不是使用Maps Javascript API访问您的Fusion表,以查看使用查询访问几何数据的DataTable对象,并根据您的表返回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});
});

答案 1 :(得分:0)

创建一个新的数字公式列,例如“ 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;
  }