Fork: 0
haya4 / www-root
Transfer to URL with SHA Find file
Newer
Older
www-root / coverage / fuel3.html
@hayashi hayashi on 6 Dec 2017 7 KB commentout
Raw Blame History 
  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="../surveyor.css">
  8.  <link rel="stylesheet" href="../lib/ol-4.5.0/ol.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.         <p>（旧版）2017-10-08時点での状況は<a href="https://hayashi.carto.com/builder/ab6e97ae-f730-4de3-9ef1-a4c0d751cc05/embed">CARTO</a>にて参照可能です　<img src="../92px-CARTO-logo.svg.png"/></p>
  18.         <hr/>
  19.     </div>
  20.  
  21.     <div id="inner">
  22.         <div id="mainWrap">
  23.             <p>以下のデータは月に２〜３回程度の頻度で更新を行う予定です。</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.             <br/>
  32.             <hr/>
  33.             <br/>
  34.  
  35.             <p>国土数値情報の燃料給油所位置を中心とする、200m四方の矩形領域に存在するOSMのamenity=fuelノードの評価点の合計を数える。<br/>
  36.                 <br/>
  37.                 評価点；<br/>
  38.                   blandがない　ーー＞　１ポイント<br/>
  39.                   fixmeがある　ーー＞　１ポイント<br/>
  40.                   blandがある　ーー＞　50ポイント<br/>
  41.                 <br/>
  42.                 対象ノード；<br/>
  43.                   node: amenity = fuel<br/>
  44.                   area: amenity = fuel<br/>
  45.                 <br/>
  46.                 レベル分け：<br/>
  47.                   評価点の合計値をもとに以下に色分けしています。<br/>
  48.                     ０ポイント　→　赤 (未入力）<br/>
  49.                     １ポイント以上　→ オレンジ (一次入力)<br/>
  50.                     ２ポイント以上　→　青 (入力済) <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 src="../lib/ol-4.5.0/ol.js"></script>
  73. <script src="../lib/Leaflet.MapboxVectorTile.js"></script>
  74. <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  75. <script src="coverage.js"></script>
  76. <script>
  77.     var jsonurl = '/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/coverage.fuel.json';
  78.     $.getJSON(jsonurl, function(data) {
  79.         var count = 0;
  80.         $("#timestamp").append("<p>" + data.timestamp + " 更新</p>") ;
  81.         $("#source").append("国土交通省国土政策局「" + data.sourcedata + "」をもとにhayashiが編集・加工したものです。") ;
  82.         $(data.coverage).each(function() {
  83.             $("#data_list").append("<tr id=\"data_id" + count + "\"></tr>") ;
  84.             $("#data_list #data_id" + count).append("<td class='code'>" + this.code + "</td>") ;
  85.             $("#data_list #data_id" + count).append("<td class='name'>" + this.name + "</td>") ;
  86.             $("#data_list #data_id" + count).append("<td class='denominator'>" + this.denominator + "</td>") ;
  87.             $("#data_list #data_id" + count).append("<td class='par'>" + this.par + "</td>") ;
  88.             count++ ;
  89.         });
  90.     });
  91.     
  92.     var tileDate = '/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/tileDate.json';
  93.     $.getJSON(tileDate, function(data) {
  94.         $("#timestamp2").append("<p>上図は " + data.date + " での状況<br/>   赤: 未入力, オレンジ: とりあえず入力されている, 蛍光グリーン: 入力済み</p>") ;
  95.     });
  96. </script>
  97. <script type="text/javascript">
  98.     const ort = new ol.layer.Tile({
  99.         source: new ol.source.OSM(),
  100.         title: "OpenStreetMap",
  101.         visible: true
  102.     });
  103.     /*
  104.     grayOsmLayer.on('postcompose', function(event) {
  105.         grayscale(event.context);
  106.     });
  107.     */
  108.  
  109.     const fuel0 = new ol.layer.VectorTile({
  110.         source: new ol.source.VectorTile({
  111.             format: new ol.format.MVT(),
  112.             url: "./tiles/tileFuel0/" + "{z}/{x}/{y}.pbf"
  113.         }),
  114.         title: "Fuel 0: 未入力",
  115.         visible: true,
  116.         opacity: 1,
  117.         style: function(feature){
  118.             return [
  119.                 new ol.style.Style({
  120.                     image: new ol.style.Circle({
  121.                         radius: 6,
  122.                         fill: new ol.style.Fill({color: "#ff0000"})
  123.                     })
  124.                 })
  125.             ];
  126.         }
  127.     });
  128.  
  129.     const fuel1 = new ol.layer.VectorTile({
  130.         source: new ol.source.VectorTile({
  131.             format: new ol.format.MVT(),
  132.             url: "./tiles/tileFuel1/" + "{z}/{x}/{y}.pbf"
  133.         }),
  134.         title: "Fuel 1: 入力済",
  135.         visible: true,
  136.         opacity: 1,
  137.         style: function(feature){
  138.             return [
  139.                 new ol.style.Style({
  140.                     image: new ol.style.Circle({
  141.                         radius: 6,
  142.                         fill: new ol.style.Fill({color: "#ffc800"})
  143.                     })
  144.                 })
  145.             ];
  146.         }
  147.     });
  148.  
  149.     const fuel2 = new ol.layer.VectorTile({
  150.         source: new ol.source.VectorTile({
  151.             format: new ol.format.MVT(),
  152.             url: "./tiles/tileFuel2/" + "{z}/{x}/{y}.pbf"
  153.         }),
  154.         title: "Fuel 2: 完了",
  155.         visible: true,
  156.         opacity: 1,
  157.         style: function(feature){
  158.             return [
  159.                 new ol.style.Style({
  160.                     image: new ol.style.Circle({
  161.                         radius: 6,
  162.                         fill: new ol.style.Fill({color: "#00ff00"})
  163.                     })
  164.                 })
  165.             ];
  166.         }
  167.     });
  168.  
  169.  
  170.     const view = new ol.View({
  171.         center: ol.proj.fromLonLat([140.241,36.131]),
  172.         zoom: 11
  173.     });
  174.  
  175.     const map = new ol.Map({
  176.         target: "map",
  177.         controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
  178.         view: view,
  179.         layers: [ort, fuel0, fuel1, fuel2]
  180.     });
  181.  
  182.     map.on("click", function(evt){
  183.         const feature = map.forEachFeatureAtPixel(evt.pixel, function(feature){
  184.             return feature;
  185.         });
  186.         if(feature){
  187.             document.getElementById("info").innerHTML = feature.get("P29_005");
  188.         }
  189.     });
  190. </script>
  191.  
  192. </body>
  193. </html>