データソースを作成する

[アーティクル]
04/03/2023

Azure Maps Web SDK では、データがデータソースに格納されます。データソースを使用すると、クエリとレンダリングのデータ操作が最適化されます。現在、次の 2 種類のデータソースがあります。

GeoJSON ソース: 場所の生データを GeoJSON 形式でローカルに管理します。小規模から中規模のデータセット (数十万点を超える図形) に適しています。
ベクタータイルソース: マップのタイルシステムに基づいて、現在のマップビューのベクタータイルとして書式設定されたデータを読み込みます。大規模から大規模なデータセット (数百万または数十億点の図形) に最適です。

GeoJSON データソース

GeoJSON ベースのデータソースは、DataSource クラスを使用してローカルでデータを読み込んで格納します。 GeoJSON データは、atlas.data 名前空間に、手動で作成するかヘルパークラスを使用して作成できます。 DataSource クラスには、ローカルまたはリモートの GeoJSON ファイルをインポートするための関数が用意されています。リモートの GeoJSON ファイルは、CORS が有効なエンドポイント上でホストされている必要があります。 DataSource クラスには、ポイントデータをクラスター化するための機能があります。データは、DataSource クラスを使用して、簡単に追加、削除、および更新できます。次のコードは、Azure Maps で GeoJSON データを作成する方法を示しています。

//Create raw GeoJSON object.
var rawGeoJson = {
     "type": "Feature",
     "geometry": {
         "type": "Point",
         "coordinates": [-100, 45]
     },
     "properties": {
         "custom-property": "value"
     }
};

//Create GeoJSON using helper classes (less error prone and less typing).
var geoJsonClass = new atlas.data.Feature(new atlas.data.Point([-100, 45]), {
    "custom-property": "value"
});

作成されたデータソースは、map.sources プロパティ (SourceManager) を使用してマップに追加できます。次のコードは、DataSource を作成してマップに追加する方法を示しています。

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

次のコードは、GeoJSON データを DataSource に追加するさまざまな方法を示しています。

//GeoJsonData in the following code can be a single or array of GeoJSON features or geometries, a GeoJSON feature collection, or a single or array of atlas.Shape objects.

//Add geoJSON object to data source. 
source.add(geoJsonData);

//Load geoJSON data from URL. URL should be on a CORs enabled endpoint.
source.importDataFromUrl(geoJsonUrl);

//Overwrite all data in data source.
source.setShapes(geoJsonData);

ヒント

DataSource内のすべてのデータを上書きするとします。 clear 関数を呼び出してから add 関数を呼び出すと、マップで再レンダリングが 2 回行われ、それによって少しの遅延が発生する場合があります。代わりに、データソース内のすべてのデータを削除して置換する setShapes 関数を使用します。これにより、マップの再レンダリングが 1 回だけトリガーされます。

ベクタータイルソース

ベクタータイルソースには、ベクタータイルレイヤーにアクセスする方法が記述されています。ベクタータイルソースをインスタンス化するには、VectorTileSource クラスを使用します。ベクタータイルレイヤーはタイルレイヤーに似ていますが、同じではありません。タイルレイヤーはラスターイメージです。ベクタータイルレイヤーは、PBF 形式の圧縮ファイルです。この圧縮ファイルには、ベクターマップデータと 1 つ以上のレイヤーが含まれています。このファイルは、各レイヤーのスタイルに基づいて、クライアントでレンダリングおよびスタイル設定できます。ベクタータイルのデータには、ポイント、線、および多角形の形式で地理的特徴が含まれています。ベクタータイルレイヤーの使用には、ラスタータイルレイヤーよりも優れている点がいくつかあります。

ベクタータイルのファイルサイズは、通常、同等のラスタータイルよりはるかに小さくなります。そのため、使用される帯域幅が少なくなります。つまり、待機時間の短縮、より高速なマップ、ユーザーエクスペリエンスの向上を意味します。
ベクタータイルはクライアント上でレンダリングされるため、表示されているデバイスの解像度に適応できます。結果として、レンダリングされるマップはより明確に定義され、鮮明なラベルが表示されます。
ベクターマップ内のデータのスタイルを変更しても、クライアントに新しいスタイルを適用できるので、データを再度ダウンロードする必要はありません。これに対し、ラスタータイルレイヤーのスタイルを変更するには、通常、タイルをサーバーから読み込み、新しいスタイルを適用する必要があります。
データはベクター形式で配信されるので、データを準備するために必要なサーバー側の処理が少なくなります。つまり、新しいデータをより速く使用できるようになります。

Azure Maps は、オープンスタンダードである Mapbox Vector Tile 仕様に準拠しています。 Azure Maps では、プラットフォームの一部として次のベクタータイルサービスが提供されます。

道路タイル
トラフィックインシデント
トラフィックフロー
Azure Maps Creator では、Render - Get Map Tile API を使って、カスタムベクタータイルを作成およびアクセスすることもできます

ヒント

Web SDK を使用して Azure Maps の Render Service からベクターまたはラスターイメージのタイルを使用する場合、atlas.microsoft.com をプレースホルダー {azMapsDomain} に置き換えることができます。このプレースホルダーは、マップによって使用されるのと同じドメインに置き換えられ、同じ認証の詳細も自動的に追加されます。これにより、Microsoft Entra 認証を使うときに、Render Service での認証が大幅に簡単になります。

マップにベクタータイルソースからのデータを表示するには、ソースをいずれかのデータレンダリングレイヤーに接続します。ベクターソースを使用するすべてのレイヤーでオプションの sourceLayer 値を指定する必要があります。次のコードでは、Azure Maps のトラフィックフローベクタータイルサービスをベクタータイルソースとして読み込み、その後、線レイヤーを使用してマップに表示します。このベクタータイルソースには、ソースレイヤーに "Traffic flow" という 1 つのデータセットがあります。このデータセット内の行データには、traffic_level というプロパティがあります。これは、色を選択して線のサイズを拡大縮小するために、このコードで使用されます。

//Create a vector tile source and add it to the map.
var source = new atlas.source.VectorTileSource(null, {
    tiles: ['https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}'],
    maxZoom: 22
});
map.sources.add(source);

//Create a layer for traffic flow lines.
var flowLayer = new atlas.layer.LineLayer(source, null, {
    //The name of the data layer within the data source to pass into this rendering layer.
    sourceLayer: 'Traffic flow',

    //Color the roads based on the traffic_level property. 
    strokeColor: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 'red',
        0.33, 'orange',
        0.66, 'green'
    ],

    //Scale the width of roads based on the traffic_level property. 
        strokeWidth: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 6,
        1, 1
    ]
});

//Add the traffic flow layer below the labels to make the map clearer.
map.layers.add(flowLayer, 'labels');

ベクトルタイルソースのデータをマップに表示する方法の完全な作業サンプルについては、Azure Maps SamplesのVector tile line layerをご覧ください。このサンプルのソースコードについては、「Vector tile line layer のサンプルコード」を参照してください。

ベクトルタイルソースからのデータを表示するマップを示すスクリーンショット。

レイヤーへのデータソースの接続

データは、レンダリングレイヤーを使用してマップ上にレンダリングされます。 1 つ以上のレンダリングレイヤーで 1 つのデータソースを参照できます。次のレンダリングレイヤーでは、データソースが必要です。

バブルレイヤー - ポイントデータをマップ上で拡大縮小された円としてレンダリングします。
シンボルレイヤー - ポイントデータをアイコンやテキストとしてレンダリングします。
ヒートマップレイヤー - ポイントデータを密度ヒートマップとしてレンダリングします。
線レイヤー - 線をレンダリングしたり、多角形のアウトラインをレンダリングしたりします。
多角形レイヤー - 純色または画像パターンで多角形の領域を塗りつぶします。

次のコードは、データソースを作成し、マップに追加してバブルレイヤーに接続する方法を示しています。次に、GeoJSON ポイントデータをリモートの場所からデータソースにインポートします。

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

//Create a layer that defines how to render points in the data source and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(source));

//Load the earthquake data.
source.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson');

これらのデータソースに接続しないレンダリングレイヤーが他にありますが、これらのレイヤーでは、レンダリング用データが直接読み込まれます。

画像レイヤー - マップの上に 1 つの画像をオーバーレイし、指定した座標のセットにその角をバインドします。
タイルレイヤー - マップの上にラスタータイルレイヤーを重ねて表示します。

複数のレイヤーがある 1 つのデータソース

複数のレイヤーを 1 つのデータソースに接続できます。このオプションが役に立つさまざまなシナリオがあります。たとえば、ユーザーが多角形を描画するシナリオを考えてみます。ユーザーがポイントをマップに追加するときに、多角形領域をレンダリングして塗りつぶす必要があります。多角形の輪郭を描画するスタイル指定された線を追加すると、ユーザーが描画するときに多角形のエッジが見やすくなります。多角形内の個々の位置を簡単に編集するために、各位置の上にピンやマーカーなどのハンドルを追加することもできます。

1 つのデータソースのデータをレンダリングする複数のレイヤーが表示されるマップ

ほとんどのマッピングプラットフォームで、多角形オブジェクト、線オブジェクト、および多角形内の各位置に対するピンが必要になります。多角形を変更するときは、線とピンを手動で更新する必要がありますが、これはすぐに複雑になる可能性があります。

Azure Maps で必要なものは、次のコードで示すように、データソース内の 1 つの多角形だけです。

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

//Create a polygon and add it to the data source.
source.add(new atlas.data.Feature(
        new atlas.data.Polygon([[[/* Coordinates for polygon */]]]));

//Create a polygon layer to render the filled in area of the polygon.
var polygonLayer = new atlas.layer.PolygonLayer(source, 'myPolygonLayer', {
     fillColor: 'rgba(255,165,0,0.2)'
});

//Create a line layer for greater control of rendering the outline of the polygon.
var lineLayer = new atlas.layer.LineLayer(source, 'myLineLayer', {
     strokeColor: 'orange',
     strokeWidth: 2
});

//Create a bubble layer to render the vertices of the polygon as scaled circles.
var bubbleLayer = new atlas.layer.BubbleLayer(source, 'myBubbleLayer', {
     color: 'orange',
     radius: 5,
     strokeColor: 'white',
     strokeWidth: 2
});

//Add all layers to the map.
map.layers.add([polygonLayer, lineLayer, bubbleLayer]);

ヒント

map.layers.add 関数を使用してマップにレイヤーを追加するときに、既存のレイヤーの ID またはインスタンスを 2 番目のパラメーターとして渡すことができます。これにより、マップは、追加される新しいレイヤーを既存のレイヤーの下に挿入するように指示されます。このメソッドは、レイヤー ID を渡すだけでなく、次の値もサポートします。