2

私は 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 に渡す座標を取得して、中心にマーカーがある単純なマップを表示したいと考えています。コンソールで $scope の内容を表示するように window.MY_SCOPE を設定し、data.features[0].geometry.geometry['coordinates'] を使用して座標にアクセスできます。これはブラウザにテキストとして表示されますが、'埋め込まれた Leaflet スクリプトにそれを渡すようには見えません (変数としては非常に扱いにくいです)。配列として、または外部スクリプトの変数のペアとして、値を抽出する方法を考え出しました。ループを使用することが答えのようですが、クエリは 1 つのレコードのみを返し、ループ (または 2 つ) を取得して座標を返すことはできません。私はしばらくこれに固執しており、状況に一致する例を見つけることができません。バックエンドを制御できるので、必要に応じて出力を変更できます。誰かがこれについて何か洞察を持っていますか?

EDIT：@ iH8の回答によると、最初はネストされたジオメトリがあり、これを修正したため、有効なGeoJSONを返していませんが、GeoJSONデータをプロパティとして他の情報を配信しようとしているためです。検証しません。

DRF 側の答えは、django-rest-framework-gisを使用してデータ応答に GeoJSON を含めるようにシリアライザーをネストし、GeoFeatureModelSerializer を使用して両方のシリアライザーを使用することです。これにより、以下のネストされた出力が作成されます。プロパティ情報を持つモデルを GeoModelSerializer に変更すると、ジオ コンポーネントがフィーチャとして表示され、その関連データがプロパティとして表示されますが、ネストされたモデルは表示されません。少し時間をかけて有効な GeoJSON オブジェクトに変換しようとしますが、最終的にはページ データに対して複数の要求を行うことができます。これは最適ではありませんが、最も簡単な解決策になる可能性があります。

更新: 2 週間頭を悩ませた後、値を定義し、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 でどのように正しく表示されるかわかりません。

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

有効な機能コレクションを使用する場合、リーフレットの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 仕様:

位置は、数値の配列で表されます。少なくとも 2 つの要素が必要であり、それ以上の場合もあります。要素の順序は、x、y、z の順序に従う必要があります (投影座標参照系の座標の東、北距、高度、または地理座標参照系の座標の経度、緯度、高度)。

于 2015-02-09T19:08:53.697 に答える