www-root/coverage/carto_fuel.html at de0779ab51ab56807c76ace04c716392583ef311

Fork: 0
haya4 / www-root
Find file
Newer
Older
www-root / coverage / carto_fuel.html
hayashi on 28 Oct 2017 6 KB （旧版）2017-10-08時点を追加
Raw Blame History
<!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="timestamp"></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>以下のデータは月に２〜３回程度の頻度で更新を行う予定です。</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がある　ーー＞　２ポイント<br/>
                <br/>
                対象ノード；<br/>
                  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>
    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++ ;
        });
    });
</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 &copy; <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>