Qt内でのMapTilerマップの使用

2019年4月23日発行

Qt画像内でのMapTilerマップの使用

デスクトップアプリケーションの開発は難しくて退屈だと言われていますが、Qt 5.12を使って、数種類のMapTilerストリートマップを表示するC++/QMLアプリケーションを開発することで、その間違いを証明しましょう。

QtとQtCreatorのインストール

まず、Qt フレームワークと開発ツールをワークスペースにインストールする必要があります。https://www.qt.io/download にアクセスして OpenSource を選択し、お使いのプラットフォーム用のオンラインインストーラーをダウンロードしてください。Qt は Windows、Linux、macOS をサポートしています。

インストーラーを開き、最新のQt CreatorでQt 5.12をインストールします。お使いのプラットフォームに応じて、正しいビルド環境を選択する必要があります。Linux/macOSではGCC、WindowsではMinGWとMSVCのどちらかを選択できます。Microsoftのウェブサイトからビルドツールの一部としてダウンロードできる、ネイティブのMSVC 2017を使うことをお勧めします。macOSではXCodeをインストールします。Linuxでは有効なGCCのインストールが必要です。

また、「Android」のチェックを外し、「Sources and all other submodules」を選択します。インストールを進めます。

Windowsをお使いの方は、Qt 5.12.1以降、このチュートリアルで使用しているMapbox GLプラグインはMinGWでのみ利用可能ですのでご注意ください。

MapTiler地図デモプロジェクトのセットアップ

Qt Creatorのインストールが完了したら、https://github.com/maptiler/maptiler-qml-demo にあるデモ用のリポジトリをcloneまたはzip/tarでダウンロードしてください。

リポジトリを取り出して MaptilerQML.pro QtCreatorを使用します。Qt Creatorは正しいQt Development Kitを選択するように求めてきますので、Qt 5.12を選択して次に進みます。Qt はプロジェクトを解析し、ビルドファイルを準備します。

プロセスが終了したら、左下の「Run」ボタンを押すだけで、デモアプリケーションを実行できます。デモアプリケーションには3つのタブがあり、それぞれのタブには異なるマップビューアが表示されているはずです。ソースコードを見てみましょう。

C++コード

以下のmain.cppファイルをご覧ください。

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QApplication>
#include <QtWebEngine/QtWebEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QApplication app(argc, argv);

    QtWebEngine::initialize();

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

これは、デフォルトの標準的なQML起動コードです。QApplicationを作成する前に、高解像度の画面を使用している人のためにHigh DPI scalingなどの属性を設定する必要があります。

次にQtWebEngineを初期化する必要があります。QtWebEngineは埋め込み式のChromiumブラウザです。これにより、あらゆる種類のWebページをアプリケーション内で直接表示することができます。

コードの最後のブロックは、QMLに関するもので、QMLエンジンを作成し、単一のQMLファイルをロードしています。 main.qml.最後に、QApplicationのメインループを開始して、C++のコードは終了です。

QMLコード

下の図は、QMLのコードをすべて含んだmain.qmlです。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import QtWebEngine 1.8
import QtLocation 5.12
import QtPositioning 5.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("MapTiler QML demo")

    property string hostingKey: "<your MapTiler hosting key>"

    TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("Vector style - MapboxGL")
        }
        TabButton {
            text: qsTr("Raster style - MapboxGL")
        }
        TabButton {
            text: qsTr("Web Browser")
        }
    }

    StackLayout {
        width: parent.width
        anchors.top: bar.bottom
        anchors.bottom: parent.bottom

        currentIndex: bar.currentIndex
        Item {
            id: vectorTab

            // Our code for vector tab
        }
        Item {
            id: rasterTab

            // Our code for raster tab
        }
        Item {
            id: webBrowserTab

            // Our code for webbrowser tab
        }
    }
}

私たちのコードは、さまざまなQtのインポートから始まります。使用するモジュールをすべてインポートする必要があります。

ウィンドウ コンポーネントは、アプリケーションのメインウィンドウを定義するものです。すべてのQMLコンポーネントは ウィンドウ コンポーネントを使用しています。また、ウィンドウを表示させたいので、visibleプロパティをtrueに設定します。

次に、デフォルトのウィンドウサイズとウィンドウタイトルを設定します。次に、MapTiler のホスティングキーを設定する必要があります。ホスティングキーは、MapTilerCloud のアカウントにログインし、MapTilerCloud -> Account -> Keys の順に選択すると見つけることができ、好きなキーを選択することができます。まだ MapTilerCloud のアカウントをお持ちでない場合は、 FREEで新規アカウントを作成してください。

最後に、アプリケーションのレイアウトを定義します。デモアプリケーションは、3つのタブに分かれています。そのため、3つのアイテムを持つTabBarを定義します。TabBarの下にはStackLayoutを定義し、マップを重ねてタブを選択するたびに切り替えられるようにしています。

