このトピックでは、igMap
™ コントロールを使用して地理ポリライン シリーズを構成する方法について説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igMap の概要: このトピックは、igMap
コントロールについて、その主要機能、最小要件、ユーザー インタラクションといった事項の概念的情報を提供します。
igMap の追加: このトピックでは、基本的な機能を備えた簡易マップを Web ページに追加する方法を示します。
このトピックは、以下のセクションで構成されます。
igMap
コントロールの地理ポリライン シリーズは、個々のアプリケーションの提供するシェイプ ファイルで指定された地理領域にポリラインを描画するためのものです。ポリラインは、シェイプ (SHP) ファイルで座標によって記述される道路や河川のようなオープン パスです。
各シェイプ ファイルとそれぞれに対応するデータベース DBF は常にペアで提供され、対応するデータベース DBF ファイルには各シェイプに関する情報が収められています。地理ポリライン シリーズは、マップ上で重要なパスを強調表示するのに便利です。これは、サプライ ルートや主要道路を示すという処理や、GPS データを使用して追跡車両の移動経路を描くといった処理に適しています。
ポリラインの色は、シリーズ オブジェクトの CSS スタイルやオプションを使用して管理できます。詳細については、トピックigMap のスタイル設定 を参照してください。
注: モバイル デバイスを対象にする場合には、小さい図形データ セットを使用することをお勧めします。地理空間データをレンダリングするにはより多くのコンピューティング リソースが必要になり、ほとんどのモバイル デバイスの場合、デスクトップ PC やノート PC と比較してパフォーマンスが低くなります。
次の表は、地理ポリライン シリーズの表示に使用できる igMap
コントロールについて構成可能な項目をまとめたものです。
構成可能な項目 | 詳細 | プロパティ |
---|---|---|
シリーズ タイプの設定 | 当該の必須設定値は、地理ポリラインのマップ シリーズのタイプを構成し、シリーズ名を設定します。 |
JavaScript の場合:
値:
series.type: “geographicPolyline” series.type: “seriesName” ASP.NET MVC の場合: 値: series.GeographicPolyline(“seriesName”) |
データ バインドのオプション | 当該の必須設定値は、シェイプ ファイル、データベース ファイル、またはカスタム データ ソースに収められる URL を構成します。 | JavaScript の場合: ASP.NET MVC の場合: |
ポリラインの色 | この項目はポリラインの色を構成します。輪郭線の既定色は白になっています。 | JavaScript の場合: ASP.NET MVC の場合: |
ポリラインの太さ | この項目はポリラインの太さを構成します。太さの既定値は 0 になっています。 | JavaScript の場合: ASP.NET MVC の場合: |
以下の表は、このトピックで使用したコード例をまとめたものです。
例 | 説明 |
---|---|
JavaScript での地理ポリライン シリーズの構成 | このコード例では、地理ポリライン シリーズを表示する igMap コントロールを JavaScript で構成する方法を示します。 |
ASP.NET MVC での地理ポリライン シリーズの構成 | このコード例では、地理ポリライン シリーズを表示する igMap コントロールを ASP.NET MVC で構成する方法を示します。 |
カスタム図形データ ソースの構成 | このコード例では、地理ポリライン シリーズを表示する igMap コントロールをカスタム シェイプ データ ソースで構成する方法を示します。 |
このコード例では、地理ポリライン シリーズを表示する igMap
コントロールを JavaScript で構成する方法を示します。この例では、シェイプ ファイルおよびデータベース ファイルの URL と、ポリラインの色を指定する方法を示します。
JavaScript の場合:
Code
$("#map").igMap({
...
series: [{
type: "geographicPolyline",
name: "seriesName",
shapeDataSource: "/Data/America/geopolylines.shp",
databaseSource: "/Data/geopolylines.dbf",
outline: "grey"
}],
...
}
});
このコード例では、地理ポリライン シリーズを表示する igMap
コントロールを ASP.NET MVC で構成する方法を示します。この例では、シェイプ ファイルとデータベース ファイルの URL を指定する方法を示します。また、シェイプの輪郭線と塗りつぶしの色、自動マーカー選択、およびマーカーの輪郭線と塗りつぶしの色も構成します。
ASPX の場合:
Code
<%= Html.Infragistics().Map()
.ID("map")
...
.Series(series => {
series.GeographicPolyline("seriesName")
.ShapeDataSource(Url.Content("~/Data/geopolylines.shp"))
.DatabaseSource(Url.Content("~/Data/geopolylines.dbf"))
.Outline("grey");
})
...
.DataBind()
.Render()
%>
このコード例では、地理ポリライン シリーズを表示する igMap
コントロールをカスタム シェイプ データ ソースで構成する方法を示します。この例は、コントロールによって処理されるデータ オブジェクトの一般的な構造を示しています。また、igMap
コントロールでの series オブジェクトの構成方法を示すものでもあります。
次のコード スニペットは、2 つのシェイプに関する情報が含まれる JavaScript 配列を定義しています。それぞれのシェイプはポイントと呼ばれるメンバーから構成され、各メンバーにはパスの配列が収められます。それぞれのパスは地理ポイントの配列であるため、1 つのポリラインに複数のパスが含まれる場合もあります。
JavaScript の場合:
var data = [
{
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 },
{ x: 5, y: 35 }
]
]
},
{
points: [
[
{ x: 40, y: 0 },
{ x: 70, y: 0 },
{ x: 70, y: 30 },
{ x: 40, y: 30 }
]
]
}
];
次のコード スニペットは、前の例で指定したカスタム データ ソースを使用して地理ポリライン シリーズを構成します。このコードでは、shapeMemberPath
オプションを図形オブジェクトの points データ メンバーの名前に明示的に設定しています。これにより、プロパティ名の異なる任意のオブジェクトにシェイプ データを格納できるようになります。
JavaScript の場合:
$("#map").igMap({
...
series: [{
type: 'geographicPolyline',
name: 'customShapeSource',
dataSource: data,
shapeMemberPath: "points",
outline: "black"
}],
...
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
マップ シリーズの構成 (igMap): このトピックは、igMap
コントロールでサポートされているすべてのマップ視覚エフェクトを構成し、さまざまな背景コンテンツ (マップ プロバイダー) を使用する方法を説明するトピックのリンクがあるランディング ページです。
機能の構成 (igMap): このグループのトピックでは、igMap
コントロールのさまざまな機能を構成する方法を説明します。対応する機能としては、特定の地理領域へのナビゲーション、Overview Plus Detail パネルの有効または無効化、表示中の領域をマップ上で取得、パンとズームに関するユーザー インタラクションの構成、ツールチップ テンプレートの構成、カスタム マーカーの設定などがあります。
データ バインディング (igMap): このトピックは、視覚化されたマップ シリーズに応じて igMap
コントロールをさまざまなデータ ソースにバインドする方法を説明します。
マップのスタイル設定 (igMap): このトピックでは、テーマを使用して igMap
コントロールのルック アンド フィールをカスタマイズする方法を説明します。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub