公開日：2019-06-19
最終更新日：2019-08-29
最終更新日：2019-08-29
leaflet03-1：マップへの
GeoJSONオブジェクトの表示次のgeojsonFeatures内のGeoJSONオブジェクトをマップに表示しよう．
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
var geojsonFeatures = [{ "type": "Feature", "properties": { "name": "1号館", "category": "lecture", "popupContent": "ここは 1号館です。", "show_on_map": true, }, "geometry": { "type": "Point", "coordinates": [135.939637, 34.964617], }, }, { "type": "Feature", "properties": { "name": "6号館", "category": "lecture", "popupContent": "ここは 6号館です。", "show_on_map": false, }, "geometry": { "type": "Point", "coordinates": [135.940793, 34.963986], }, }, { "type": "Feature", "properties": { "name": "7号館", "category": "lecture", "popupContent": "ここは 7号館です。", "show_on_map": true, }, "geometry": { "type": "Point", "coordinates": [135.939057, 34.962904], }, }, { "type": "Feature", "properties": { "name": "青雲館", "category": "cafeteria", "popupContent": "ここは 青雲館です。", "show_on_map": true, }, "geometry": { "type": "Point", "coordinates": [135.941309, 34.963177], }, }, { "type": "Feature", "properties": { "name": "青志館", "category": "cafeteria", "popupContent": "ここは 青志館です。", "show_on_map": false, }, "geometry": { "type": "Point", "coordinates": [135.940715, 34.962993], }, }]; |
難易度：★
| ミッション | 説明 |
|---|---|
| 1 | geojsonFeaturesを基にGeoJSONレイヤを生成する． |
| 2 | GeoJSON.addTo()メソッドを使う． |
leaflet03-2：マップへの
GeoJSONオブジェクトの表示（円マーカとして）Point型のGeoJSONオブジェクトを円マーカとしてマップに表示しよう．
|
1 2 3 4 5 6 7 8 |
var geojsonMarkerOptions = { radius: 12, fillColor: "#ff0000", color: "#000000", weight: 1, opacity: 1, fillOpacity: 0.5, }; |
難易度：★★
| ミッション | 説明 |
|---|---|
| 1 | GeoJSONレイヤのpointToLayerオプションを設定する． |
| 2 | CircleMarkerオブジェクトを生成する． |
| 3 | CircleMarkerオブジェクトのオプションとしてgeojsonMarkerOptionsを設定する． |
leaflet03-3：マップへの
GeoJSONオブジェクトの表示（カテゴリ別に色分け）GeoJSONオブジェクトのカテゴリに応じて円マーカの色を変えてマップに表示しよう．
|
1 2 3 4 5 6 7 8 |
var geojsonMarkerOptions2 = { radius: 12, fillColor: "#0000ff", color: "#000000", weight: 1, opacity: 1, fillOpacity: 0.5, }; |
難易度：★★★
| ミッション | 説明 |
|---|---|
| 1 | switch文を使う． |
| 2 | GeoJSONオブジェクトのproperties.categoryの値が'lecture'の場合はgeojsonMarkerOptionsを設定し，'cafeteria'の場合はgeojsonMarkerOptions2を設定する． |
leaflet03-4：クリックされた
GeoJSONオブジェクトの説明のポップアップ表示GeoJSONオブジェクトのマーカがクリックされたとき，その説明をポップアップ表示しよう．
難易度：★★
| ミッション | 説明 |
|---|---|
| 1 | GeoJSONレイヤのonEachFeatureオプションを設定する． |
| 2 | Layer.bindPopup()メソッドを使う． |
| 3 | ポップアップの内容はGeoJSONオブジェクトのproperties.popupContentとする． |
leaflet03-5：
GeoJSONレイヤのフィルタの設定GeoJSONレイヤにフィルタを設定しよう．
難易度：★★
| ミッション | 説明 |
|---|---|
| 1 | GeoJSONレイヤのfilterオプションを設定する． |
| 2 | GeoJSONオブジェクトのproperties.show_on_mapの値がtrueの場合はマップに表示し，falseの場合は非表示にする． |
leaflet03-6：
GeoJSONレイヤへのGeoJSONオブジェクトの追加leaflet03-1のGeoJSONレイヤを生成した後，このレイヤにさらに次のgeojsonFeatures2を追加しよう．
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var geojsonFeatures2 = [{ "type": "Feature", "geometry": { "type": "LineString", "coordinates": [[135.939798, 34.963691], [135.938548, 34.962948], [135.938993, 34.962438], [135.939390, 34.962649]], }, }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [[[135.939637, 34.964617], [135.939057, 34.962904], [135.941309, 34.963177]]], }, }]; |
難易度：★★
| ミッション | 説明 |
|---|---|
| 1 | GeoJSON.addData()メソッドを使う． |
leaflet03-7：
GeoJSONレイヤのスタイルの変更leaflet03-6のGeoJSONレイヤのスタイルを変更しよう．
|
1 2 3 4 5 |
var myStyle = { "color": "#00ff00", "weight": 10, "opacity": 0.65, }; |
難易度：★★★
| ミッション | 説明 |
|---|---|
| 1 | GeoJSON.setStyle()メソッドを使う． |
| 2 | スタイルオプションとしてmyStyleを設定する． |