現在選択されているタブに切り替えるには、StackLayoutのcurrentIndexプロパティをTabBarのcurrentIndexにバインドします。QMLでは、他のコンポーネントをid名で表します。コンポーネントの中にidプロパティを定義するだけで、そのコンポーネントのid名が設定されます。正しく定義されていれば、次のように書くだけでそのコンポーネントのプロパティにアクセスできます。 <component-id>.<property name>.それがQMLを使う力なのです。

これでようやく、実際に地図を表示することに集中できます。

Qtの位置情報を利用する

ラスター地図を表示したいときもあれば、ベクタースタイルを使いたいときもあります。QtとMapTilerを使えば、もちろんその両方が可能です。そこで、Qt Location モジュールを使ってみましょう。Qt Locationは、ベクター、ラスター、ルート、フィーチャなどの地図をOpenGLでネイティブに描画する機能を備えており、カスタムオーバーレイやコントロールエレメントなどを実装して機能を拡張することができます。Qt Locationモジュールを使うことで、アプリケーション内でQtの能力を最大限に引き出すことができます。

長所

  • Qtのネイティブソリューションを使う
  • QtのPositioningプラグインと接続してGeoCoding機能に対応可能
  • 他のQMLコンポーネントを使用してコントロールやその他の機能を実装することで、シームレスに拡張可能

コンス

  • サードパーティ製のプラグインを使用するか、カスタムコネクタを実装する必要があります。

Mapbox GL Pluginのベクタースタイル

ベクタースタイルには、Mapbox GL プラグインを使用します。Map コンポーネントを追加し、MapboxGL プラグインを挿入します。mapboxgl.mapping.additional_style_urls プラグインパラメータに適切な値を渡して、MapTiler スタイルを設定します。下の図は、ベクタータブの最終的なコードです。

Plugin {
    id: mapPluginVector
    name: "mapboxgl"

    PluginParameter {
        name: "mapboxgl.mapping.additional_style_urls"
        value: "https://maps.tilehosting.com/styles/streets/style.json?key="
               + hostingKey
    }
}

Map {
    id: mapVector

    anchors.fill: parent
    plugin: mapPluginVector
    zoomLevel: 14
}

さらに詳しく知りたい方は、QML Map Component documentationQt Location Mapbox GL Plugindocumentation をご覧ください。

QtにおけるMapTiler

Mapbox GL Plugin ラスタタイル

ベクタースタイルが完成したら、次はラスタータイルに移りましょう。ここでもMapbox GL Pluginを使用し、異なるstyle.jsonを使ってラスタータイルを取得します。

Plugin {
    id: mapPluginRaster
    name: "mapboxgl"

    PluginParameter {
        name: "mapboxgl.mapping.additional_style_urls"
        value: "https://api.maptiler.com/maps/hybrid/style.json?key=" + hostingKey
    }
}

Map {
    id: mapRaster

    anchors.fill: parent
    plugin: mapPluginRaster
    zoomLevel: 14
}

QtにおけるMapTiler

WebEngineを利用したWebマップブラウザの組み込み

埋め込み式のブラウザビューを使用することもできます。WebEngineViewを設定することで、Chromiumを使用します。設定は、正しいURLをブラウザに渡すだけです。

WebEngineが使用できない場合は、WebEngineとWebViewを入れ替えて、ネイティブプラットフォームのブラウザを使用します。

以下にWebBrowserタブのコードを示します。

WebEngineView {
    anchors.fill: parent
    url: "https://api.maptiler.com/maps/streets/?key="
                     + hostingKey + "#1.22/-0.00000/0.00000"
}

長所

  • 最もわかりやすい完全なソリューション

コンス

  • Webブラウザを埋め込むと、Qtアプリケーションでは常に大幅なパフォーマンスの低下が発生します。
  • 一部のプラットフォームでは、アプリケーションでChromiumを使用できません。しかし、これはWebViewモジュールに切り替えることで解決できます。
  • オーバーレイは可能だが、Webブラウザを完全には拡張できない
  • デプロイ時には、Chromiumのバイナリをインクルードする必要があり、サイズが大幅に増加します。

QtにおけるMapTiler

結論

ご覧のように、MapTilerがホストするマップを使ったQtアプリケーションの作成は簡単な作業です。ニーズを特定し、ソリューションのための適切なツールを選択することが問題なのです。MapTiler with Qtはそのようなツールを提供し、不要なコードや肥大化したコードに悩まされることはありません。

Découvrez MapTiler en français!

Visitez maptiler.fr

Přečtěte si více v češtině

Více na maptiler.cz

Leer más en español

Visite maptiler.es

Meer in het Nederlands

Ga naar maptiler.nl

日本語で詳細をみる

maptiler.jp へ

Weitere Informationen finden Sie

auf MapTiler.de

ديزملا فشتكإ

maptiler.ae ىلإ ىقتنا

MapTilerをスイスで探す

MapTiler.chを見る