このトピックでは、igMap
™ コントロールを使用して地理図形シリーズを構成する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igMap の概要: このトピックは、igMap
コントロールについて、その主要機能、最小要件、ユーザー インタラクションといった事項の概念的情報を提供します。
igMap の追加: このトピックは、基本的な機能を備えた簡易 igMap
コントロールを Web ページに追加する方法を示すチュートリアルです。
このトピックは、以下のセクションで構成されます。
igMap
コントロールの地理図形シリーズを実際に適用するには、シェープ ファイル、またはアプリケーションが提供するカスタム図形データ ソースで指定された地理領域の図形 (またはクローズド パス) を描画します。シェープ ファイルは、各図形に関連する情報が含まれた対応するデータベースの DBF ファイルと常にペアになっています。カスタム図形データ ソースは、プロパティの形で、または内部構造の一部としてのデータ オブジェクトの形で、各図形に関連する情報を提供します。
地理図形シリーズは、ワールド マップ上で目的のエリアを強調表示する場合に役立ちます。これは、国または行政区域を示すマップ、市場地域、またはその他の地理領域を描画する場合に適しています。
igMap
コントロールを構成して、図形と合わせてマーカーを描画し、またカスタム マーカーを作成することができます。詳細は、ビジュアル機能の構成 (igMap) のトピックを参照してください。
CSS スタイルまたはシリーズ オブジェクトのオプションを使用して、図形やマーカーのアウトラインや色を制御できます。詳細については、トピックマップのスタイル設定 (igMap) を参照してください。
注: モバイル デバイスを対象にする場合には、小さい図形データ セットを使用することをお勧めします。地理空間データをレンダリングするにはより多くのコンピューティング リソースが必要になり、ほとんどのモバイル デバイスの場合、デスクトップ PC やノート PC と比較してパフォーマンスが低くなります。
以下の表は、igMap
コントロールの地理図形シリーズの構成可能な要素を示しています。
構成可能な項目 | 詳細 | プロパティ |
---|---|---|
地理図形シリーズの設定 | これらの必須設定では、地理図形にマップ シリーズのタイプを構成し、シリーズの名前を設定します。 |
JavaScript の場合:
値: series.type: “geographicShape”, series.type: "seriesName" ASP.NET MVC の場合: 値: series.GeographicShape(“seriesName”) |
地理図形シリーズのデータ バインディング オプション | これらの必須設定では、図形とデータベース ファイルの URL、またはカスタム図形データ ソースを構成します。 | JavaScript の場合: ASP.NET MVC の場合: |
ツールチップの表示/非表示 | ツールチップのレンダリングを有効に設定します。 デフォルトでは、ツールチップは無効になっています。 | JavaScript の場合: ASP.NET MVC の場合: |
ツールチップ テンプレート | ツールチップのレンダリングに使用するテンプレートを指定するように構成します。 | JavaScript の場合: ASP.NET MVC の場合: |
図形のアウトライン | 図形のアウトラインの色を構成します。 図形のアウトラインのデフォルトの色は黒です。 | JavaScript の場合: ASP.NET MVC の場合: |
図形のアウトラインの太さ | 図形のアウトラインの太さを構成します。 デフォルトの太さは 0 です。 | JavaScript の場合: ASP.NET MVC の場合: |
図形の塗りつぶし | 図形の塗りつぶし色を構成します。 図形のデフォルトの塗りつぶし色は黒です。 | JavaScript の場合: ASP.NET MVC の場合: |
マーカー タイプ | コントロールを構成して、レンダリングのためのマーカー選択を指定します。 デフォルトでは、コントロールによって、レンダリングするタイプとマーカーが選択されます。 | JavaScript の場合: ASP.NET MVC の場合: |
カスタム マーカー テンプレート | マップに使用する キャンバス 要素にコンテンツを直接レンダリングするコールバック関数で、オブジェクトを構成します。 | JavaScript の場合: ASP.NET MVC の場合: |
マーカー アウトライン | マーカーの色付きアウトラインを構成します。 デフォルトでは、アウトラインの色は黒です。 | JavaScript の場合: ASP.NET MVC の場合: |
マーカーの塗りつぶし | マーカーの塗りつぶしの色を構成します。 デフォルトでは、塗りつぶしの色は黒です。 | JavaScript の場合: ASP.NET MVC の場合: |
以下の表は、このトピックで使用したコード例をまとめたものです。
例 | 説明 |
---|---|
JavaScript における地理図形シリーズの構成 | このコード例は、igMap コントロールを構成して、地理図形シリーズを JavaScript で表示する方法を示しています。 |
ASP.NET MVC における地理図形シリーズの構成 | このコード例は、igMap コントロールを構成して、地理図形シリーズを ASP.NET MVC で表示する方法を示しています。 |
カスタム図形データ ソースの構成 | このコード例は、igMap コントロールを構成して、カスタム図形データ ソースを使用して地理図形シリーズを表示する方法を示しています。 |
このコード例は、igMap
コントロールを構成して、地理図形シリーズを JavaScript で表示する方法を示しています。この例は、図形とデータベース ファイルの URL を指定する方法を示しています。図形のアウトラインと色の塗りつぶし範囲、自動マーカー選択、マーカーのアウトラインと塗りつぶし色を構成します。
JavaScript の場合:
Code
$("#map").igMap({
...
series: [{
type: "geographicShape",
name: "seriesName",
markerType: "automatic",
shapeMemberPath: "points",
shapeDataSource: '/Data/geoshapes.shp',
databaseSource: '/Data/geoshapes.dbf',
brush: "rgba(68,138,223,.6)",
outline: "blue",
markerBrush: "rgba(50,100,100,0.7)",
markerOutline: "blue"
}],
...
});
このコード例は、igMap
コントロールを構成して、地理図形シリーズを ASP.NET MVC で表示する方法を示しています。この例は、図形とデータベース ファイルの URL を指定する方法を示しています。図形のアウトライン、色の塗りつぶし領域、自動マーカー選択、マーカーのアウトラインと塗りつぶし色を構成します。
ASPX の場合:
Code
<%= Html.Infragistics().Map()
...
.Series(series => {
series.GeographicShape("seriesName")
.ShapeDataSource(Url.Content("~/Data/geoshapes.shp"))
.DatabaseSource(Url.Content("~/Data/geoshapes.dbf"))
.ShapeMemberPath("points")
.MarkerType(MarkerType.Automatic)
.Brush("rgba(68,138,223,.6)")
.Outline("blue");
.MarkerBrush("rgba(50,100,100,0.7)")
.MarkerOutline("blue");
})
...
.DataBind()
.Render()
%>
このコード例は、igMap
コントロールを構成して、カスタム図形データ ソースを使用して地理図形シリーズを表示する方法を示しています。図形ソースには、個々の図形とそのデータ属性の場所に関する地理空間データが含まれています。
以下のコード スニペットは、2 つの図形に関する情報が含まれている JavaScript 配列を定義しています。各図形には、図形の配列を保存する points というメンバーが含まれています。各図形は、地理ポイントの配列です。配列内の 2 つのオブジェクトには、data というデータ メンバーが含まれており、図形関連のデータを持つ任意の数のフィールドを保持できます。これらのデータ オブジェクトは、コントロールによって対応する図形にバインドされ、ツールチップ テンプレートとイベント受け渡し関数で使用可能になります。
JavaScript の場合:
var data = [
{
data: {
attribute1: "String value 1",
attribute2: 3.1415,
attribute3: "12/21/2012"
},
points: [
[
{ x: 0, y: 0 },
{ x: 30, y: 0 },
{ x: 30, y: 30 },
{ x: 0, y: 30 }
],
[
{ x: 5, y: 5 },
{ x: 35, y: 5 },
{ x: 35, y: 35 }
]
]
},
{
data: {
attribute1: "String value 2",
attribute2: 2.71828,
attribute3: "03/14/2001"
},
points: [
[
{ x: 40, y: 0 },
{ x: 70, y: 0 },
{ x: 70, y: 30 },
{ x: 40, y: 30 }
]
]
}
];
以下のコード スニペットは、上記で指定したカスタム データ ソースを使用して地理図形シリーズを構成しています。このコードでは、shapeMemberPath
オプションを図形オブジェクトの points データ メンバーの名前に明示的に設定しています。この方法で、メンバー名が異なる任意のオブジェクトに図形データを保存できます。
JavaScript の場合:
$("#map").igMap({
...
series: [{
type: 'geographicShape',
name: 'customShapeSource',
dataSource: data,
shapeMemberPath: "points",
outline: "black",
markerType: 'automatic',
shapeStyle: {
fill: "lightblue",
stroke: "black",
thickness: 8.0
}
}],
...
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
マップ シリーズの構成 (igMap): このトピックは、igMap
コントロールでサポートされているすべてのマップ視覚エフェクトを構成し、さまざまな背景コンテンツ (マップ プロバイダー) を使用する方法を説明するトピックのリンクがあるランディング ページです。
機能の構成 (igMap): このトピックは、igMap
コントロールのさまざまな機能を構成する方法を説明するトピックのリンクがあるランディング ページです。
データ バインディング (igMap): このトピックは、視覚化されたマップ シリーズに応じて igMap
コントロールをさまざまなデータ ソースにバインドする方法を説明します。
マップのスタイル設定 (igMap): このトピックは、ビジュアル スタイル設定に関連して igMap
コントロールを構成する方法を説明しています。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub