外部GeoJSONファイルをLeafletマップに読み込みますか？

54

geoJSON（ポリゴン）ファイルをリーフレットマップにロードしたいと思います。geoJSONがjavascriptコードに埋め込まれている例を見てきましたが、外部ファイルでどのように行われるかを示す例は見つかりません。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <script src="usStates.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map" style="height: 100%"</div>
    <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

    <script type="text/javascript"> 

    var map = L.map('map').setView([38.57, -94.71], 4);

    L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Imagery © <a href="http://cloudmade.com">CloudMade</a>'}).addTo(map);

    var featureStyle = {
        "color": "#ff7800",
        "weight": 5, 
        "opacity": 0.2
    };

    L.geoJson(usStates).addTo(map);

    </script>

</body>
leaflet  geojson 
— ベイリー
ソース
geojsonをgeojson.io
— Mapperzに
@Mapperz OPは、geojsonコンテンツのコンテンツをスクリプトに貼り付ける方法を尋ねていませんでした。
— デイブ・エヴァンス

回答:

37

Leaflet-Ajaxを調べてください。それはすべてを合理化します。Neogeomatに言及したことに対して賛成票を投じます。

ここでスクリプト（github repo）を取得し、ヘッダーに追加します。

<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>

次に、ファイル名を使用してアップロードするだけです。

var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");       
geojsonLayer.addTo(map);

本当に簡単に修正でき、機能します。やった

— フレッドフューリー
ソース
26

jquery Ajaxを使用してデータをロードしてから追加できます。

var district_boundary = new L.geoJson();
district_boundary.addTo(map);

$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
    $(data.features).each(function(key, data) {
        district_boundary.addData(data);
    });
}
}).error(function() {});

または、leaflet-ajaxプラグインを使用できます

— ネオジオマット
ソース
14

これが私の最小バニラjsソリューションです。maを見て、ファイルへの迅速なajax呼び出しにjqueryは必要ありません。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'uk_outline.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status !== 200) return
    L.geoJSON(xhr.response).addTo(map);
};
xhr.send();
— デニス・バウス
ソース
例に感謝します- ファクトリー関数のnewキーワードを取り出しgeoJSONましたが、setRequestHeader行でCORSエラーが発生したため、それを削除して正常に機能しました（サーバーの設定が必要です）。
— ブライアンバーンズ
でXML Parsing Error: not well-formedエラーが表示されLine Number 1, Column 1:ます。さて、データはジオイソンなので、なぜそれをXMLとして解析しようとするのですか？私は問題を理解していませんが、Ajaxなしでデータをインポートしたいと思います。
— アーロンブラムソン
@AaronBramsonにはまた試してみてください。これは私がやったかなり古いコードでした。responseTypeを設定し、responseTextを解析しない応答を使用する必要がありました。コードスニペットを更新しました。
— デニスバウス
ええ、これは素晴らしいです！追加の外部パッケージやデータファイルの編集を必要とせずに、そのまま使用できます。これが明らかに最善の答えです。
— アーロンブラムソン
11

head要素では、ファイルを参照します。

    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="css/leaflet.ie.css" />
    <![endif]-->
    <script src="leaflet/leaflet.js"></script>
    <script src="hydro_s.geojson" type="text/javascript"></script>
    <script src="hydro_l.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <title>Leaflet Map with GeoJson</title>
 </head>

そして、体内で：

<body>
    <div id="map"></div>
    <script type="text/javascript">

        var map = L.map('map', {
            center: [45.57, -73.5648],
            zoom: 10
        });

         /* Hydro */
        var hydro = new L.LayerGroup();
        L.geoJson(hydro_s, {style: hydrosStyle}).addTo(hydro);
        L.geoJson(hydro_l, {style: hydrolStyle}).addTo(hydro);

    </script>
</body>

それらをレイヤーグループに「入れる」必要はありません...

— fgcartographix
ソース
完璧！これは私が探していたものです！
— ベイリー
1
firefox用のFirebug Web開発者を使用すると、「ReferenceError：usStates is not defined」「（L.geoJson（usStates）.addTo（map）;」が表示<script src="usStates.geojson" type="text/javascript"></script>さL.geoJson(usStates).addTo(map);れます。アイデア？
— ベイリー
これは、SRCで何か...鉱山は、文書の先頭にある（私は完全にそれを追加するために私の答えを編集した）でなければならない
— fgcartographix
1
参照に変数は必要ありませんか？ファイル拡張子が.geojsonではなく.jsonであることは重要ですか？
— ベイリー
2
これは紛らわしい答えです。データファイルで変数hydro_s、hydro_lを定義する必要があり、技術的には無効なGeoJSONを作成することになります。詳細については、他の回答を参照してください...
— フロリアンレーダーマン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.