Labo288

プログラミングのこと、GISのこと、パソコンのこと、趣味のこと

LeafletでGeoJsonを読み込む


はじめに

オープンソースのWeb地図なら、Leafletが使いやすくてよいです。たとえばOpenStreetMapのタイル地図を実装する場合、以下のとおりです。

//地図を表示するdiv要素のidを設定
var map = L.map('map_container');
//地図の中心とズームレベルを指定
map.setView([45.0,143.0], 5);
//表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',  }).addTo(map);

このように簡単に書けます。ただ地図を表示したいならこれだけで終わりですが、Web上で動作するGISを作ろうと思っていて、ならば各種図形データにも対応していなきゃならんだろうと、いうことで。なんとLeafletはデフォルトでGeoJSONの読み込みに対応しています。実装したのが以下。

コード

function add_geojson(geojson){
    var shapes = geojson['new layer'];
    console.log(shapes);
    var myStyle = {
        "color": "#000000",
        "weight": 1,
        "opacity": 0.65
    };
    L.geoJSON(shapes,{
            style:myStyle,
            }).addTo(map);
}

私の例では、{'new layer': GeoJson形式のハッシュ}という構造になっているため、shapesがこんな書き方になっています(shapesこそがGeoJson)。こんなにシンプルにレイヤーを追加出来ます。styleの設定次第で色など変えられます。

参考

図形データはいわゆる投影法にもとづいて座標が設定されていて、投影法によって座標の値は全く異なります。この辺、詳しくないのですが、「JGD2000」という投影法で作成されていれば、Leafletで問題なく表示出来ます。