JSFiddle-Beispiel
Ich habe eine JSFiddle erstellt, die eine Lösung für Ihr Problem mit der JSTS-Bibliothek ( JavaScript Topology Suite) demonstriert.
Erklärung
Es gibt zwei Schritte zu diesem Ansatz. Im ersten Schritt werden Ihre Google-Geometrien in WellKnownText- Geometrieausdrücke (WKT) konvertiert. Dies ist ein weit verbreitetes Format. Der zweite Schritt verwendet JSTS, um einen JSTS- geometry.intersects()
Vergleich zweier WKT-Geometrien durchzuführen .
Um dies wirklich zu verstehen, benötigen Sie ein grundlegendes Verständnis von WKT. Da das Format der Polygongeometrien in Ihrer Google Map nicht allgemein unterstützt wird, konvertiere ich sie sofort in WKT-Geometrien, damit wir mit ihnen in JSTS arbeiten können.
Dazu benutzte ich die Wicket-Bibliothek . Natürlich können Sie jederzeit Ihre eigene Google-Polygon-zu-WKT-Methode nach Hause rollen , oder Sie können eine, die ich einmal geschrieben habe, verwenden , oder Sie können eine andere Lösung verwenden, die Sie möglicherweise finden. Persönlich verwende ich heutzutage nur Wicket, was, wie Sie sehen, bösartig einfach ist:
// Pass in two Google Polygon objects.
// It returns two WellKnownText (WKT) geometry expressions.
//
function UseWicketToGoFromGooglePolysToWKT( poly1, poly2 )
{
var wicket = new Wkt.Wkt();
wicket.fromObject(poly1);
var wkt1 = wicket.write();
wicket.fromObject(poly2);
var wkt2 = wicket.write();
return [wkt1, wkt2];
}
Als nächstes kommen Fleisch und Kartoffeln - mit JSTS können Sie zwei WKT-Geometrien nehmen und testen, ob sie sich schneiden oder nicht. Wenn man sich wieder auf die Bibliothek verlässt, steckt nicht viel dahinter:
// Pass in two WKT geometry expressions.
// It performs a JSTS intersects() comparison.
//
function UseJstsToTestForIntersection( wkt1, wkt2 )
{
// Instantiate JSTS WKTReader and get two JSTS geometry objects
var wktReader = new jsts.io.WKTReader();
var geom1 = wktReader.read(wkt1);
var geom2 = wktReader.read(wkt2);
if (geom2.intersects(geom1)) {
alert('intersection confirmed!');
} else {
alert('..no intersection.');
}
}
Wie ich die Bibliotheken in der Geige verknüpft habe
Die oben verlinkte Geige und die von mir gezeigte Lösung erfordern das Hinzufügen von zwei Bibliotheken von Drittanbietern zu Ihrem Projekt - JSTS und Wicket. Das Abrufen des Codes von den jeweiligen Githubs und das Einfügen in Ihr Projekt ist eine andere Übung. Aber für die Geige, verknüpfen ich zu diesen Bibliotheken von ihnen in Referenzierung eines bestehendes JSTS Beispiel I posted gefunden Christopher Manning sowie Wicket eigener Demo - Seite . Grundsätzlich habe ich die Seiten geöffnet, "Quelltext anzeigen" ausgewählt und relevante Verweise auf die beiden Bibliotheken gezupft. Dies waren die genauen Bibliotheksendpunkte, die ich verwendet habe:
http://arthur-e.github.io/Wicket/wicket.js
http://arthur-e.github.io/Wicket/wicket-gmap3.js
http://bl.ocks.org/christophermanning/raw/4450188/javascript.util.min.js
http://bl.ocks.org/christophermanning/raw/4450188/jsts.min.js