2016-04-27 15 views
2

Ich versuche einen GeoJSON LineString in Google Maps mit Google Maps API zu plotten.Google Maps inkorrekt GeoJSON rendering

Ich bekomme das GeoJSON-Objekt als AJAX-Antwort und verwende "map.data.addgeoJson (data)" -Funktion, um die GeoJSON-Antwort auf der Karte zu laden.

Der GPS-Breitengrad und lange Punkte wurden alle aus .gpx-Dateien von der Open Street Maps-Website gerippt und dann in die Datenbank aufgenommen. Sie werden dann im GeoJSON-Format kompiliert und dann an die Website gesendet.

Die einzelnen Punkte sind alle in Deutschland, aber die Flugbahn wird in der Nähe von Somalia gemacht.

Kann mir bitte jemand helfen?

initMap Die Funktion der AJAX Anfrage enthält, ist wie folgt:

 function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 12, 
     center: {lat: 53.44620230866472, lng: 9.666813185187198}, 
     mapTypeId: google.maps.MapTypeId.TERRAIN, 
    }); 


    $.ajax({ 
    url: 'http://ADDRESS TO SERVER/api/geodata/getLineString', 
    data: {"usrid":3,"startd":"2016-04-17","endd":"2016-04-18"}, 
    type: 'POST', 
    success: function (response) { 
    map.data.addGeoJson(response); 
     }, 
    error: function() { 
     alert("error"); 
    }, 
}); 
    } 

Die gesamte GeoJSON Antwort ist wie folgt:

 { 
    "type": "Feature", 
    "geometry": { 
    "type": "LineString", 
    "coordinates": [ 
     [ 
     51.731921404763426, 
     14.342405595236764 
     ], 
     [ 
     51.731914999999994, 
     14.342412 
     ], 
     [ 
     51.73192399392278, 
     14.342408729482642 
     ], 
     [ 
     51.73193, 
     14.342416000000004 
     ], 
     [ 
     51.731934, 
     14.342417000000001 
     ], 
     [ 
     51.73193, 
     14.342411999999998 
     ], 
     [ 
     51.731926, 
     14.342408 
     ], 
     [ 
     51.73192399392278, 
     14.342408729482642 
     ], 
     [ 
     51.731921404763426, 
     14.342405595236764 
     ], 
     [ 
     51.73199100000001, 
     14.34214 
     ], 
     [ 
     51.73198299999999, 
     14.342144 
     ], 
     [ 
     51.731987, 
     14.342298000000001 
     ], 
     [ 
     51.731983, 
     14.342302000000002 
     ], 
     [ 
     51.731983, 
     14.342303999999999 
     ], 
     [ 
     51.73199100000001, 
     14.342310000000001 
     ], 
     [ 
     51.731995000000005, 
     14.342308 
     ], 
     [ 
     51.731998, 
     14.342317 
     ], 
     [ 
     51.731999943503226, 
     14.34232428813586 
     ], 
     [ 
     51.732002, 
     14.342319000000002 
     ], 
     [ 
     51.732006000000005, 
     14.342308000000003 
     ], 
     [ 
     51.732009999999995, 
     14.342290999999996 
     ], 
     [ 
     51.73201799999999, 
     14.342276 
     ], 
     [ 
     51.732025, 
     14.342262999999999 
     ], 
     [ 
     51.732025, 
     14.342252999999998 
     ], 
     [ 
     51.732032999999994, 
     14.342243 
     ], 
     [ 
     51.732032999999994, 
     14.342237000000003 
     ], 
     [ 
     51.73202500000001, 
     14.342224000000002 
     ], 
     [ 
     51.73201799999999, 
     14.342204999999996 
     ], 
     [ 
     51.73201, 
     14.342184999999999 
     ], 
     [ 
     51.732002, 
     14.342166 
     ], 
     [ 
     51.731995000000005, 
     14.342153 
     ], 
     [ 
     51.731995000000005, 
     14.342149000000001 
     ], 
     [ 
     51.73199100000001, 
     14.34214 
     ], 
     [ 
     51.731976333334124, 
     14.340528000002589 
     ], 
     [ 
     51.73196, 
     14.340535 
     ], 
     [ 
     51.731934, 
     14.340549 
     ], 
     [ 
     51.73190300000001, 
     14.340559 
     ], 
     [ 
     51.731873, 
     14.340569 
     ], 
     [ 
     51.731846000000004, 
     14.340582 
     ], 
     [ 
     51.731815, 
     14.340595 
     ], 
     [ 
     51.731789, 
     14.340612000000002 
     ], 
     [ 
     51.731762, 
     14.340625999999999 
     ], 
     [ 
     51.73173100000001, 
     14.340643 
     ], 
     [ 
     51.731705, 
     14.340658 
     ], 
     [ 
     51.731674, 
     14.340673 
     ], 
     [ 
     51.731651, 
     14.340681999999997 
     ], 
     [ 
     51.731621, 
     14.340693 
     ], 
     [ 
     51.73160200000001, 
     14.340705999999997 
     ], 
     [ 
     51.731586, 
     14.340723 
     ], 
     [ 
     51.731567, 
     14.340734000000003 
     ], 
     [ 
     51.731548, 
     14.340740000000002 
     ], 
     [ 
     51.73153299999999, 
     14.340748999999999 
     ], 
     [ 
     51.731514, 
     14.340759 
     ], 
     [ 
     51.731495, 
     14.340764000000002 
     ], 
     [ 
     51.731476, 
     14.340768 
     ], 
     [ 
     51.731472, 
     14.340768 
     ], 
     [ 
     51.731472, 
     14.340765999999997 
     ], 
     [ 
     51.731468, 
     14.340762 
     ], 
     [ 
     51.73146799999999, 
     14.340772999999999 
     ], 
     [ 
     51.731468, 
     14.340788 
     ], 
     [ 
     51.731472, 
     14.340809 
     ] 
     ] 
     }, 
    "properties": { 
    "trajectoryid": "05BC2B9E-7350-4D55-B4BB-026EC0B2E65B", 
    "color": "blue" 
    } 
    } 
