AngularJS从GeoJSON的响应

我是新来AngularJS（和很生疏与JavaScript）得到协调，我不能让这个看似简单的动作来工作。AngularJS从GeoJSON的响应

我有一个Django的REST框架后端一个GeoJSON的响应，（只有相关的位）如下：

{ 
    "type": "FeatureCollection", 
    "features": [ 
     { 
      "id": 12, 
      "type": "Feature", 
      "geometry": { 
       "id": 11, 
       "type": "Feature", 
       "geometry": { 
        "type": "Point", 
        "coordinates": [ 
         -1.54392242410118, 
         53.797843696134585 
        ]

我想要得到的坐标传递给直接或通过角瓣叶指令单张在中心显示带有标记的简单地图。我有window.MY_SCOPE设置在控制台中查看$范围的内容，并可以访问使用data.features [0] .geometry.geometry [“坐标”]的坐标，这将在浏览器中以文本显示，但我可以” t似乎将它传递给一个嵌入的Leaflet脚本（并且它作为一个变量非常不灵活），并且我研究了如何提取这些值，无论是作为数组还是作为外部脚本中的变量对。使用循环似乎是答案，虽然查询只会返回一个记录，我不能得到一个循环（或两个）来返回坐标。我一直坚持这一段时间，并找不到与情况相匹配的示例。我有后端的控制权，所以我可以根据需要更改输出。有没有人有任何见解？

编辑：由@ iH8回答，我没有返回有效的GeoJSON，在第一个实例中，因为它有嵌套几何，我已经修复，但也因为我试图将其他信息与GeoJSON数据一起传递为属性，不验证。

DRF方面的答案是我嵌套序列化器使用django-rest-framework-gis在数据响应中包含GeoJSON，并使两个序列化器都使用GeoFeatureModelSerializer，这会在下面创建嵌套输出。使用属性信息将模型更改为GeoModelSerializer可将地理组件作为特征及其相关数据作为属性显示，而不是嵌套模型。我会花一些时间把它变成一个有效的GeoJSON对象，但答案可能最终会对页面数据发出多个请求，这不是最优的，但可能是最简单的解决方案。

UPDATE：半个月挠头我已成功地使用由服务定义值，并使用Django的以GeoJSON的串行从我的查询集得到有效的GeoJSON的后。它不漂亮，但它的工作。但是，尝试在角度控制器中提取坐标仍然不起作用。

我煮我的代码到这一点：

data = {"crs": {"type": "link", "properties": {"href":  "http://spatialreference.org/ref/epsg/4326/", "type": "proj4"}}, "type": "FeatureCollection", "features": [{"geometry": {"type": "Point", "coordinates": [-1.54392242410118, 53.797843696134585]}, "type": "Feature", "properties": {"market_manager__mgt_name": "Leeds Markets", "name": "Leeds Artsmix @ Albion Place", "url": "http://www.artsmix.co.uk/", "contact_email": "[email protected]", "schedule__rrule": null, "id": 12}}]}; 

var coords = data.features[0].geometry.coordinates; 

var lat = coords[1]; 
var lng = coords[0];

这正确返回如本普拉克所示：http://plnkr.co/edit/xunAg5?p=preview

，但总是在错误的角度控制器出现故障“无法读取属性未定义'0'。 'data'对象可以像$ scope.data一样在控制台中查询。有几个类似的问题表明data.features [0]是未定义的，但我不明白它是如何在控制台和ng-inspector中正确显示的。

来源

2015-02-09 Simon Greenwood

这不是有效的GeoJSON的。您可以验证此：http://www.geojsonlint.com/ 有效GeoJSON的集合会是这个样子：

{ 
    "type": "FeatureCollection", 
    "features": [{ 
     "type": "Feature", 
     "properties": { 
      "id": 12 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [ 
       -1.54392242410118, 
       53.797843696134585 
      ] 
     } 
    }, { 
     // Another feature 
    }] 
}

当使用一个有效的，你的FeatureCollection使用会无论是单张的L.GeoJSON层本身，或指令的geojson属性都没有问题。

单张GeoJSON的例子：http://leafletjs.com/examples/geojson.html

单张GeoJSON的参考：http://leafletjs.com/reference.html#geojson

角瓣叶指令GeoJSON的例子：http://tombatossals.github.io/angular-leaflet-directive/examples/geojson-example.html

如果你想使用你有你需要的现有结构：

data.features[0].geometry.geometry['coordinates'][0]作为你的经度 data.features[0].geometry.geometry['coordinates'][1]作为你的纬度

GeoJSON的规格：

的位置由数的数组来表示。必须至少有两个元素，可能会更多。元素的顺序必须遵循x，y，z顺序（东向，北向，投影坐标参考系统中坐标的高度，或地理坐标参考系统中坐标的经度，纬度，高度）。

来源

2015-02-09 19:08:53 iH8

该文件已完成，我只是将其作为插图进行粘贴。我可以提取其他领域没有问题。可能有什么意义的是，文档不仅仅是一个要素集合，而是其他数据库表格的组合，而主要的是我看不到从地图中心设置坐标的方式，除非给出它们这是默认设置的。 – 2015-02-09 23:18:59

我在说的是你在那里展示的功能不是一个有效的功能。您不能在几何体中嵌入几何体。检查你获得的功能和我发布的功能之间的区别。如果你不相信我，这是规范：http://geojson.org/geojson-spec.html – iH8 2015-02-09 23:36:47

我已经添加了一种方法来抓住你的坐标，但我真的推荐使用适当的geojson开始。使事情变得更容易。 – iH8 2015-02-09 23:56:45

我想我现在可以关闭此功能，这个问题，我摸索出我在编辑此同时，是$回应没有得到控制器解决，这样当查询是怎么回事，有WASN” t数据，因此它总是显示为未定义的。解决方案是根据http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/向路线添加“解析”属性。我仍然在努力研究如何从子范围获取数据，但我已经摆脱了首先获取数据的问题。

来源

2015-02-23 14:16:50

AngularJS从GeoJSON的响应

回答

相关问题