Zeichnen Polylinien und Polygone basierend auf MongoDB gespeicherten GeoJson Koordinaten

Question

Ich realisiere eine Anwendung, die auf einer Google Map Points, LineStrings und Polygons zeigen soll.

Ich verwende ein Mongoose Schema, das diese 3 Art von Daten ermöglicht, gespeichert zu werden, und ich bin in der Lage, alle von ihnen ohne Probleme zu veröffentlichen.

Ich bin bereits in der Lage Points zu ziehen, da sie nur 1 Eintrag pro lat, lng Paare haben, aber ich bin wirklich kämpfen, um mit Verständnis, wie LineString und Polygonlat, lng Paare aus der db zu holen, speichern sie in einer Matrix und dann Zeichnen dieses Objekts in die Karte.

Das ist, was ich versuche für Linestrings zu tun:

var valueToPush = []; 

// Loop through all of the JSON entries provided in the response 
for (var i = 0; i < response.length; i++) { 
    var user = response[i]; 

     if (user.location.type === "LineString") { 

     for (var j = 0; j < user.location.coordinates.length; j++) { 

      valueToPush[j] = user.location.coordinates[j]; 
      valueToPush[j+1] = user.location.coordinates[j+1]; 
      } 
     } 

    return valueToPush; 
}; 

console.log(valueToPush); //Printing the right LineString Points 

Und das ist, wie ich Linestrings zu zeichnen ich versucht:

var initialize = function() { 

    valueToPush.forEach(function(){ 
    var myPath = new google.maps.Polyline({ 
        path: parseFloat(valueToPush), 
        geodesic: true, 
        strokeColor: '#FF0000', 
        strokeOpacity: 1.0, 
        strokeWeight: 2 
     }); 

     myPath.setMap(map); 
    }); 
} 

aber von letzterem Ich bekomme InvalidValueError: not an Array js?key=myKey

Das ist mein Mungo Schema:

// Pulls Mongoose dependency for creating schemas 
var mongoose = require('mongoose'); 
var GeoJSON = require('geojson'); 
var Schema = mongoose.Schema; 

var LocationSchema = new Schema({ 
            name: {type: String, required: true}, 
            location: { 
             type: {type : String, required: true}, 
             coordinates : [Schema.Types.Mixed] 
            }, 
            created_at: {type: Date, default: Date.now}, 
            updated_at: {type: Date, default: Date.now} 
}); 

// Sets the created_at parameter equal to the current time 
LocationSchema.pre('save', function(next){ 
    now = new Date(); 
    this.updated_at = now; 
    if(!this.created_at) { 
     this.created_at = now 
    } 
    next(); 
}); 

// Indexes this schema in 2dsphere format (critical for running proximity searches) 
LocationSchema.index({location: '2dsphere'}); 

module.exports = mongoose.model('mean-locations', LocationSchema); 

Und das ist, wie ich eine neue Linestring mit Postman schreiben:

{ 
    "name": "FirstPolyline", 
    "location": { 
          "type":"LineString", 
          "coordinates": 
              [ [100.0, 0.0], [101.0, 0.0] ] 

    } 
} 

Was mache ich falsch? Wie kann ich das beheben?

Vielen Dank im Voraus.

Answer 1

Versuchen Sie, einen Zyklus zu erstellen, der über alle Elemente im Array response iteriert. Dann je nach Standorttyp des Elements, rufen Sie eine entsprechende Funktion:

for (var i = 0; i < response.length; i++) { 
    var item = response[i]; 
    if (item.location.type === "LineString") { 
     addPolyline(item.location.coordinates, map); 
    }else if(item.location.type === "Polygon") { 
     addPolygon(item.location.coordinates, map); 
    } 
} 

Funktion zum Hinzufügen von Linienfolge würde wie folgt aussehen. Verwenden Sie google.maps.Polyline Objekt.

function addPolyline(coords, map){ 
    var polyline_coordinates = []; 
    for(var i = 0; i < coords.length; i++){ 
     polyline_coordinates.push({lat: coords[i][0], lng: coords[i][1]}); 
    } 
    var new_polyline = new google.maps.Polyline({ 
     path: polyline_coordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 
    new_polyline.setMap(map); 
} 

ähnlich für Polygone mit google.maps.Polygon Objekt.

function addPolygon(coords, map){ 
    var polygon_coordinates = []; 
    for(var i = 0; i < coords.length; i++){ 
     polygon_coordinates.push({lat: parseFloat(coords[i][0]), lng: parseFloat(coords[i][1])}); 
    } 
    var new_polygon = new google.maps.Polygon({ 
     path: polygon_coordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.5 
    }); 
    new_polygon.setMap(map); 
} 

In beiden Fällen müssen Sie ein Pfadarray erstellen. Path-Array ist ein Array von Objekten wie path:MVCArray<LatLng>|Array<LatLng|LatLngLiteral>. Überprüfen Sie docs.