+1

Sounds/sieht aus wie Sie die Koordinaten nach hinten haben. GeoJSON ist '[Länge, Breite]', nicht '[Breite, Länge]'. – geocodezip

+0

@geocodezip Ich setze Marker für alle Punkte im GeoJSON und alle wurden in Deutschland korrekt geplottet. Wie!? –

+0

Wie haben Sie diese Marker erstellt? – geocodezip

Antwort

5

Sie die Koordinaten nach hinten haben. GeoJSON ist [longitude, latitude], nicht [latitude, longitude].

Siehe positions in der Dokumentation:..

„eine Position durch eine Reihe von Zahlen dargestellt, gibt es zumindest zwei Elemente sein müssen und mehr sein kann, die Reihenfolge der Elemente müssen x, y folgen, z-Reihenfolge (Rechtswert, Hochwert, Höhe für Koordinaten in einem projizierten Koordinatenreferenzsystem oder Längengrad, Breitengrad, Höhe für Koordinaten in einem geographischen Koordinatenreferenzsystem). "

Wenn ich die Koordinaten umkehre, erscheint die Polylinie in Deutschland.

Code-Schnipsel:

var map; 
 
var bounds = new google.maps.LatLngBounds(); 
 

 
function initMap() { 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    center: { 
 
     lat: 53.44620230866472, 
 
     lng: 9.666813185187198 
 
    }, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
 
    }); 
 
    // map.data.addGeoJson(geoJson); 
 
    map.data.addGeoJson(reverseData(geoJson)); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 

 
function reverseData(data) { 
 
    for (var i = 0; i < data.geometry.coordinates.length; i++) { 
 
    data.geometry.coordinates[i] = [data.geometry.coordinates[i][1], data.geometry.coordinates[i][0]]; 
 
    var mrk = new google.maps.Marker({ 
 
     position: { 
 
     lat: data.geometry.coordinates[i][1], 
 
     lng: data.geometry.coordinates[i][0] 
 
     }, 
 
     // map: map 
 
    }); 
 
    bounds.extend(mrk.getPosition()); 
 
    } 
 
    map.fitBounds(bounds); 
 
    return data; 
 
} 
 
var geoJson = { 
 
    "type": "Feature", 
 
    "geometry": { 
 
    "type": "LineString", 
 
    "coordinates": [ 
 
     [ 
 
     51.731921404763426, 
 
     14.342405595236764 
 
     ], 
 
     [ 
 
     51.731914999999994, 
 
     14.342412 
 
     ], 
 
     [ 
 
     51.73192399392278, 
 
     14.342408729482642 
 
     ], 
 
     [ 
 
     51.73193, 
 
     14.342416000000004 
 
     ], 
 
     [ 
 
     51.731934, 
 
     14.342417000000001 
 
     ], 
 
     [ 
 
     51.73193, 
 
     14.342411999999998 
 
     ], 
 
     [ 
 
     51.731926, 
 
     14.342408 
 
     ], 
 
     [ 
 
     51.73192399392278, 
 
     14.342408729482642 
 
     ], 
 
     [ 
 
     51.731921404763426, 
 
     14.342405595236764 
 
     ], 
 
     [ 
 
     51.73199100000001, 
 
     14.34214 
 
     ], 
 
     [ 
 
     51.73198299999999, 
 
     14.342144 
 
     ], 
 
     [ 
 
     51.731987, 
 
     14.342298000000001 
 
     ], 
 
     [ 
 
     51.731983, 
 
     14.342302000000002 
 
     ], 
 
     [ 
 
     51.731983, 
 
     14.342303999999999 
 
     ], 
 
     [ 
 
     51.73199100000001, 
 
     14.342310000000001 
 
     ], 
 
     [ 
 
     51.731995000000005, 
 
     14.342308 
 
     ], 
 
     [ 
 
     51.731998, 
 
     14.342317 
 
     ], 
 
     [ 
 
     51.731999943503226, 
 
     14.34232428813586 
 
     ], 
 
     [ 
 
     51.732002, 
 
     14.342319000000002 
 
     ], 
 
     [ 
 
     51.732006000000005, 
 
     14.342308000000003 
 
     ], 
 
     [ 
 
     51.732009999999995, 
 
     14.342290999999996 
 
     ], 
 
     [ 
 
     51.73201799999999, 
 
     14.342276 
 
     ], 
 
     [ 
 
     51.732025, 
 
     14.342262999999999 
 
     ], 
 
     [ 
 
     51.732025, 
 
     14.342252999999998 
 
     ], 
 
     [ 
 
     51.732032999999994, 
 
     14.342243 
 
     ], 
 
     [ 
 
     51.732032999999994, 
 
     14.342237000000003 
 
     ], 
 
     [ 
 
     51.73202500000001, 
 
     14.342224000000002 
 
     ], 
 
     [ 
 
     51.73201799999999, 
 
     14.342204999999996 
 
     ], 
 
     [ 
 
     51.73201, 
 
     14.342184999999999 
 
     ], 
 
     [ 
 
     51.732002, 
 
     14.342166 
 
     ], 
 
     [ 
 
     51.731995000000005, 
 
     14.342153 
 
     ], 
 
     [ 
 
     51.731995000000005, 
 
     14.342149000000001 
 
     ], 
 
     [ 
 
     51.73199100000001, 
 
     14.34214 
 
     ], 
 
     [ 
 
     51.731976333334124, 
 
     14.340528000002589 
 
     ], 
 
     [ 
 
     51.73196, 
 
     14.340535 
 
     ], 
 
     [ 
 
     51.731934, 
 
     14.340549 
 
     ], 
 
     [ 
 
     51.73190300000001, 
 
     14.340559 
 
     ], 
 
     [ 
 
     51.731873, 
 
     14.340569 
 
     ], 
 
     [ 
 
     51.731846000000004, 
 
     14.340582 
 
     ], 
 
     [ 
 
     51.731815, 
 
     14.340595 
 
     ], 
 
     [ 
 
     51.731789, 
 
     14.340612000000002 
 
     ], 
 
     [ 
 
     51.731762, 
 
     14.340625999999999 
 
     ], 
 
     [ 
 
     51.73173100000001, 
 
     14.340643 
 
     ], 
 
     [ 
 
     51.731705, 
 
     14.340658 
 
     ], 
 
     [ 
 
     51.731674, 
 
     14.340673 
 
     ], 
 
     [ 
 
     51.731651, 
 
     14.340681999999997 
 
     ], 
 
     [ 
 
     51.731621, 
 
     14.340693 
 
     ], 
 
     [ 
 
     51.73160200000001, 
 
     14.340705999999997 
 
     ], 
 
     [ 
 
     51.731586, 
 
     14.340723 
 
     ], 
 
     [ 
 
     51.731567, 
 
     14.340734000000003 
 
     ], 
 
     [ 
 
     51.731548, 
 
     14.340740000000002 
 
     ], 
 
     [ 
 
     51.73153299999999, 
 
     14.340748999999999 
 
     ], 
 
     [ 
 
     51.731514, 
 
     14.340759 
 
     ], 
 
     [ 
 
     51.731495, 
 
     14.340764000000002 
 
     ], 
 
     [ 
 
     51.731476, 
 
     14.340768 
 
     ], 
 
     [ 
 
     51.731472, 
 
     14.340768 
 
     ], 
 
     [ 
 
     51.731472, 
 
     14.340765999999997 
 
     ], 
 
     [ 
 
     51.731468, 
 
     14.340762 
 
     ], 
 
     [ 
 
     51.73146799999999, 
 
     14.340772999999999 
 
     ], 
 
     [ 
 
     51.731468, 
 
     14.340788 
 
     ], 
 
     [ 
 
     51.731472, 
 
     14.340809 
 
     ] 
 
    ] 
 
    }, 
 
    "properties": { 
 
    "trajectoryid": "05BC2B9E-7350-4D55-B4BB-026EC0B2E65B", 
 
    "color": "blue" 
 
    } 
 
}
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

+0

Alter, vielen Dank! Könnten Sie mich auf den Ort verweisen, an dem erwähnt wird, dass GeoJSON Long und Lat in der GeoJSON-Referenz verwendet? –

+1

Siehe [Positionen] (http://geojson.org/geojson-spec.html#positions) in der Dokumentation: "Eine Position wird durch ein Array von Zahlen repräsentiert. Es müssen mindestens zwei Elemente vorhanden sein und möglicherweise mehr. Die Reihenfolge der Elemente muss der Reihenfolge x, y, z folgen (Rechtswert, Hochwert, Höhe für Koordinaten in einem projizierten Koordinatenreferenzsystem oder ** Länge, Breite, Höhe für Koordinaten in einem geographischen Koordinatenreferenzsystem **). " – geocodezip

+0

Vielen Dank .... weiß nicht, wie ich das verpasst habe –

Verwandte Themen