javascript - 查找与 Google map 多边形相交的州

Question

我正在寻找一种方法来识别哪些底层状态与 Google map 多边形相交。我能够识别两个多边形是否在 map 中相交，因此一种不理想的可能性是下载州边界数据并检查每个多边形是否与多边形相交。在每次调用中根据 50 个状态检查多边形可能会非常耗时，并且状态边界越精确，所需的时间就越长。有没有一种原生的 API 方法或更好的方法来确定多边形下方的状态？预先感谢您的帮助。

// variables
var map;
var infoWindow;

// initialize map
initMap();

// initialize map
function initMap() {
  // map
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 36.99816565700228,
      lng: -88.9013671875
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // coordinates
  var coords = [{
    lat: 37.47049847079873,
    lng: -89.82421875
  }, {
    lat: 36.760891249565624,
    lng: -90.0164794921875
  }, {
    lat: 36.25313319699069,
    lng: -88.6102294921875
  }, {
    lat: 37.583765767186236,
    lng: -87.6104736328125
  }];

  // Construct the polygon.
  var poly = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  poly.setMap(map);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
div#map {
  border: solid 1px #333;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}

<script src="https://maps.google.com/maps/api/js?sensor=.js"></script>
<div id="map"></div>

Answer 1

使用 FusionTables 进行状态多边形的概念验证。由此产生的候选状态是:

• 阿肯色州
• 伊利诺伊州
• 肯塔基州
• 密苏里州
• 田纳西州

(阿肯色州实际上并不相交)

  google.load('visualization', '1', {
    'packages': ['corechart', 'table', 'geomap']
  });

  // variables
  var map, infoWindow, layer, geoXml, poly;
  var FT_TableID = '19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA'; // numeric ID 420419;
  var CountryName = "United States of America";

  // initialize map
  google.maps.event.addDomListener(window, 'load', initMap);

  // initialize map
  function initMap() {
    // map
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 36.99816565700228,
        lng: -88.9013671875
      },
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    infoWindow = new google.maps.InfoWindow();

    // coordinates
    var coords = [{
      lat: 37.47049847079873,
      lng: -89.82421875
    }, {
      lat: 36.760891249565624,
      lng: -90.0164794921875
    }, {
      lat: 36.25313319699069,
      lng: -88.6102294921875
    }, {
      lat: 37.583765767186236,
      lng: -87.6104736328125
    }];

    // Construct the polygon.
    poly = new google.maps.Polygon({
      paths: coords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    var polybounds = new google.maps.LatLngBounds();
    for (var i=0; i<poly.getPath().getLength();i++) {
      polybounds.extend(poly.getPath().getAt(i));
    }
    poly.bounds = polybounds;

    poly.setMap(map);
    //   SELECT 'name_0', 'name_1', 'kml_4326' FROM 19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA WHERE 'name_0' = 'United States of America' ORDER by 'name_1'
    // Fusion Table data ID
    geoXml = new geoXML3.parser({
      // map: map,
      zoom: false,
      infoWindow: infoWindow,
      singleInfoWindow: true
    });

    DisplayCountry(CountryName);

  }

  function DisplayCountry(CountryName) {
    var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "';";
    // var FT_Options = { suppressInfoWindows: true, query:FT_Query };
    FT_QueryObj = {
      from: FT_TableID,
      select: "kml_4326",
      where: "'name_0' = '" + CountryName + "'"
    };
    document.getElementById("FTquery").innerHTML = FT_Query + "<br>select:" + FT_QueryObj.select + "<br>from:" + FT_QueryObj.from + "<br>where:" + FT_QueryObj.where;
    var FT_Options = {
      suppressInfoWindows: true,
      query: FT_QueryObj
    };


    layer = new google.maps.FusionTablesLayer(FT_Options);
    layer.setMap(map);

    FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "';";
    gpolygons = [];
    FT_QueryObj = {
      select: 'kml_4326',
      from: FT_TableID,
      where: "name_0 = '" + CountryName + "'"
    };
    layer.setQuery(FT_QueryObj);
    document.getElementById("FTquery").innerHTML = FT_Query + "<br>select:" + FT_QueryObj.select + "<br>from:" + FT_QueryObj.from + "<br>where:" + FT_QueryObj.where;
    var FT_Query2 = "SELECT 'name_0', 'name_1', 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = '" + CountryName + "' ORDER by 'name_1'";
    document.getElementById("FTquery2").innerHTML = FT_Query2;
    var queryText = encodeURIComponent(FT_Query2);
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

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

  //define callback function, this is called when the results are returned
  function getData(response) {
    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();
    if (numRows <= 1) {
      document.getElementById('sidebar').innerHTML = "no data";
      return;
    }

    //concatenate the results into a string, you can build a table here
    for (i = 0; i < numRows; i++) {
      var name = response.getDataTable().getValue(i, 1);
      var kml = response.getDataTable().getValue(i, 2);
      geoXml.parseKmlString("<Placemark>" + kml + "</Placemark>");
      var firstResults = [];
      gpolygons[name] = geoXml.docs[geoXml.docs.length-1].gpolygons[0];
      if (gpolygons[name].bounds.intersects(poly.bounds)) {
      document.getElementById('intersects').innerHTML += name+"<br>";
      firstResults[name] = gpolygons[name];
      }
    }
    //display the results on the page


  }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
div#map {
  border: solid 1px #333;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<div id="intersects"></div>
<div id="map"></div>
<div id="FTquery"></div>
<div id="FTquery2"></div>