- <!DOCTYPE html>
- <html>
- <head>
- <meta charset='utf-8'/>
- <title>OpenStreetMap coverage (amenity=fuel)</title>
- <link rel="stylesheet" href="../surveyor.css">
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
- </head>
- <body>
- <div id="wrap">
- <div class="header">
- <H1>OpenStreetMap coverage (燃料給油所を指標にした網羅率)</H1>
- <div id="map" style="height: 720px; width: 100%;"></div>
- <div id="timestamp2"></div><br/>
- <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>
- <hr/>
- </div>
-
- <div id="inner">
- <div id="mainWrap">
- <p>以下のデータは月に2〜3回程度の頻度で更新を行う予定です。</p>
- <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>
- <p>'QGIS’を使ってPostGISデータベースにあるデータを直接見ることで、GSの入力状況(入力済み/未入力)を詳細に知ることができます。マッピング計画の参考にしてください。</p>
- <img src="QGIS_fuel_20170924.png" alt="QGISでの表示" class="qgisimage"/><br/>
- <ul>
- <li>QGISの設定定義ファイル[<a href='/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel_All.qgs'>fuel_All.qgs</a>]をダウンロード可能です。</li>
- <li>「<a href='http://surveyor.mydns.jp/owncloud/s/fx3xjafbd66c1us'>QGISの使い方</a>」説明書をダウンロード可能です。</li>
- </ul>
- <a href="../../hayashi/src/jp/co/areaweb/tools/command/ReadXML.java"></a>
-
- <br/>
- <hr/>
- <br/>
-
- <p>国土数値情報の燃料給油所位置を中心とする、200m四方の矩形領域に存在するOSMのamenity=fuelノードの評価点の合計を数える。<br/>
- <br/>
- 評価点;<br/>
- blandがない ーー> 1ポイント<br/>
- fixmeがある ーー> 1ポイント<br/>
- blandがある ーー> 2ポイント<br/>
- <br/>
- 対象ノード;<br/>
- amenity = fuel<br/>
- <br/>
- レベル分け:<br/>
- 評価点の合計値をもとに以下に色分けしています。<br/>
- 0ポイント → 赤 (未入力)<br/>
- 1ポイント以上 → オレンジ (一次入力)<br/>
- 2ポイント以上 → 青 (入力済) <br/>
- </p>
- </div>
-
- <div id="sideWrap">
- <div id="timestamp"></div>
- <table>
- <caption>マッピングカバー率 都道府県別</caption>
- <thead>
- <tr>
- <th>code</th>
- <th>都道府県</th>
- <th>標本数</th>
- <th>カバー率(%)</th>
- </tr>
- </thead>
- <tbody id="data_list"></tbody>
- </table>
- </div>
- <div class="clear"><hr /></div>
- </div>
- </div>
- <script>
- var jsonurl = '/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/coverage.fuel.json';
- $.getJSON(jsonurl, function(data) {
- var count = 0;
- $("#timestamp").append("<p>" + data.timestamp + " 更新</p>") ;
- $("#timestamp2").append("<p>上図は " + data.timestamp + " での状況 (表示されるまで2〜3分かかります)</p>") ;
- $("#source").append("国土交通省国土政策局「" + data.sourcedata + "」をもとにhayashiが編集・加工したものです。") ;
- $(data.coverage).each(function() {
- $("#data_list").append("<tr id=\"data_id" + count + "\"></tr>") ;
- $("#data_list #data_id" + count).append("<td class='code'>" + this.code + "</td>") ;
- $("#data_list #data_id" + count).append("<td class='name'>" + this.name + "</td>") ;
- $("#data_list #data_id" + count).append("<td class='denominator'>" + this.denominator + "</td>") ;
- $("#data_list #data_id" + count).append("<td class='par'>" + this.par + "</td>") ;
- count++ ;
- });
- });
- </script>
- <script type="text/javascript">
- var map = L.map('map').setView([36.131, 140.241], 8);
-
- //OSMレイヤー追加
- L.tileLayer(
- 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
- {
- attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',
- maxZoom: 18
- }
- ).addTo(map);
-
- var geojsonMarkerOptions0 = {
- radius: 8,
- fillColor: "#ff0000",
- color: "#000",
- weight: 1,
- opacity: 1,
- fillOpacity: 0.8
- };
-
- var geojsonMarkerOptions1 = {
- radius: 8,
- fillColor: "#FF7800",
- color: "#000",
- weight: 1,
- opacity: 1,
- fillOpacity: 0.8
- };
-
- var geojsonMarkerOptions2 = {
- radius: 8,
- fillColor: "#0000ff",
- color: "#000",
- weight: 1,
- opacity: 1,
- fillOpacity: 0.8
- };
-
- $.getJSON("/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel0.json", function(data) {
- var geojson = L.geoJson(data, {
- pointToLayer: function (feature, latlng) {
- return L.circleMarker(latlng, geojsonMarkerOptions0);
- }
- });
- geojson.addTo(map);
- });
- $.getJSON("/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel1.json", function(data) {
- var geojson = L.geoJson(data, {
- pointToLayer: function (feature, latlng) {
- return L.circleMarker(latlng, geojsonMarkerOptions1);
- }
- });
- geojson.addTo(map);
- });
- $.getJSON("/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/fuel2.json", function(data) {
- var geojson = L.geoJson(data, {
- pointToLayer: function (feature, latlng) {
- return L.circleMarker(latlng, geojsonMarkerOptions2);
- }
- });
- geojson.addTo(map);
- });
- </script>
-
- </body>
- </html>