地理高密度散布シリーズの構成 (igMap)

トピックの概要

目的

このトピックは、igMap™ コントロールを使用して地理高密度散布シリーズを構成する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

• igMap の概要: このトピックは、igMap コントロールについて、その主要機能、最小要件、ユーザー インタラクションといった事項の概念的情報を提供します。

• igMap の追加: このトピックは、基本的な機能を備えた簡易 igMap コントロールを Web ページに追加する方法を示すチュートリアルです。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
• データ バインディング
  • データ バインディングの概要
  • データ バインディングの概要表
• 地理高密度散布シリーズ構成の概要
• コード例の概要
  • JavaScript における地理高密度散布シリーズの構成
  • ASP.NET MVC における地理高密度散布シリーズの構成
• 熱色スケールの構成
• 解像度の構成
• ローディング モードの構成
• マウス オーバー ビヘイビアの構成
• レンダリング モードの構成
• 最小ポイントサイズの構成
• 関連コンテンツ
  • トピック
  • サンプル

概要

地理高密度散布シリーズの概要

igMap コントロールの geographicHighDensityScatterSeries シリーズを使用すると、数百から数百万のデータ ポイントから構成される散布図データを最短でバインドして表示できます。相当数のデータ ポイントがあるため、シリーズではフルサイズのマーカーに対して散布データを小さな点として表示し、領域にはデータ ポイントの集合を表す高い色密度を使用した大半のデータを表示します。

以下のスクリーンショットは、igMap コントロールの geographicHighDensityScatterSeries シリーズのプレビューです。マップはオーストラリアの人口密度を表す数千のデータ ポイントにバインドされます。大量のデータ ポイントを含むマップのプロット領域は凝縮された赤色のピクセルによって表します。少量のデータ ポイントを含む領域は青色のピクセルによって表します。

データ バインディング

データ バインディングの概要

igMap コントロールの散布シリーズの他のタイプと同様に、geographicHighDensityScatterSeries には、データ バインディングのための itemsSource プロパティがあります。このプロパティは、iEnumerable インターフェイスを実装するオブジェクトにバインドできます。また、項目ソースの各項目は、地理経度および緯度を表す 2 つのデータ列があります。longitudeMemberPath および latitudeMemberPath プロパティを使用してこのデータ列をマップします。

データ バインディングの概要表

以下の表で、データ バインドに使用される geographicHighDensityScatterSeries シリーズのプロパティを簡単に説明します。

地理高密度散布シリーズ構成の概要

地理高密度散布シリーズ構成の概要表

以下の表は、igMap コントロールの地理高密度散布シリーズの構成可能な要素を示しています。

コード例の概要

コード例の概要表

以下の表は、このトピックで使用したコード例をまとめたものです。

コード例: JavaScript における地理高密度散布シリーズの構成

説明

このコード例は、igMap コントロールを構成して、地理高密度散布シリーズを JavaScript で表示する方法を示しています。この例では、経度と緯度、ヒートの最大色と最小色を指定する方法を示します。

コード

JavaScript の場合:

Code
$("#map").igMap({
    ...
    series: [{
        type: "geographicHighDensityScatter",
        name: "australiaMap",
        dataSource: placeData,
        latitudeMemberPath: "lat",
        longitudeMemberPath: "lon",
        heatMaximumColor: "orange",
        heatMinimumColor: "black"
    }],
    ...
});

コード例: ASP.NET MVC における地理高密度散布シリーズの構成

説明

このコード例は、igMap コントロールを構成して、地理高密度散布シリーズを ASP.NET MVC で表示する方法を示しています。この例では、経度と緯度、ヒートの最大色と最小色を指定する方法を示します。

コード

ASPX の場合:

Code
<%= Html.Infragistics().Map()
        ...
        .Series(series => {
            series.GeographicHighDensityScatter("seriesName")
                .DataSource(placeData)
                .LatitudeMemberPath("lat")
                .LongitudeMemberPath("lon")
                .HeatMaximumColor("orange")
                .HeatMinimumColor("black");
        })
        ...
        .DataBind()
        .Render()
%>

コード例: 熱色スケールの構成

説明

熱色スケールは、シリーズ内のカラー パターンを決定するオプションの機能です。以下の表は、カラー スケールを決定するために使用するプロパティをまとめたものです。

コード

以下のコードは、heatMinimumColor プロパティと heatMaximumColor プロパティを設定する方法を示します。

JavaScript の場合:

$("#map").igMap({
    ...
    series: [{
        type: "geographicHighDensityScatter",
        name: "australiaMap",
        dataSource: placeData,
        latitudeMemberPath: "lat",
        longitudeMemberPath: "lon",
        heatMaximumColor: "orange",
        heatMinimumColor: "black"
    }],
    ...
});

コード例: 解像度の構成

説明

geographicHighDensityScatterSeries シリーズの resolution プロパティは、シリーズが積極的に表示データを統合する程度を決定します。値が大きい場合、より積極的にデータが統合され、シリーズのパフォーマンスが向上します。より低い値を使用している場合、表示解像度が強化され、それに応じてパフォーマンスも下がります。

コード

