mapBoxでポリゴン表示。geoJsonの表示内容について変更する。

mapBoxでは、地図上に様々なメッシュの表示をおこなうことができます。
今回は、mapBoxを使ってgeoJsonの表示をおこない、かつ、表示内容をパラメータで変更する方法について紹介していきます。

環境情報

• ブラウザ：Chrome
• Mapbox：v2.3.1

ポリゴンの表示

以下のHTMLを記載するだけで地図上にポリゴンが表示されます。
とはいっても、mapインスタンスの作成は記載を省略しています。

map.on('load', function () {
    map.addSource('POLYGON_TEST', {
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': [
                {"type": "Feature", "geometry": {"type": "Polygon","coordinates": [[[139.74609375, 35.70556640625],[139.757080078125, 35.70556640625],[139.757080078125, 35.716552734375],[139.74609375, 35.716552734375],[139.74609375, 35.70556640625]]]}},
            ]
        }
    });
    
    map.addLayer({
        'id': 'PLOLYGON_TEST_fill',
        'type': 'fill',
        'source': 'POLYGON_TEST',
        'paint': {
            'fill-color': '#FFFF00',
            'fill-opacity': 0.1
        },
        'minzoom': 1,
        'maxzoom': 22
    });

    map.addLayer({
        'id': 'PLOLYGON_TEST_LINE',
        'type': 'line',
        'source': 'POLYGON_TEST',
        'paint': {
            'line-color': '#0000FF',
            'line-width': 2
        },
        'minzoom': 1,
        'maxzoom': 22
    });
});

「map.addSource」クラスで、geoJsonで表示する座標情報を定義しています。

ポリゴンの表示内容

ポリゴンの表示内容は、fill（塗りつぶし）とline（線）の定義でおこなうことができます。
パラメータとして準備されているのは、以下となります。

■fill（塗りつぶし）

fill-color	塗りつぶしの色
fill-opacity	不透明度（1が最も透明度が高い）
minzoon	表示する最小のズームレベル
maxzoon	表示する最大のズームレベル

■line（線）

line-color	線の色
line-width	線の太さ
minzoon	表示する最小のズームレベル
maxzoon	表示する最大のズームレベル

Tweet