Newer
Older
www-root / coverage / carto_fuel.html
@hayashi hayashi on 5 Nov 2017 6 KB leaflet Vector Tile (tileFuel)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'/>
  5. <title>OpenStreetMap coverage (amenity=fuel)</title>
  6. <link rel="stylesheet" href="../surveyor.css">
  7. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  8. <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  9. <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  10. </head>
  11. <body>
  12. <div id="wrap">
  13. <div class="header">
  14. <H1>OpenStreetMap coverage (燃料給油所を指標にした網羅率)</H1>
  15. <div id="map" style="height: 720px; width: 100%;"></div>
  16. <div id="timestamp2"></div><br/>
  17. <p>(旧版)2017-10-08時点での<a href="https://hayashi.carto.com/builder/ab6e97ae-f730-4de3-9ef1-a4c0d751cc05/embed"><img src="../92px-CARTO-logo.svg.png"/></a></p>
  18. <hr/>
  19. </div>
  20.  
  21. <div id="inner">
  22. <div id="mainWrap">
  23. <p>以下のデータは月に2〜3回程度の頻度で更新を行う予定です。</p>
  24. <p class="middle"><a href='http://surveyor.mydns.jp/owncloud/s/fx3xjafbd66c1us'><img src="../logo_postgis.jpg" alt="PostGISの使い方" class="PostGIS"/></a> <img src="../qgis-logo_anita02.png" alt="QGISでの表示" id="QGISlogo"/></p>
  25. <p>'QGIS’を使ってPostGISデータベースにあるデータを直接見ることで、GSの入力状況(入力済み/未入力)を詳細に知ることができます。マッピング計画の参考にしてください。</p>
  26. <img src="QGIS_fuel_20170924.png" alt="QGISでの表示" class="qgisimage"/><br/>
  27. <ul>
  28. <li>QGISの設定定義ファイル[<a href='/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel_All.qgs'>fuel_All.qgs</a>]をダウンロード可能です。</li>
  29. <li><a href='http://surveyor.mydns.jp/owncloud/s/fx3xjafbd66c1us'>QGISの使い方</a>」説明書をダウンロード可能です。</li>
  30. </ul>
  31. <a href="../../hayashi/src/jp/co/areaweb/tools/command/ReadXML.java"></a>
  32. <br/>
  33. <hr/>
  34. <br/>
  35.  
  36. <p>国土数値情報の燃料給油所位置を中心とする、200m四方の矩形領域に存在するOSMのamenity=fuelノードの評価点の合計を数える。<br/>
  37. <br/>
  38. 評価点;<br/>
  39. blandがない ーー> 1ポイント<br/>
  40. fixmeがある ーー> 1ポイント<br/>
  41. blandがある ーー> 2ポイント<br/>
  42. <br/>
  43. 対象ノード;<br/>
  44. amenity = fuel<br/>
  45. <br/>
  46. レベル分け:<br/>
  47. 評価点の合計値をもとに以下に色分けしています。<br/>
  48. 0ポイント → 赤 (未入力)<br/>
  49. 1ポイント以上 → オレンジ (一次入力)<br/>
  50. 2ポイント以上 → 青 (入力済) <br/>
  51. </p>
  52. </div>
  53.  
  54. <div id="sideWrap">
  55. <div id="timestamp"></div>
  56. <table>
  57. <caption>マッピングカバー率 都道府県別</caption>
  58. <thead>
  59. <tr>
  60. <th>code</th>
  61. <th>都道府県</th>
  62. <th>標本数</th>
  63. <th>カバー率(%)</th>
  64. </tr>
  65. </thead>
  66. <tbody id="data_list"></tbody>
  67. </table>
  68. </div>
  69. <div class="clear"><hr /></div>
  70. </div>
  71. </div>
  72. <script>
  73. var jsonurl = '/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/coverage.fuel.json';
  74. $.getJSON(jsonurl, function(data) {
  75. var count = 0;
  76. $("#timestamp").append("<p>" + data.timestamp + " 更新</p>") ;
  77. $("#timestamp2").append("<p>上図は " + data.timestamp + " での状況 (表示されるまで2〜3分かかります)</p>") ;
  78. $("#source").append("国土交通省国土政策局「" + data.sourcedata + "」をもとにhayashiが編集・加工したものです。") ;
  79. $(data.coverage).each(function() {
  80. $("#data_list").append("<tr id=\"data_id" + count + "\"></tr>") ;
  81. $("#data_list #data_id" + count).append("<td class='code'>" + this.code + "</td>") ;
  82. $("#data_list #data_id" + count).append("<td class='name'>" + this.name + "</td>") ;
  83. $("#data_list #data_id" + count).append("<td class='denominator'>" + this.denominator + "</td>") ;
  84. $("#data_list #data_id" + count).append("<td class='par'>" + this.par + "</td>") ;
  85. count++ ;
  86. });
  87. });
  88. </script>
  89. <script type="text/javascript">
  90. var map = L.map('map').setView([36.131, 140.241], 8);
  91.  
  92. //OSMレイヤー追加
  93. L.tileLayer(
  94. 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  95. {
  96. attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
  97. maxZoom: 18
  98. }
  99. ).addTo(map);
  100.  
  101. var geojsonMarkerOptions0 = {
  102. radius: 8,
  103. fillColor: "#ff0000",
  104. color: "#000",
  105. weight: 1,
  106. opacity: 1,
  107. fillOpacity: 0.8
  108. };
  109.  
  110. var geojsonMarkerOptions1 = {
  111. radius: 8,
  112. fillColor: "#FF7800",
  113. color: "#000",
  114. weight: 1,
  115. opacity: 1,
  116. fillOpacity: 0.8
  117. };
  118.  
  119. var geojsonMarkerOptions2 = {
  120. radius: 8,
  121. fillColor: "#0000ff",
  122. color: "#000",
  123. weight: 1,
  124. opacity: 1,
  125. fillOpacity: 0.8
  126. };
  127.  
  128. $.getJSON("/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel0.json", function(data) {
  129. var geojson = L.geoJson(data, {
  130. pointToLayer: function (feature, latlng) {
  131. return L.circleMarker(latlng, geojsonMarkerOptions0);
  132. }
  133. });
  134. geojson.addTo(map);
  135. });
  136. $.getJSON("/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel1.json", function(data) {
  137. var geojson = L.geoJson(data, {
  138. pointToLayer: function (feature, latlng) {
  139. return L.circleMarker(latlng, geojsonMarkerOptions1);
  140. }
  141. });
  142. geojson.addTo(map);
  143. });
  144. $.getJSON("/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel2.json", function(data) {
  145. var geojson = L.geoJson(data, {
  146. pointToLayer: function (feature, latlng) {
  147. return L.circleMarker(latlng, geojsonMarkerOptions2);
  148. }
  149. });
  150. geojson.addTo(map);
  151. });
  152. </script>
  153.  
  154. </body>
  155. </html>