以下のコードは、resolution プロパティを設定する方法を示します。

JavaScript の場合:

$("#map").igMap({
    ...
    series: [{
        type: "geographicHighDensityScatter",
        name: "australiaMap",
        dataSource: placeData,
        latitudeMemberPath: "lat",
        longitudeMemberPath: "lon",
        resolution: 10
    }],
    ...
});

コード例: プログレッシブ ロードの構成

説明

igMap コントロールは、igMap をロードする間、継続して UI の応答性を保つようデータを分割して読み込む geographichHighDensityScatterSeries シリーズを段階的に描画します。デフォルトで、progressiveLoad プロパティは true に設定されています。geographichHighDensityScatterSeries シリーズは、igMap のレンダリング中に、ローディング状態を表示できる以下の 2 通りの方法を提供します。

• ローディング状態を表示できる progressiveLoadStatusChanged イベントをリッスンします。
• progressiveStatus プロパティは、値が 0 から 100 まで (完全なロードは 100) のプログレッシブ ロード シリーズの状態を表します。このプロパティは、プログレスバーなどのローディング状態を示すコントロールにバインドします。

コード

以下のコードは、progressiveLoadStatusChanged イベントを呼び出す方法を示します。

JavaScript の場合:

$("#map").igMap({    ...
    series: [{
        type: "geographicHighDensityScatter",
        name: "australiaMap",
        dataSource: placeData,
        latitudeMemberPath: "lat",
        longitudeMemberPath: "lon",
        progressiveLoadStatusChanged: function (evt, ui) {                }
    }],
    ...
});

コード例: マウス オーバー ビヘイビアの構成

説明

geographicHighDensityScatterSeries シリーズの mouseOverEnabled プロパティは、mouseOver イベントの発生の有無を指定します。デフォルト値は false です。このシリーズのマウス オーバー サポートは、メモリとパフォーマンスに大きく影響する場合があります。この値を False に設定することの主なデメリットは、ツールチップを描画できないことです。

コード

以下のコードは、mouseOverEnabled プロパティを true に設定する方法を示します。

JavaScript の場合:

$("#map").igMap({
    ...
    series: [{
        type: "geographicHighDensityScatter",
        name: "australiaMap",
        dataSource: placeData,
        latitudeMemberPath: "lat",
        longitudeMemberPath: "lon",
        mouseOverEnabled: "true"
    }],
    ...
});

コード例: レンダリング モードの構成

説明

geographicHighDensityScatterSeries シリーズの useBruteForce プロパティにより、シリーズの描画方法が決まります。True の場合、内部データ構造を構築する代わりに、毎度すべてのデータ ポイントを描画します。初期ロード時間が早く、メモリ使用率が低いですが、データのナビゲーションは遅くなります。

コード

以下のコードは、useBruteForce プロパティを true に設定する方法を示します。

JavaScript の場合:

$("#map").igMap({
    ...
    series: [{
        type: "geographicHighDensityScatter",
        name: "australiaMap",
        dataSource: placeData,
        latitudeMemberPath: "lat",
        longitudeMemberPath: "lon",
        useBruteForce: "true"
    }],
    ...
});

コード例: 最小ポイントサイズの構成

説明

geographicHighDensityScatterSeries シリーズの pointExtent プロパティは、高密度の散布シリーズのポイント描画に使用する最小ポイントサイズを大きくします。ポイントサイズは、シリーズのパフォーマンスに直接影響があります。pointExtent プロパティの値が大きいとパフォーマンスが低下します。

コード

以下のコードは、pointExtent プロパティを 7 に設定する方法を示します。

JavaScript の場合:

$("#map").igMap({
    ...
    series: [{
        type: "geographicHighDensityScatter",
        name: "australiaMap",
        dataSource: placeData,
        latitudeMemberPath: "lat",
        longitudeMemberPath: "lon",
        pointExtent: 7 
    }],
    ...
});

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• マップ シリーズの構成 (igMap): このトピックは、igMap コントロールでサポートされているすべてのマップ視覚エフェクトを構成し、さまざまな背景コンテンツ (マップ プロバイダー) を使用する方法を説明するトピックのリンクがあるランディング ページです。

• 機能の構成 (igMap): このトピックは、igMap コントロールのさまざまな機能を構成する方法を説明するトピックのリンクがあるランディング ページです。

• データ バインディング (igMap): このトピックは、視覚化されたマップ シリーズに応じて igMap コントロールをさまざまなデータ ソースにバインドする方法を説明します。

• マップのスタイル設定 (igMap): このトピックは、ビジュアル スタイル設定に関連して igMap コントロールを構成する方法を説明しています。

サンプル

このトピックについては、以下のサンプルも参照してください。

• 地理高密度散布シリーズ: このサンプルは、igMap コントロールの高密度散布シリーズが何百万ものデータ ポイントを表示する方法を紹介します。大量のデータ ポイントを含むマップのプロット領域は凝縮されたオレンジ色のピクセルで表示され、少量のデータ ポイントを含む領域は黒色のピクセルで表示されます。シリーズのヒートの最小値と最大値プロパティを変更し、ヒート カラーのマッピングを調整できます。