<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenStreetMap coverage (amenity=fuel)</title>
<link rel="stylesheet" href="../surveyor.css">
<link rel="stylesheet" href="../lib/ol-4.5.0/ol.css"/>
</head>
<body>
<div id="wrap">
<div class="header">
<H1>OpenStreetMap coverage (燃料給油所を指標にした網羅率)</H1>
<div id="map" style="height: 720px; width: 98%;"></div>
<div id="timestamp2"></div><br/>
<div id="source"></div>
<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>
<hr/>
</div>
<div id="inner">
<div id="mainWrap">
<p>以下のデータは月に２〜３回程度の頻度で更新を行う予定です。</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>
<br/>
<hr/>
<br/>
<p>国土数値情報の燃料給油所位置を中心とする、200m四方の矩形領域に存在するOSMのamenity=fuelノードの評価点の合計を数える。<br/>
<br/>
評価点；<br/>
blandがない ーー＞ １ポイント<br/>
fixmeがある ーー＞ １ポイント<br/>
blandがある ーー＞ 50ポイント<br/>
<br/>
対象ノード；<br/>
node: amenity = fuel<br/>
area: amenity = fuel<br/>
<br/>
レベル分け：<br/>
評価点の合計値をもとに以下に色分けしています。<br/>
０ポイント → 赤 (未入力）<br/>
１ポイント以上 → オレンジ (一次入力)<br/>
２ポイント以上 → 青 (入力済) <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 src="../lib/ol-4.5.0/ol.js"></script>
<script src="../lib/Leaflet.MapboxVectorTile.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="coverage.js"></script>
<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>") ;
$("#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++ ;
});
});
var tileDate = '/gitbucket/yuu/osmCoverageBin/raw/master/GML_FUEL/tileDate.json';
$.getJSON(tileDate, function(data) {
$("#timestamp2").append("<p>上図は " + data.date + " での状況<br/> 赤: 未入力, オレンジ: とりあえず入力されている, 蛍光グリーン: 入力済み</p>") ;
});
</script>
<script type="text/javascript">
const ort = new ol.layer.Tile({
source: new ol.source.OSM(),
title: "OpenStreetMap",
visible: true
});
/*
grayOsmLayer.on('postcompose', function(event) {
grayscale(event.context);
});
*/
const fuel0 = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: "./tiles/tileFuel0/" + "{z}/{x}/{y}.pbf"
}),
title: "Fuel 0: 未入力",
visible: true,
opacity: 1,
style: function(feature){
return [
new ol.style.Style({
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({color: "#ff0000"})
})
})
];
}
});
const fuel1 = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: "./tiles/tileFuel1/" + "{z}/{x}/{y}.pbf"
}),
title: "Fuel 1: 入力済",
visible: true,
opacity: 1,
style: function(feature){
return [
new ol.style.Style({
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({color: "#ffc800"})
})
})
];
}
});
const fuel2 = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: "./tiles/tileFuel2/" + "{z}/{x}/{y}.pbf"
}),
title: "Fuel 2: 完了",
visible: true,
opacity: 1,
style: function(feature){
return [
new ol.style.Style({
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({color: "#00ff00"})
})
})
];
}
});
var strokestyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(53, 175, 109, 0.7)',
width: 4
})
});
const mapillary = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
attributions: '© Mapillary',
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
tilePixelRatio: 16,
opacity: 0.7,
url: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'
}),
title: "Mapillary",
visible: true,
style: strokestyle
});
const view = new ol.View({
center: ol.proj.fromLonLat([140.241,36.131]),
zoom: 11
});
const map = new ol.Map({
target: "map",
controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
view: view,
layers: [ort, fuel0, fuel1, fuel2, mapillary]
});
</script>
</body>
</html>
