データソースを作成する

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

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

GeoJSON データソース

geoJSON ベースのデータソースは、 DataSource クラスを使用してローカルにデータを読み込んで格納します。 geoJSON データは、 atlas.data 名前空間のヘルパークラスを使用して手動で作成または作成できます。 DataSource クラスは、ローカルまたはリモートの GeoJSON ファイルをインポートする関数を提供します。リモート GeoJSON ファイルは、COR が有効なエンドポイントでホストされている必要があります。 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 ベクタータイル仕様に準拠しています。 Azure Maps は、プラットフォームの一部として次のベクタータイルサービスを提供します。

ヒント

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

ベクタータイルソースのデータをマップに表示するには、ソースをいずれかのデータレンダリングレイヤーに接続します。ベクターソースを使用するすべてのレイヤーで、オプションに sourceLayer 値を指定する必要があります。次のコードでは、Azure Maps トラフィックフローベクタータイルサービスをベクタータイルソースとして読み込み、ラインレイヤーを使用してマップに表示します。このベクタータイルソースには、"トラフィックフロー" と呼ばれるソースレイヤーに 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 サンプルのベクタータイルラインレイヤーを参照してください。このサンプルのソースコードについては、ベクタータイルラインレイヤーのサンプルコードを参照してください。

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

データソースをレイヤーに接続する

データは、レンダリングレイヤーを使用してマップ上にレンダリングされます。 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 を渡すことに加えて、次の値もサポートしています。