Google Maps FusionTables Layer инвертный Polygon

Question

Я выбираю данные KML из в FusionTable и отображать данные как многоугольник на карте:

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

Один из вариантов для запроса FusionTable с библиотекой визуализации Google, использовать эти результаты, чтобы увеличить на получающегося многоугольника:

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

фрагмент кода:

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); 
 
    } 
 

 
});

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; 
 
}

<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>