基于MongoDB存储的GeoJson坐标绘制折线和多边形

时间:2016-06-05 10:14:17

标签: javascript node.js mongodb google-maps geojson

我正在实现一个应该在Google地图PointsLineStringsPolygons上显示的应用。

我正在使用Mongoose架构,允许存储这3种数据,并且我可以毫无问题地发布所有这些数据。

我已经能够绘制Points因为每lat, lng对只有一个条目,但是,我真的很难理解如何获取LineString和{{1来自数据库的{}} Polygon对,将它们存储在矩阵中,然后将这些对象绘制到地图中。

这就是我要为 LineStrings

做的事情
lat, lng

这就是我试图绘制 LineStrings

的方法
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

但是从后者我得到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); }); }

这是我的 Mongoose Schema

InvalidValueError: not an Array js?key=myKey

这就是我使用 Postman

发布新LineString的方法
// 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);

我做错了什么?我该如何解决这个问题?

先谢谢。

1 个答案:

答案 0 :(得分:3)

尝试创建一个迭代response数组中所有项的循环。然后根据项目的位置类型,调用适当的函数:

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

添加lineString的功能如下所示。使用google.maps.Polyline对象。

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

使用google.maps.Polygon对象的多边形也是如此。

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

在这两种情况下,您都需要创建一个路径数组。 Path数组是一个对象数组,如path:MVCArray<LatLng>|Array<LatLng|LatLngLiteral>。检查docs