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

我正在实现一个应用程序，它应该显示在谷歌地图

点

，

线串

和

多边形

上

我正在使用一个

Mongoose

模式，它允许存储这3种数据，并且我能够毫无问题地发布它们

我已经能够绘制

点

，因为每个

lat，lng

对只有一个条目，但是，我真的很难理解如何从数据库中提取

LineString

和

Polygon

lat，lng

对，将它们存储在矩阵中，然后将这些对象绘制到地图中

这就是我试图为行字符串所做的：

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

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

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

  }
}

但是从后者我得到了

InvalidValueError:不是数组js？key=myKey

这是我的猫鼬模式：

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

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

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

  }
}

这就是我如何使用邮递员发布新的行字符串的方法：

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

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

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

  }
}

我做错了什么？如何解决此问题？

---

提前感谢。

尝试创建一个循环，循环遍历

响应

数组中的所有项目。然后根据项目的位置类型，调用适当的函数：

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

使用

google.maps.Polygon

object的多边形也是如此

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

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

函数addPolygon（坐标、地图）{
var多边形_坐标=[]；
对于（变量i=0；i

---

在这两种情况下，都需要创建路径数组。路径数组是一个对象数组，如

Path:MVCArray | array

。检查。

尝试创建一个循环，循环遍历

响应

数组中的所有项。然后根据项目的位置类型，调用适当的函数：

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

使用

google.maps.Polygon

object的多边形也是如此

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

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

函数addPolygon（坐标、地图）{
var多边形_坐标=[]；
对于（变量i=0；i

---

在这两种情况下，都需要创建路径数组。路径数组是一个对象数组，如

Path:MVCArray | array

。检查。

我一到家就去试试。谢谢。请致电

new_polyline.setMap（map）给出
无效值错误：setMap:不是Map的实例
。知道吗？在哪里以及如何初始化地图？你能分享那部分代码吗？您需要将引用
map
对象的变量作为第二个参数传递给
addPolygon
和
addPolyline
函数。这是我的代码片段。您的代码非常混乱，共享的部分不清楚，以什么顺序和方式调用
convertToMapPoints
和
initialize
函数。但要实现这一点，您需要在
convertToMapPoints
之前调用
initialize
函数，并生成变量
var映射
global（将其从
initialize
函数中取出）或以某种方式将其传递给
convertToMapPoints
函数。我一回到家就会尝试。谢谢。请致电
new_polyline.setMap（map）给出
无效值错误：setMap:不是Map的实例
。知道吗？在哪里以及如何初始化地图？你能分享那部分代码吗？您需要将引用
map
对象的变量作为第二个参数传递给
addPolygon
和
addPolyline
函数。这是我的代码片段。您的代码非常混乱，共享的部分不清楚，以什么顺序和方式调用
convertToMapPoints
和
initialize
函数。但要实现这一点，您需要在
convertToMapPoints
之前调用
initialize
函数，并生成变量
var映射
global（将其从
initialize
函数中取出）或以某种方式将其传递给
convertToMapPoints
函数。