Geolonia の JavaScript API を使ってGeoJSONを理解する (1)

Posted by kamataryo on · 1 min read

Geolonia の地図で GeoJSON を扱う

地図上の位置を指し示したり、図形で囲まれた領域を表現したいということはよくあります。Geolonia の JavaScript API では、これらを実現するために標準的な位置情報のデータ交換フォーマットである GeoJSON の扱いをサポートしています。GeJSON は名前の通り JSON 形式のフォーマットで、JavaScript 等から扱いやすいものになっています。以下は富士山山頂付近のポイント(点)を表現した GeoJSON です。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [138.73, 35.36]
      }
    }
  ]
}

地図上の点や領域は地物 (フィーチャー、Feature) と呼ばれます。GeoJSON のフォーマットは 複数の Feature の集まりである FeatureCollection という単位で地物を扱うことができます。 個々の地物は、 "Feature" という type プロパティ、各種のデータを格納するための properties というオブジェクト、及び地物の種類やその地理的情報を格納するための geometry というプロパティを持っています。 geometry オブジェクトは、 "Point""LineString""Polygon" などの地物の種類を判別する type プロパティ、及びこの座標を格納するための coordinates というプロパティを持っています。

ポイント以外にもラインストリング(線)やポリゴン(領域)などを表現することができます。ポリゴンの場合は外周の上の点を列挙することで表現します。最後の点は最初の点と同じである必要があります。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.77, 35.35],
            [138.78, 35.33],
            [138.8, 35.35],
            [138.77, 35.35]
          ]
        ]
      }
    }
  ]
}

これらのデータを Geolonia の地図の上に表示すると次のように描かれます。

<div
  class="geolonia"
  data-navigation-control="off"
  data-geojson="#geojson-sample-1"
></div>
<script type="application/json" id="geojson-sample-1">
{
  "type": "FeatureCollection",
  "features": [
   {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [138.73, 35.36]
      }
    },
     {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.77, 35.35],
            [138.78, 35.33],
            [138.80, 35.35],
            [138.77, 35.35]
          ]
        ]
      }
    }
  ]
}
</script>


Geolonia では、ウェブ地図や位置情報を利用したウェブアプリケーションや、モバイルアプリケーションの開発を承っています。

お問い合わせ