2

I'm new to AngularJS (and very rusty with javascript) and I can't get this seemingly straightforward action to work.

I have a GeoJSON response from a Django Rest Framework backend as follows (relevant bit only):

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

I want to get the coordinates to pass to Leaflet either directly or via angular-leaflet-directive to display a simple map with a marker at the centre. I have window.MY_SCOPE set to view the contents of $scope in the console and can access the coordinates using data.features[0].geometry.geometry['coordinates'] and this will display in a browser as text but I can't seem to pass it to an embedded Leaflet script (and it's very unwieldy as a variable), and I work out how to extract the values, either as an array or as pair of variable in an external script. Using a loop seems to be the answer although the query will only return one record and I can't get a loop (or two) to return the coordinates. I've been stuck on this for a while now and can't find an example that matches the situation. I have control of the backend so I can change the output if necessary. Does anyone have any insights into this?

EDIT: as answered by @iH8, I'm not returning valid GeoJSON, in the first instance as it had nested geometries, which I have fixed, but also because I am trying to deliver other information with the GeoJSON data as properties, which doesn't validate.

The answer on the DRF side is that I have nested serializers to include the GeoJSON in the data response using django-rest-framework-gis and having both serializers using GeoFeatureModelSerializer, which creates the nested output below. Changing the model with the property information to GeoModelSerializer presents the geo component as a feature and its associated data as properties but not the nested model. I'll spend a bit of time trying to turn it into a valid GeoJSON object but the answer could ultimately to make multiple requests for the page data, which isn't optimal but may be the simplest solution.

UPDATE: after two weeks of head scratching I have managed to get valid geojson from my queryset using by defining values and using django-geojson's serializer. It isn't pretty but it works. However, trying to extract coordinates in an angular controller still doesn't work.

I've boiled my code down to this:

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];

and this returns correctly as shown in this Plunk: http://plnkr.co/edit/xunAg5?p=preview

but always fails in an angular controller with the error 'Cannot read property '0' of undefined'. The 'data' object can be queried in the console as can $scope.data. There are a couple of similar questions that suggest that data.features[0] is undefined but I don't understand how it shows correctly in the console and in ng-inspector.

4

2 回答 2

2

那不是有效的 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 顺序（投影坐标参考系中的坐标为东、北、高，或地理坐标参考系中的坐标为经度、纬度、高度）。

于 2015-02-09T19:08:53.697 回答
0

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

于 2015-02-23T14:16:50.577 回答