Leaflet 1.3 - 4-4 Using GeoJSON with Leaflet

4-4 Using GeoJSON with Leaflet

Using GeoJSON with Leaflet
Leaflet で GeoJSON を使用する

GeoJSON is becoming a very popular data format among many GIS technologies and services — it's simple, lightweight, straightforward, and Leaflet is quite good at handling it. In this example, you'll learn how to create and interact with map vectors created from GeoJSON objects.

GeoJSON は、多くの GIS テクノロジとサービスの間でとても人気のあるデータフォーマットになっています - それは簡易で、軽量、明快、そして、Leaflet はそれを扱うのにかなりよいものです。この例では、GeoJSON オブジェクトから作成されるマップベクタを作成し対話する方法を学習します。


About GeoJSON
GeoJSON について

According to http://geojson.org:
http://geojson.org より

GeoJSON is a format for encoding a variety of geographic data structures. A GeoJSON object may represent a geometry, a feature, or a collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.

GeoJSON は、様々な地理情報データ構造をエンコードするためのフォーマットです。GeoJSON オブジェクトは、ジオメトリ、または、フィーチャ、フィーチャのコレクションを表わすことができます。GeoJSON は、次のジオメトリタイプ：ポイント、および、ラインストリング、ポリゴン、マルチポイント、マルチラインストリング、マルチポイント、ジオメトリコッレクションをサポートします。GeoJSON のフィーチャは、ジオメトリオブジェクトと付加プロパティを含み、そして、フィーチャコレクションは、フィーチャのリストを表わします。

Leaflet supports all of the GeoJSON types above, but Features and FeatureCollections work best as they allow you to describe features with a set of properties. We can even use these properties to style our Leaflet vectors. Here's an example of a simple GeoJSON feature:

