Google Maps FusionTables图层反转多边形

Question

我从FusionTable中选择kml数据并在地图上显示数据为Polygon：

jQuery("a.part").click(function() {
      var name = jQuery(this).text();
    var queryStr = {
      select: 'kml_4326',
      from: FT_TableID,
      where: "name_0 = '" + CountryName + "' AND name_1 = '" + name + "'"
    };
    var FT_Options = {
      query: queryStr,
      styles: [{
        polygonOptions: {
          strokeColor: "#000000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#000000",
          fillOpacity: 0.5
        }
      }]
    };
    layer.setOptions(FT_Options);
       });
  });

这样可行，但我想反转选择，以便所有内容都有覆盖，但不是多边形中的区域。我发现Here是我的问题的一个示例，但我找不到添加其他everythingElse路径的地方。有人为它解决问题吗？

Answer 1

一个选项是使用google可视化库查询FusionTable，使用这些结果缩放生成的多边形：

function query4bounds(nameString) {
  var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "' AND 'name_1' = '" + nameString + "';";
  // set the query using the parameters
  var queryText = encodeURIComponent(FT_Query);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
  //set the callback function
  query.send(zoom2polygonBounds);
}

function zoom2polygonBounds(response) {
  activeQuery = false;
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  FTresponse = response;
  //for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
  var kml = FTresponse.getDataTable().getValue(0, 0);
  // create a geoXml3 parser for the click handlers
  if (geoXml && geoXml.docs && geoXml.docs.length && geoXml.docs.length > 0) {
    geoXml.docs[0].gpolygons[0].setMap(null);
    geoXml.docs = [];
  } 
  geoXml = new geoXML3.parser({
    map: map,
    zoom: false
  });
  geoXml.parseKmlString("<Placemark>" + kml + "</Placemark>");
  geoXml.docs[0].gpolygons[0].setMap(null);
  map.fitBounds(geoXml.docs[0].gpolygons[0].bounds);
}

要反转多边形，请添加一条从内部路径向相反方向旋转的外部路径：

// inverted polygon
var polygonPaths = geoXml.docs[0].gpolygons[0].getPaths();
var everythingElse = [
  new google.maps.LatLng(-90, -180),
  new google.maps.LatLng(-90,0),
  new google.maps.LatLng(-90,180),
  new google.maps.LatLng(0,180),      
  new google.maps.LatLng(90,180),
  new google.maps.LatLng(90,0),
  new google.maps.LatLng(90,-180),
  new google.maps.LatLng(0,-180),
  new google.maps.LatLng(-90, -180),
];
var newOuterPath = new google.maps.MVCArray(everythingElse);
polygonPaths.insertAt(0, newOuterPath);
geoXml.docs[0].gpolygons[0].setPaths(polygonPaths);
geoXml.docs[0].gpolygons[0].setMap(map);

proof of concept

代码段

＆＃13;

＆＃13;

var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA";
var CountryName = "Netherlands";
google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});
jQuery(document).ready(function() {
  var mapProp = {
    center: new google.maps.LatLng(52.24730, 5.36449),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var queryStr = {
    select: 'kml_4326',
    from: FT_TableID,
    where: "'name_0' = '" + CountryName + "'"
  };
  var FT_Options = {
    suppressInfoWindows: true,
    query: queryStr,
    styles: [{
      polygonOptions: {
        strokeColor: "#FF0000",
        strokeWeight: 3
      }
    }]
  };
  layer = new google.maps.FusionTablesLayer(FT_Options);
  layer.setMap(map);
  var geoXml;
  jQuery("span").click(function() {
    var name = jQuery(this).text();
    //map.fitBounds(gpolygons[id].bounds);
    var queryStr = {
      select: 'kml_4326',
      from: FT_TableID,
      where: "'name_0' = '" + CountryName + "' AND 'name_1' = '" + name + "'"
    };
    var FT_Options = {
      query: queryStr,
      styles: [{
        polygonOptions: {
          strokeColor: "#FF0000",
          strokeWeight: 3
        }
      }]
    };
    layer.setOptions(FT_Options);
    query4bounds(name)
  });

  function query4bounds(nameString) {
    var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "' AND 'name_1' = '" + nameString + "';";

    document.getElementById("FTquery").innerHTML = FT_Query;

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

    //set the callback function
    query.send(zoom2polygonBounds);
  }

  function zoom2polygonBounds(response) {
    activeQuery = false;
    if (!response) {
      alert('no response');
      return;
    }
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
    //for more information on the response object, see the documentation
    //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
    numRows = response.getDataTable().getNumberOfRows();
    numCols = response.getDataTable().getNumberOfColumns();

    var kml = response.getDataTable().getValue(0, 0);
    // geoXml3 parser for the KML snippets
    if (geoXml && geoXml.docs && geoXml.docs.length && geoXml.docs.length > 0) {
      geoXml.docs[0].gpolygons[0].setMap(null);
      geoXml.docs = [];
    }
    geoXml = new geoXML3.parser({
      map: map,
      zoom: false
    });
    geoXml.parseKmlString("<Placemark>" + kml + "</Placemark>");
    geoXml.docs[0].gpolygons[0].setMap(null);
    map.fitBounds(geoXml.docs[0].gpolygons[0].bounds);
    // inverted polygon
    var polygonPaths = geoXml.docs[0].gpolygons[0].getPaths();
    var everythingElse = [
      new google.maps.LatLng(-90, -180),
      new google.maps.LatLng(-90, 0),
      new google.maps.LatLng(-90, 180),
      new google.maps.LatLng(0, 180),
      new google.maps.LatLng(90, 180),
      new google.maps.LatLng(90, 0),
      new google.maps.LatLng(90, -180),
      new google.maps.LatLng(0, -180),
      new google.maps.LatLng(-90, -180),
    ];
    var newOuterPath = new google.maps.MVCArray(everythingElse);
    polygonPaths.insertAt(0, newOuterPath);
    geoXml.docs[0].gpolygons[0].setPaths(polygonPaths);
    geoXml.docs[0].gpolygons[0].setMap(map);
  }

});

＆＃13;

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.col {
  -webkit-column-count: 4;
  -webkit-column-gap: 10px;
  -moz-column-count: 4;
  -moz-column-gap: 10px;
  column-count: 4;
  column-gap: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<div class="col">
  <span>Drenthe</span>
  <br>
  <span>Flevoland</span>
  <br>
  <span>Friesland</span>
  <br>
  <span>Gelderland</span>
  <br>
  <span>Groningen</span>
  <br>
  <span>Limburg</span>
  <br>
  <span>Noord-Brabant</span>
  <br>
  <span>Noord-Holland</span>
  <br>
  <span>Overijssel</span>
  <br>
  <span>Utrecht</span>
  <br>
  <span>Zeeland</span>
  <br>
  <span>Zuid-Holland</span>
  <br>
</div>
<br>
<div id="googleMap"></div>
<div id="FTquery"></div>

＆＃13;

＆＃13;

＆＃13;