Newer
Older
www-root / coverage / fuel.html
@root root on 25 Aug 2018 6 KB 2018-08-25
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>OpenStreetMap coverage (amenity=fuel)</title>
  7. <link rel="stylesheet" href="lib/surveyor.css">
  8. <link rel="stylesheet" href="lib/leaflet-0.7.3/leaflet.css"/>
  9. </head>
  10. <body>
  11. <div id="wrap">
  12. <div class="header">
  13. <H1>OpenStreetMap coverage (燃料給油所を指標にした網羅率)</H1>
  14. <div id="map" style="height: 720px; width: 98%;"></div>
  15. <div id="timestamp2"></div><br/>
  16. <div id="source"></div>
  17. <ul>
  18. <li><img src="img/92px-CARTO-logo.svg.png" width="85" height="32"/> (旧版)2017-10-08時点での状況は<a href="https://hayashi.carto.com/builder/ab6e97ae-f730-4de3-9ef1-a4c0d751cc05/embed">CARTO</a>にて参照可能です</li>
  19. <li><img src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Mapillary_logo.svg" width="32" height="32"/><a href="fuel3.html">Mappillary+</a>」版も有ります</li>
  20. </ul>
  21. <hr/>
  22. </div>
  23.  
  24. <div id="inner">
  25. <div id="mainWrap">
  26. <p>以下のデータは月に2〜3回程度の頻度で更新を行う予定です。</p>
  27. <p class="middle"><a href='http://surveyor.mydns.jp/owncloud/s/fx3xjafbd66c1us'><img src="img/logo_postgis.jpg" alt="PostGISの使い方" class="PostGIS"/></a> <img src="img/qgis-logo_anita02.png" alt="QGISでの表示" id="QGISlogo"/></p>
  28. <p>'QGIS’を使ってPostGISデータベースにあるデータを直接見ることで、GSの入力状況(入力済み/未入力)を詳細に知ることができます。マッピング計画の参考にしてください。</p>
  29. <img src="QGIS_fuel_20170924.png" alt="QGISでの表示" class="qgisimage"/><br/>
  30. <ul>
  31. <li>QGISの設定定義ファイル[<a href='/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel_All.qgs'>fuel_All.qgs</a>]をダウンロード可能です。</li>
  32. <li><a href='http://surveyor.mydns.jp/owncloud/s/fx3xjafbd66c1us'>QGISの使い方</a>」説明書をダウンロード可能です。</li>
  33. </ul>
  34. <br/>
  35. <hr/>
  36. <br/>
  37.  
  38. <p>国土数値情報の燃料給油所位置を中心とする、200m四方の矩形領域に存在するOSMのamenity=fuelノードの評価点の合計を数える。<br/>
  39. <br/>
  40. 対象ノード;<br/>
  41. node & area: amenity = fuel<br/>
  42. node & area: disused:amenity = fuel<br/>
  43. node & area: abandoned:amenity = fuel<br/>
  44. node & area: demolished:amenity = fuel<br/>
  45. node & area: historic:amenity = fuel<br/>
  46. node & area: was:amenity = fuel<br/>
  47. node & area: removed:amenity = fuel<br/>
  48. node & area: no:amenity = fuel<br/>
  49. <br/>
  50. 評価点;<br/>
  51. blandがない ーー> 1ポイント<br/>
  52. fixmeがある ーー> 1ポイント<br/>
  53. blandがある ーー> 50ポイント<br/>
  54. 'disused:amenity=fuel'  ーー> 50ポイント<br/>
  55. 'abandoned:amenity=fuel' ーー> 50ポイント<br/>
  56. 'demolished:amenity=fuel' ーー> 50ポイント<br/>
  57. 'historic:amenity=fuel'  ーー> 50ポイント<br/>
  58. 'was:amenity=fuel'    ーー> 50ポイント<br/>
  59. 'removed:amenity=fuel'  ーー> 50ポイント<br/>
  60. 'no:amenity=fuel'     ーー> 50ポイント<br/>
  61. <br/>
  62. レベル分け:<br/>
  63. 評価点の合計値をもとに以下に色分けしています。<br/>
  64. 0ポイント → 赤 (未入力)<br/>
  65. 1ポイント以上 → オレンジ (一次入力)<br/>
  66. 50ポイント以上 → 青 (入力済) <br/>
  67. </p>
  68. <p>DEVELOP: <a href="http://surveyor.mydns.jp/gitbucket/yuu/osmCoverage/wiki">SRC</a>も公開. 自由にお使いください</p>
  69. </div>
  70.  
  71. <div id="sideWrap">
  72. <div id="timestamp"></div>
  73. <table>
  74. <caption>マッピングカバー率 都道府県別</caption>
  75. <thead>
  76. <tr>
  77. <th>code</th>
  78. <th>都道府県</th>
  79. <th>標本数</th>
  80. <th>入力数</th>
  81. <th>カバー率(%)</th>
  82. </tr>
  83. </thead>
  84. <tbody id="data_list"></tbody>
  85. </table>
  86. </div>
  87. <div class="clear"><hr /></div>
  88. </div>
  89. </div>
  90. <script src="lib/leaflet-0.7.3/leaflet-src.js"></script>
  91. <script src="lib/Leaflet.MapboxVectorTile.js"></script>
  92. <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  93. <script>
  94. var jsonurl = 'GML_FUEL/coverage.fuel.json';
  95. $.getJSON(jsonurl, function(data) {
  96. var count = 0;
  97. $("#source").append("国土交通省国土政策局「" + data.sourcedata + "」をもとにhayashiが編集・加工したものです。") ;
  98. $(data.coverage).each(function() {
  99. $("#data_list").append("<tr id=\"data_id" + count + "\"></tr>") ;
  100. $("#data_list #data_id" + count).append("<td class='code'>" + this.code + "</td>") ;
  101. $("#data_list #data_id" + count).append("<td class='name'>" + this.name + "</td>") ;
  102. $("#data_list #data_id" + count).append("<td class='denominator'>" + this.denominator + "</td>") ;
  103. $("#data_list #data_id" + count).append("<td class='molecule'>" + this.molecule + "</td>");
  104. $("#data_list #data_id" + count).append("<td class='par'>" + this.par + "</td>") ;
  105. count++ ;
  106. });
  107. });
  108. var tileDate = 'GML_FUEL/pbfDate.json';
  109. $.getJSON(tileDate, function(data) {
  110. $("#timestamp").append("<p>" + data.date + " 更新</p>") ;
  111. $("#timestamp2").append("<p>上図は " + data.date + " での状況<br/> 赤: 未入力, オレンジ: とりあえず入力されている, 蛍光グリーン: 入力済み</p>") ;
  112. });
  113. </script>
  114. <script src="fuel.js"></script>
  115.  
  116. </body>
  117. </html>