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

MapBox

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

表示する最大のズームレベル



sakusaku

都内でSIerをやっています。 使用している技術は、Java、PHP、MySQL、PostgreSQL、Oracle、Apache、Tomcat、あたりです。 Pythonやってみたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください