AngularJS 从 GeoJSON 响应中获取坐标答案

【问题标题】：AngularJS getting coordinate from GeoJSON responseAngularJS 从 GeoJSON 响应中获取坐标
【发布时间】：2015-02-09 17:52:38
【问题描述】：

我是 AngularJS 的新手（并且对 javascript 非常生疏），我无法让这个看似简单的操作发挥作用。

我有一个来自 Django Rest Framework 后端的 GeoJSON 响应，如下所示（仅相关位）：

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

我想直接或通过 angular-leaflet-directive 将坐标传递给 Leaflet，以显示一个在中心带有标记的简单地图。我将 window.MY_SCOPE 设置为在控制台中查看 $scope 的内容，并且可以使用 data.features[0].geometry.geometry['coordinates'] 访问坐标，这将在浏览器中显示为文本，但我可以' t 似乎将它传递给嵌入式 Leaflet 脚本（它作为一个变量非常笨拙），我研究了如何提取值，无论是作为数组还是作为外部脚本中的变量对。使用循环似乎是答案，尽管查询只会返回一条记录，而且我无法获得一个（或两个）循环来返回坐标。我已经坚持了一段时间，找不到与这种情况相匹配的例子。我可以控制后端，因此我可以在必要时更改输出。有人对此有任何见解吗？

编辑：正如@iH8 回答的那样，我没有返回有效的 GeoJSON，首先是因为它有嵌套的几何图形，我已经修复了这个问题，但也因为我正在尝试使用 GeoJSON 数据作为属性来传递其他信息，这不验证。

DRF 方面的答案是，我使用 django-rest-framework-gis 嵌套了序列化程序以将 GeoJSON 包含在数据响应中，并且两个序列化程序都使用 GeoFeatureModelSerializer，这会在下面创建嵌套输出。将具有属性信息的模型更改为 GeoModelSerializer 将地理组件呈现为特征，并将其关联数据呈现为属性，而不是嵌套模型。我会花一些时间尝试将其转换为有效的 GeoJSON 对象，但答案最终可能会为页面数据发出多个请求，这不是最佳的，但可能是最简单的解决方案。

更新：经过两周的头疼后，我设法通过定义值和使用 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": "marketsmanager@artsmix.co.uk", "schedule__rrule": null, "id": 12}}]};

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

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

这会正确返回，如以下 Plunk 所示：http://plnkr.co/edit/xunAg5?p=preview

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

【问题讨论】：

标签： angularjs django-rest-framework leaflet geojson angular-leaflet-directive

【解决方案1】：

这不是有效的 GeoJSON。你可以在这里验证：http://www.geojsonlint.com/ 一个有效的 GeoJSON 集合看起来像这样：

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

当使用有效的特征集合时，使用 Leaflet 的 L.GeoJSON 层本身或指令的 geojson 属性都没有问题。

传单 GeoJSON 示例：http://leafletjs.com/examples/geojson.html

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

Angular-leaflet-directive 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 顺序（投影坐标参考系中的坐标为东、北、高，地理坐标参考系中的坐标为经度、纬度、高度）。

【讨论】：

文档已完成，我只是将其粘贴进来作为插图。我可以毫无问题地提取其他字段。可能有影响的是该文档不仅仅是一个特征集合，而是其他数据库表的组合，主要是我看不到从坐标中设置地图中心的方法，除非这是默认设置的。
我的意思是您在此处显示的功能不是有效功能。您不能将几何嵌入到另一个几何中。检查您拥有的功能与我发布的功能之间的区别。如果你不相信我，这里是规范：geojson.org/geojson-spec.html
我已经添加了一种获取坐标的方法，但我真的建议使用正确的 geojson 开始。让事情变得更容易。
啊，明白了。你是对的，嵌套几何让我感到困惑。我会回到后端并尝试清理它。感谢您对检索坐标的澄清，我几乎到了那里，但不能完全得到最后一部分。

【解决方案2】：

我想我现在可以关闭它了，我在编辑它时发现的问题是 $response 没有在控制器中得到解决，所以当查询发生时，里面没有数据那时的响应，所以它总是显示为未定义。解决方案是根据http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/ 向路由添加“解决”属性。我仍在尝试解决如何从子范围获取数据，但我已经解决了首先拥有数据的问题。

【讨论】：