Leaflet は、上記全ての GeoJSON タイプをサポートします、しかし、Feature（Feature Object[REF 7946-The GeoJSON Format(https://tools.ietf.org/html/rfc7946#section-3.2)]）と FeatureCollection（FeatureCollections Object[REF 7946-The GeoJSON Format(https://tools.ietf.org/html/rfc7946#section-3.3)]）は、プロパティの設定とともにフィーチャを描画することができるので、最もよい動作をします。Leaflet ベクタのスタイルを決めるためにこれらのプロパティを使用することさえできます。これは簡単な GeoJSON フィーチャの例です：

var geojsonFeature = {
 "type": "Feature",
 "properties": {
  "name": "Coors Field",
  "amenity": "Baseball Stadium",
  "popupContent": "This is where the Rockies play!"
 },
 "geometry": {
  "type": "Point",
  "coordinates": [-104.99404, 39.75621]
 }
};

The GeoJSON layer

GeoJSON objects are added to the map through a GeoJSON layer[Leaflet API(http://leafletjs.com/reference-1.3.0.html#geojson)]. To create it and add it to a map, we can use the following code:

GeoJSON オブジェクトは、GeoJSON レイヤを通してマップに追加されます。それを作成して追加するために、次のコードを使用できます：

L.geoJSON(geojsonFeature).addTo(map);

GeoJSON objects may also be passed as an array of valid GeoJSON objects.

GeoJSON オブジェクトは、有効な GeoJSON オブジェクトの配列として渡すこともできます。

var myLines = [{
 "type": "LineString",
 "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
 "type": "LineString",
 "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

 訳注：
上記 myLines を map に追加するには次のコードも追加してください。

L.geoJSON(myLines).addTo(map);

また、map のズームも初期設定を 3 に変更します。

var map = L.map('map').setView([39.74739, -105], 3);

Alternatively, we could create an empty GeoJSON layer and assign it to a variable so that we can add more features to it later.

あるいは、GeoJSON レイヤにさらにフィーチャを追加するために、空の GeoJSON レイヤを作成し、それに変数を割り当てます。

var myLayer = L.geoJSON().addTo(map);
myLayer.addData(geojsonFeature);

Options

style

The style option can be used to style features two different ways. First, we can pass a simple object that styles all paths (polylines and polygons) the same way:

スタイル（style）オプションは、フィーチャを２つの違う方法でスタイルを決めるために使用されます。最初に、２つのパス（ポリラインとポリゴンを）同じ方法でスタイルを決める簡単なオブジェクトを渡すことができます：

var myLines = [{
 "type": "LineString",
 "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
 "type": "LineString",
 "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

var myStyle = {
 "color": "#ff7800",
 "weight": 5,
 "opacity": 0.65
};

L.geoJSON(myLines, {
 style: myStyle
}).addTo(map);

Alternatively, we can pass a function that styles individual features based on their properties. In the example below we check the "party" property and style our polygons accordingly:

あるいは、プロパティを基本としたここのフィーチャのスタイルを決めるファンクションを渡すことができます。下記の例では、"party" プロパティを確認し、それに応じてポリゴンのスタイルを決めます。

var states = [{
 "type": "Feature",
 "properties": {"party": "Republican"},
 "geometry": {
  "type": "Polygon",
  "coordinates": [[
   [-104.05, 48.99],
   [-97.22,  48.98],
   [-96.58,  45.94],
   [-104.03, 45.94],
   [-104.05, 48.99]
  ]]
 }

}, {
 "type": "Feature",
  "properties": {"party": "Democrat"},
  "geometry": {
   "type": "Polygon",
   "coordinates": [[
     [-109.05, 41.00],
     [-102.06, 40.99],
     [-102.03, 36.99],
     [-109.04, 36.99],
     [-109.05, 41.00]
   ]]
  }
}];

L.geoJSON(states, {
 style: function(feature) {
  switch (feature.properties.party) {
   case 'Republican': return {color: "#ff0000"};
   case 'Democrat':   return {color: "#0000ff"};
  }
 }
}).addTo(map);

pointToLayer

Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer. This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker.

ポイント（point）は、ポリライン（polyline）やポリゴン（polygon）と違った取扱がされています。GeoJSON レイヤを作成するとき、GeoJSON options（Leaflet API[http://leafletjs.com/reference-1.3.0.html#geojson]）オブジェクトで pointToLayer ファンクションに渡すことによって、これを変更できます。このファンクションは、 LatLng（Leaflet API[http://leafletjs.com/reference-1.3.0.html#latlng]）を渡し、この場合 Marker（Leaflet API[http://leafletjs.com/reference-1.3.0.html#marker]）や CircleMarker（Leaflet API[http://leafletjs.com/reference-1.3.0.html#circlemarker]）のように、ILayer のインスタンスを返さなければなりません。

Here we're using the pointToLayer option to create a CircleMarker:

ここで、CircleMarker を作成するために pointToLayer オプションを使用します。

var geojsonMarkerOptions = {
 radius: 8,
 fillColor: "#ff7800",
 color: "#000",
 weight: 1,
 opacity: 1,
 fillOpacity: 0.8
};

L.geoJSON(someGeojsonFeature, {
 pointToLayer: function (feature, latlng) {
  return L.circleMarker(latlng, geojsonMarkerOptions);
 }
}).addTo(map);

訳注：geojsonFeature の map への追加コードをコメントアウトし、上記コードの「someGeojsonFeature」を「geojsonFeature」に変更します。

// L.geoJSON(geojsonFeature).addTo(map);
---
L.geoJSON(geojsonFeature, {
 pointToLayer: function (feature, latlng) {
  return L.circleMarker(latlng, geojsonMarkerOptions);
 }
}).addTo(map);
---

We could also set the style property in this example — Leaflet is smart enough to apply styles to GeoJSON points if you create a vector layer like circle inside the pointToLayer function.

この例では、スタイルプロパティも設定できます - もし、pointToLayer ファンクション内でサークル（circle）のようなベクタレイヤを作成するなら、Leaflet は、GeoJSON ポイント（point）にスタイルを適用するのに十分な性能があります。


onEachFeature

The onEachFeature option is a function that gets called on each feature before adding it to a GeoJSON layer. A common reason to use this option is to attach a popup to features when they are clicked.

onEachFeature オプションは、GeoJSON レイヤにフィーチャを追加する前に、各フィーチャが呼び出されるファンクションです。このオプションを使用する一般的な理由は、フィーチャがクリックされるときポップアップをフィーチャに装着するためです。

function onEachFeature(feature, layer) {
 // does this feature have a property named popupContent?
 if (feature.properties && feature.properties.popupContent) {
  layer.bindPopup(feature.properties.popupContent);
 }
}

var geojsonFeature = {
 "type": "Feature",
 "properties": {
  "name": "Coors Field",
  "amenity": "Baseball Stadium",
  "popupContent": "This is where the Rockies play!"
 },

 "geometry": {
  "type": "Point",
  "coordinates": [-104.99404, 39.75621]
 }
};

L.geoJSON(geojsonFeature, {
 onEachFeature: onEachFeature
}).addTo(map);

filter

The filter option can be used to control the visibility of GeoJSON features. To accomplish this we pass a function as the filter option. This function gets called for each feature in your GeoJSON layer, and gets passed the feature and the layer. You can then utilise the values in the feature's properties to control the visibility by returning true or false.

filter オプションは、GeoJSON フィーチャの可視性を制御するために使用されます。これを達成するために filter オプションとしてファンクションを渡します。このファンクションは、GeoJSON レイヤの各フィーチャが呼び出され、フィーチャとレイヤを渡されます。それから、true と false を返すことによって可視性を制御するために、フィーチャのプロパティで値を利用できます。

In the example below "Busch Field" will not be shown on the map.

下記の例で、"Busch Field" は表示されません。

var someFeatures = [{
 "type": "Feature",
 "properties": {
  "name": "Coors Field",
  "show_on_map": true
 },
 "geometry": {
  "type": "Point",
  "coordinates": [-104.99404, 39.75621]
 }

}, {
 "type": "Feature",
  "properties": {
   "name": "Busch Field",
   "show_on_map": false
  },
  "geometry": {
   "type": "Point",
   "coordinates": [-104.98404, 39.74621]
  }
}];

L.geoJSON(someFeatures, {
 filter: function(feature, layer) {
  return feature.properties.show_on_map;
 }
}).addTo(map);

View the example page to see in detail what is possible with the GeoJSON layer.

GeoJSON レイヤで可能なことを詳細で見るために例のページをみてみます。

全コード

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./leaflet13/leaflet.css" />
  <script src="./leaflet13/leaflet.js"></script>
  <title>Using GeoJSON with Leaflet</title>
 </head>
 <body>

  <div id="map" style="width: 600px; height: 400px;"></div>
  <script>

  //Setting up the map
   var map = L.map('map').setView([39.74739, -105], 3);
   
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map);

   //onEachFeature
   function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.popupContent) {
     layer.bindPopup(feature.properties.popupContent);
    }
   }

   //About GeoJSON
   var geojsonFeature = {
    "type": "Feature",
    "properties": {
     "name": "Coors Field",
     "amenity": "Baseball Stadium",
     "popupContent": "This is where the Rockies play!"
    },
    "geometry": {
     "type": "Point",
     "coordinates": [-104.99404, 39.75621]
    }
   };

   //The GeoJSON layer
   // L.geoJSON(geojsonFeature).addTo(map);
   
   // var myLayer = L.geoJSON().addTo(map);
   // myLayer.addData(geojsonFeature);

   //onEachFeature
   // L.geoJSON(geojsonFeature, {
   //  onEachFeature: onEachFeature
   // }).addTo(map);

   //The GeoJSON layer
   var myLines = [{
    "type": "LineString",
    "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
    }, {
    "type": "LineString",
    "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
   }];
   
   // L.geoJSON(myLines).addTo(map);

   //Option

   //style
   var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
   };

   L.geoJSON(myLines, {
    style: myStyle
   }).addTo(map);

   var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
     "type": "Polygon",
     "coordinates": [[
       [-104.05, 48.99],
       [-97.22,  48.98],
       [-96.58,  45.94],
       [-104.03, 45.94],
       [-104.05, 48.99]
      ]]
     }
    }, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
     "type": "Polygon",
     "coordinates": [[
       [-109.05, 41.00],
       [-102.06, 40.99],
       [-102.03, 36.99],
       [-109.04, 36.99],
       [-109.05, 41.00]
     ]]
    }
   }];

   L.geoJSON(states, {
    style: function(feature) {
     switch (feature.properties.party) {
      case 'Republican': return {color: "#ff0000"};
      case 'Democrat':   return {color: "#0000ff"};
     }
    }
   }).addTo(map);

   //pointToLayer
   var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
   };

   L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
     return L.circleMarker(latlng, geojsonMarkerOptions);
    }
   }).addTo(map);

   //filter
   var someFeatures = [{
    "type": "Feature",
    "properties": {
     "name": "Coors Field",
     "show_on_map": true
    },
    "geometry": {
     "type": "Point",
     "coordinates": [-104.99404, 39.75621]
    }
   }, {
    "type": "Feature",
    "properties": {
     "name": "Busch Field",
     "show_on_map": false
    },
    "geometry": {
     "type": "Point",
     "coordinates": [-104.98404, 39.74621]
    }
   }];

   L.geoJSON(someFeatures, {
    filter: function(feature, layer) {
     return feature.properties.show_on_map;
    }
   }).addTo(map);

  </script>
 </body>
</html>