Previous Page Next Page

オープンソースによる地図表示（Leaflet編）３／９

2019/4/26 by T. Fujita

２－２、Pluginを使用したOverlay表示

　次にPluginを使用したOverLayを追加してみましょう。 　Pluginを使用して地図を表示する場合には、Leafletのホームページ等で公開されているPluginが必要です。 　今回は、NASAの地形データならびにUSGSの地震データを表示させますので次のPluginを使用します。
　・Leaflet.GIBS:　NASAの地形データ表示用
　・Leaflet Ajax:　USGSの地震データJSON版表示用

　地図の表示例とHTML及びJAVA Scriptのソースファイル内容を示します。 　単独で地図とOverlayを表示する場合は、『 Leaflet_Tutrial_202.html 』をクリックして下さい。

　　　　　　　基本地図にPluginを使用したOverlay表示例（右上部で地図、Overlayを選択）

　NASAの地形データでは、基本地図としてCost Line（白地図）をOverLayとしてWater Maskが選択できるように追加しました。 　ソースファイル内容で赤字部分が追記箇所です。 　他にどのようなデータが利用できるかは、NASA GIBSのデモを参照下さい。

　さらに地震情報のOverLayを追加（紫色の部分）してみました。　 地震データは『 USGS 』 からGeojsonフォーマットで受領しており、 　 Leaflet 用プラグイン『 Leaflet Ajax 』を追加することで表示させています。 　なお、USGSから受領できるデータ・フォーマットには、「Geojson」以外にも 「KML」があります。

　　　　　　　『Leaflet_Tutrial_202.html』のソースファイル内容 
001  <!DOCTYPE html>
002  <html>
003  <head>
004      <title> Leaflet_Tutrial_202.html	2019/4/26	by T. Fujita </title>
005      <meta charset = "utf-8" />
006      <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007      <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008      <script src = "./Plugins/leaflet-GIBS-master/src/GIBSMetadata.js" ></script> 
009      <script src = "./Plugins/leaflet-GIBS-master/src/GIBSLayer.js" ></script> 
010      <script src = "./Plugins/leaflet-ajax-master/dist/leaflet.ajax.js" ></script> 
011
012	 <script>
013	 function init() {
014         var Basic_Map = new Array();
015         Basic_Map[ 0 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
016		attribution: '© "<a href="https://www.openstreetmap.org/copyright">OpenStreetMap"</a"> contributors',
017		continuousWorld: false
018	    });
019  	    Basic_Map[ 1 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
020		attribution: ""<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'">地理院タイル"</a">"
021  	    });
     　　～
     　　変更なし
     　　～
048  	    Basic_Map[ 9 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
049  		maxZoom: 13,
050  		attribution: 'Tiles by "<a href="http://www.esrij.com/""> Esri Japan "</a">'
051  	    });
052         Basic_Map[ 10 ] = new L.GIBSLayer('Coastlines', { 
053		date: new Date('2015/04/01'), 
054		transparent: true 
055         }); 
056
057	     var baseMap = {
058		"OpenStreetMap": Basic_Map[ 0 ],
059		"国土地理院 標準地図": Basic_Map[ 1 ],
060		"国土地理院 淡色地図": Basic_Map[ 2 ],
061		"国土地理院 写真": Basic_Map[ 3 ],
062		"国土地理院 白地図": Basic_Map[ 4 ],
063		"Stamen Toner-Background": Basic_Map[ 5 ],
064		"Stamen Toner-Lite": Basic_Map[ 6 ],
065		"Stamen Watercolor": Basic_Map[ 7 ],
066		"Esri World Topo Map": Basic_Map[ 8 ],
067		"Esri Ocean Base Map": Basic_Map[ 9 ],
068		"NASA EOSDIS GIBS/Coast Lines": Basic_Map[ 10 ], 
069	     };
070
071	     var Over_Layer = new Array();
072	     Over_Layer[ 0 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
073		attribution: 'Map tiles by "<a href="http://stamen.com"">Stamen Design"</a">, ' +
074		'"<a href="http://creativecommons.org/licenses/by/3.0"">CC BY 3.0"</a"> — ' +
075		'Map data {attribution.OpenStreetMap}',
076		variant: 'toner-hybrid'
077	     });
   　　～
   　　変更なし
   　　～
090	     Over_Layer[ 3 ] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
091		attribution: ""<a href='http://www.openseamap.org' target='_blank'">OpenSeaMap"</a"> contributors"
092	     });
093	     Over_Layer[ 4 ] = new L.GIBSLayer('MODIS_Water_Mask', { 
094		date: new Date('2018/11/15'), 
095		transparent: true 
096	     }); 
097	     Over_Layer[ 5 ] = new L.GeoJSON.AJAX( 
098  //		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson", 
099  //		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson", 
100  //		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson", 
101  //		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson", 
102		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson", 
103  //		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson", 
104  //		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson", 
105  //		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson", 
106  //		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson", 
107		{pointToLayer: function (feature, latlng) { 
108		    return L.circleMarker(latlng, { 
109		    radius: feature.properties.mag * feature.properties.mag / 3, 
110		    fillcolor: "#FF7800", 
111		    color: "#FF7800", 
112		    weight: 1, 
113		    opacity: 0.5, 
114		    fillOpacity: 0.5 
115		}); }, 
116		onEachFeature: function (feature, layer) { 
117		    layer.bindPopup(new Date(feature.properties.time).toUTCString() + " / " + feature.properties.title); 
118		}  
119	     }); 
120
121	     var overLay = {
122		"Stamen toner-lines": Over_Layer[ 1 ],
123		"Stamen toner-labels": Over_Layer[ 2 ],
124		"OpenSeaMap": Over_Layer[ 3 ],
125		"GIBS Water Mask": Over_Layer[ 4 ], 
126		"1W All Earthquake(Geojson)": Over_Layer[ 5 ] 
127	     };
128
129	     var map_202 = L.map('map_202').setView([35.65809922, 139.74135747], 8);
130	     map_202.addLayer( Basic_Map[ 0 ] );
131	     L.control.layers(baseMap, overLay).addTo(map_202);
132	 }
133  </script>
134  </head>
135  <body onload="init()">
136      <div id="map_202" style="width: 100%; height: 400px; background-color:#ffffff; border: solid 1px"></div>
137  </body>
138  </html>

　また、USGSから受領できる地震データは、１日分／１週間分／１ケ月分と各種ありますのが、ここでは１週間分のデータを表示させています。 　他の地震データの使用例は、コメント文として記載していますので参考にしてください。

２－３、その他のOverlay表示

　上記の他にもOpen Weather Map等 Overlay可能なデータを配信しているサイトがあります。 　Open Weather Mapを使用するためには、当該ホームページでAPI keyを入手する必要がありますので、ここで使用方法の紹介はしませんが、 次のURL等が参考になると思います。
　・GitHub - buche/leaflet-openweathermap
　・あらふぉ ぁ らいふ 2018年12月29日



Previous Page Next Page

- 3 -