dayjournal | Leaflet #022 – GeoJSONで属性複数表示

LeafletでGeoJSONの属性を複数表示するためには下記のように記述します。


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Leaflet Sample</title>

        <script src="./Library/leaflet-0.7.3/leaflet.js"></script>
        <link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet"/>

        <script src="./Library/jquery-2.1.4/jquery-2.1.4.min.js"></script>

        <script src="http://maps.google.com/maps/api/js?sensor=false&amp;amp;region=JP"></script>
        <script src="./plugin/leaflet-plugins-master/layer/tile/Google.js"></script>

        <link href="./css/stylesheet.css" rel="stylesheet"/>

    </head>
    <body>

        <div id="map"></div>

        <script src="./js/script.js"></script>

    </body>
</html>


html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}


{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "FID": 0.000000, "aaa": 1, "bbb": "サンプル01", "ccc": "晴" }, "geometry": { "type": "Point", "coordinates": [ 139.76712226867676, 35.681073705610572 ] } },
{ "type": "Feature", "properties": { "FID": 1.000000, "aaa": 2, "bbb": "サンプル02", "ccc": "曇" }, "geometry": { "type": "Point", "coordinates": [ 139.70030307769775, 35.690450256394989 ] } },
{ "type": "Feature", "properties": { "FID": 2.000000, "aaa": 3, "bbb": "サンプル03", "ccc": "雨" }, "geometry": { "type": "Point", "coordinates": [ 139.75124359130859, 35.707283453190406 ] } }
]
}


var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');

var map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 13,
    zoomControl: false,
    layers: [o_std]
});

var Map_BaseLayer = {
    "OpenStreetMap 標準": o_std,
    "地理院地図 標準": t_std,
    "地理院地図 淡色": t_pale,
    "地理院地図 オルソ": t_ort,
    "GoogleMap 標準": g_roadmap,
    "GoogleMap オルソ": g_satellite,
    "GoogleMap ハイブリッド": g_hybrid
};

L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map);

L.control.layers(Map_BaseLayer, null, { collapsed: false }).addTo(map);

$.getJSON("./vector/sample.geojson", function (data) {
    L.geoJson(data, {
        onEachFeature: function (feature, layer) {
            var field = '属性01 :   ' + feature.properties.aaa + '
' + 
                        '属性02 :   ' + feature.properties.bbb;
            layer.bindPopup(field);
        }}).addTo(map);
});

index.htmlを実行すると下記のようにブラウザで表示されます。

属性を表示： onEachFeature: function (feature, layer)～の後に処理を記述します。


onEachFeature: function (feature, layer) {
    var field = '属性01 :   ' + feature.properties.aaa + '<br>' + 
                '属性02 :   ' + feature.properties.bbb;
    layer.bindPopup(field);
}}).addTo(map);

属性を表示追加：


var field = '属性01 :   ' + feature.properties.aaa + '<br>' + 
            '属性02 :   ' + feature.properties.bbb + '<br>' + 
            '属性03 :   ' + feature.properties.ccc

参考文献
Leaflet

dayjournal memo

Leaflet #022 – GeoJSONで属性複数表示

Yasunori Kirimoto 2015/8/7