37
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

QGISでMapboxのタイル地図を使う

Posted at

QGISは「フリーでオープンソースの地理情報システム」で、お店などの場所を地図上で簡単に確認できます。単なる地点情報だけでなく、鉄道路線のような線の情報や、都道府県や市区町村などの面の情報も扱えます。複数のレイヤーを重ね合わせることで、単なる数値データを地理的な側面も考慮して表現できます。

MapboxはOSM (OpenStreetMap) をベースにした地図サービスです。Mapboxにユーザー登録してプロジェクトを作成すると、地図の見た目を自分でデザインできます。タイル地図を含めたデータ配信APIをたくさん用意してくれていますので、様々なデバイスやアプリケーションから利用できます。

スクリーンショット 2014-07-05 17.01.57.png

QGISで地物を表示するときに背景が真っ白だと寂しい感じがしますし、Google Mapsでは印刷ができません。OpenStreetMapや国土地理院地図が良い選択肢となることも多いですが、見た目を変えるために学ぶことが多いので敷居が高いと感じる人も多いはずです。

Mapboxは地図のデザインを変更するための管理画面を提供してくれており、QGISにタイル地図を読み込ませることができますので、Mapboxで背景画像をデザインしてQGISから使うことができます。
変更できる要素は、道路、橋、地域区分、水系、一般的な土地があります。ベースレイヤーは Strees, Terrain, Satellite があります。

スクリーンショット 2014-07-05 17.01.24.png

QGIS+Mapboxの方法は2つありますので順番に見ていきます。

  • TMS (Tiled Map Service) を使う方法
  • OpenLayersプラグインを使う方法 (恐らくTileLayerPluginでも可能)

TMS (Tiled Map Service) を使う方法

QGISではラスタレイヤーとしてWMS (Web Map Services) を利用できます。
QGISは内部的にGDALを使っていますので、GDALの「WMS -- Web Map Services」に沿ってXMLファイルを用意します。

Mapboxで地図プロジェクトを作成したら、プロジェクト情報のShareのURLから以下の3つの情報を読み解きます。

  • ユーザーアカウント名: 例では MAPBOX_USER_NAME としておきます。
  • 地図ID: 例では MAPBOX_PROJECT_ID としておきます。
  • アクセストークン: 例では MAPBOX_ACCESS_TOKEN としておきます。

それぞれの情報をメモしたら、以下のようなXMLファイルを作成します。
MAPBOX_USER_NAME, MAPBOX_PROJECT_ID, MAPBOX_ACCESS_TOKEN の部分はそれぞれの地図情報に合わせて変更してください。

openstreetmap_mapbox.xmlの例
<GDAL_WMS>
    <Service name="TMS">
        <ServerUrl>https://a.tiles.mapbox.com/v4/MAPBOX_USER_NAME. MAPBOX_PROJECT_ID/${z}/${x}/${y}.png?access_token=MAPBOX_ACCESS_TOKEN</ServerUrl>
    </Service>
    <DataWindow>
        <UpperLeftX>-20037508.34</UpperLeftX>
        <UpperLeftY>20037508.34</UpperLeftY>
        <LowerRightX>20037508.34</LowerRightX>
        <LowerRightY>-20037508.34</LowerRightY>
        <TileLevel>18</TileLevel>
        <TileCountX>1</TileCountX>
        <TileCountY>1</TileCountY>
        <YOrigin>top</YOrigin>
    </DataWindow>
    <Projection>EPSG:900913</Projection>
    <BlockSizeX>256</BlockSizeX>
    <BlockSizeY>256</BlockSizeY>
    <BandsCount>3</BandsCount>
    <Cache />
</GDAL_WMS>

QGISを開いてメニューバーから【レイヤ】⇒【ラスタレイヤの追加】を選択します。作成したXMLファイルを選択するとタイル地図が表示されます。
Mapboxのサイトで地図デザインを変更して、QGISで地図をスクロールしてみるとデザインが変わることが確認できるでしょう。しかし、画像が荒いのでちょっと微妙です。

OpenLayersプラグインを使う方法

メニューバーの【プラグイン】⇒【プラグインの管理とインストール】からOpenLayersプラグインをインストールします。インストールできるとメニューバーの【プラグイン】⇒【OpenLayers plugin】から Google Maps や Bing Maps、OSM を背景地図として利用できます。

MapboxはOSMのAPIと似ていますので、プラグインのディレクトリのファイルを編集して
プラグインはホームディレクトリ配下の .qgis2/python/plugins/openlayers_plugin にインストールされます。この中で3つの作業を実施します。アイコンの配置は任意です。

  • openlayers_plugin.py を編集する
  • html/osm.htmlhtml/mapbox.html にコピーして編集する
  • アイコンを mapbox_icon.png として置く
openlayers_plugin.py(130行目あたりに追加)
self.olLayerTypeRegistry.add( OlLayerType(self, 'Mapbox', 'mapbox_icon.png', 'mapbox.html', True) )
html/mapbox.html(30行目あたりを編集)
var mapboxUserName = "MAPBOX_USER_NAME";
var mapboxProjectID = "MAPBOX_PROJECT_ID";
var mapboxAccessToken = "MAPBOX_ACCESS_TOKEN";

var osm = new OpenLayers.Layer.OSM(
    "Mapbox",
    "https://api.tiles.mapbox.com/v4/" +
        mapboxUserName + "." + mapboxProjectID +
        "/${z}/${x}/${y}.png?access_token=" + mapboxAccessToken,
    {
        eventListeners: {
            "loadstart": layerLoadStart,
            "loadend": layerLoadEnd
        }
    }
);

QGISを再起動すると、メニューバーの【プラグイン】⇒【OpenLayers plugin】に Mapbox が追加されているはずです。色々とズームやスクロールすると、Mapboxの管理画面で変更したデザインが反映されることが分かると思います。
タイルごとにキャッシュされますので、Mapboxで編集途中でQGISでスクロールするとまだらな感じになります。

スクリーンショット 2014-07-05 17.07.22.png

MapboxはJavaScriptのSDKを提供していますので、それを使うとアクセストークンを気にする必要がなくなります。挙動を滑らかにしたい場合には実装変更に挑戦してみると良いでしょう。

参考:

37
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?