maps for asp.net web forms - grapecity...maps for asp.net web forms 2018.04.12 更新...

Maps for ASP.NET Web Forms2018.04.12 更新

グレープシティ株式会社グレープシティ株式会社

目次

製品の概要 2

ComponentOne for ASP.NET Web Forms のヘルプ 2-3

クイックスタート：コントロールの追加と設定 4-5

デザイン時のサポート 6-11

法的要件と認証方法 12

主な機能 13

ベクターレイヤ 13-14

ラベルの追加 14-16

地理座標を折れ線で結ぶ 16-19

地理座標を多角形で結ぶ 19-22

GeoJsonファイルでマップに形状を表示する 22-24

仮想レイヤ 24-25

仮想レイヤの追加 25-31

項目レイヤ 31

項目レイヤの追加 31-32

マップのソース 32-35

マップのソースを変更する 35-36

カスタムソースを追加する 36-38

ユーザーシナリオ 39

行政界を描画する 39-62

Maps for ASP.NET Web Forms

1 Copyright © GrapeCity, Inc. All rights reserved.

製品の概要製品の概要

Maps for ASP.NET Web Formsは、スムーズなズームとパン、および画面と地理座標の間のマッピングにより、画像表示の

レベルを大幅に向上させます。 C1Mapsを使用すると、Bing MapsTM、Google MapsTMなどのさまざまなソースから取得した

豊富な地理情報を表示できます。

Microsoft Deep Zoomテクノロジー上に構築されたC1Mapsを使用して、エンドユーザーは、高解像度の画像とスムーズな

ジャンプによる究極のクローズアップ操作を楽しむことができます。また、マップに独自のカスタム要素を重ねるためのレイヤ

もサポートされます。

主要な機能主要な機能

ジオメトリの描画ジオメトリの描画：C1Mapsのベクターレイヤを使用すると、地理座標を持つジオメトリ、形状、多角形、パスをマップ上

に描画することができます。ベクターレイヤは、次を項目の描画に役立ちます。

行政界（国境、県境など）

地理情報（路線図、航路図の表示など）

コロプレスマップ（国別の人口などの統計データを示すマップ）

Microsoft Virtual Earthの通常のソースの代わりにベクターレイヤを使用して、世界地図を表示できます。

豊富な地理情報：豊富な地理情報：Bing Mapやカスタムソースなどのさまざまなソースから、豊富な地理情報を表示できます。たとえ

ば、Yahoo! Maps用の独自のソースを構築できます。

マップに多数の要素を表示可能：マップに多数の要素を表示可能： Maps for ASP.NET Web Formsでは、ローカルデータやサーバーデータを仮想化す

ることができます。仮想レイヤマップを使用することにより、現在表示可能な要素のみを表示したり要求することができ

ます。

ズーム、パン、座標マッピング：ズーム、パン、座標マッピング： Maps for ASP.NET Web Formsでは、マウスまたはキーボードを使用してズームやパ

ンを行うことができます。また、画面と地理座標の間のマッピングもサポートされています。

レイヤのサポート：レイヤのサポート：レイヤを使用して、カスタム要素をマップに追加できます。要素は地理的な位置にリンクされます。

詳細については、「ベクターレイヤ」および「仮想レイヤ」を参照してください。



ComponentOne for ASP.NET Web Forms のヘルプのヘルプ

ComponentOne for ASP.NET Web Formsの各コントロールで共通したトピック、アセンブリの追加、テーマの適用、クライ

アント側情報などについては「ASP.NET Web Forms ユーザーガイド」を参照してください。



http://docs.grapecity.com/help/c1/aspnet/aspnet_gettingstarted/

クイックスタート：コントロールの追加と設定クイックスタート：コントロールの追加と設定

手順１手順１/１：アプリケーションの作成１：アプリケーションの作成

ASP.Netアプリケーションを作成し、WebフォームにMapコントロールを追加するには、次の手順を実行します。

1. Visual Studioで、新しいASP.Net Webアプリケーションアプリケーションを作成し、新しいWebフォームフォームを追加します。

2. ツールボックスでC1Mapsコントロールを見つけ、それをWebフォームに配置します。

ツールボックスにこのコントロールが見つからない場合は、右クリックし、［アイテムの選択］［アイテムの選択］を選択します。［ツールボッ［ツールボッ

クスアイテムの選択］クスアイテムの選択］ダイアログボックスが表示されます。コントロールを見つけたら、［［OK］］をクリックします。

手順２手順２/２：コントロールの構成２：コントロールの構成

コントロールを構成するには、次の手順を実行します。

デザイナの場合デザイナの場合

1. コントロールを右クリックし、コンテキストメニューから［プロパティ］［プロパティ］を選択してプロパティウィンドウを開きます。

2. Heightを500pxに設定し、Widthを600pxに設定します。

3. スマートタグをクリックして［［C1Mapsのタスク］メニューのタスク］メニューを開きます。

4. Centerを-80.0852, 42.1296に設定し、Zoomを10に設定します。

5. SourceをBingMapsRoadSourceに設定します。

6. プロジェクトを実行します。

ソースビューの場合ソースビューの場合

<c1:C1Maps>タグ内のHeight、Width、 Center、Zoom、およびSourceプロパティを次のように設定します。

ソースビュー

<c1:C1Maps ID="C1Maps1" runat="server" Center="-80.0852, 42.1296" Height="500px"Source="BingMapsRoadSource" Width="600px" Zoom="10"></c1:C1Maps>

コードの場合コードの場合

1. 次のコードを Page_Load イベントに追加します。

C#

C1Maps1.Height = 500;C1Maps1.Width = 600;C1Maps1.Center=new PointD(-80.0852d,42.1296d );C1Maps1.Zoom = 10;C1Maps1.Source = MapSource.BingMapsRoadSource;

VB

C1Maps1.Height = 500C1Maps1.Width = 600C1Maps1.Center = New PointD(-80.0852D, 42.1296D)C1Maps1.Zoom = 10

copyCode

copyCode

copyCode



C1Maps1.Source = MapSource.BingMapsRoadSource


ここまでの成果ここまでの成果

次の図は、C1MapsコントロールのBing Maps道路ソースにPennsylvania州のErie周辺を表示したところです。

先頭に戻る先頭に戻る



C1Maps デザイナデザイナ

C1Maps タスクタスク

C1Layer コレクションコレクションエエディターディター

C1VectorItemBase コレコレ

クションクションエディターエディター

PointD コレクションコレクションエディエディ

ターター

MapSlice コレクションコレクションエエディターディター

Feature コレクションコレクションエエディターディター

デザイン時のサポートデザイン時のサポート

C1Mapsでカスタムコンテキストメニュー、スマートタグ、およびデザイナはリッチなデ

ザイン時サポートを提供します。

次の設計時オプションを使用し、C1Mapsコントロールの機能を簡単に使用できます。

C1Maps タスクタスク

中央の位置中央の位置: マップの中央位置の座標を設定できます。

ズーム率ズーム率: マップのズーム率の値を設定できます。

ツールの表示ツールの表示:　[ツールの表示]チェックボックスをオン・オフにして、ズームとパンツールを無効・有効に設定できます。

ソースソース: [ソース]ドロップダウンをクリックして、マップのソースを設定できます。

テーマテーマ:［テーマ］ドロップダウンをクリックして提供されている複数の視覚的スキームから選択できます。

新しいテーマの作成新しいテーマの作成: ［新しいテーマの作成］オプションをクリックすると、ThemeRoller for Visual Studio が開きます。したがっ

て、開発環境内でテーマをカスタマイズすることができます。アプリケーションで ThemeRoller for Visual Studio を使用する方

法については、「ThemeRoller for Visual Studio」を参照してください。

CDN の使用の使用:［CDN の使用］チェックボックスを ON にすると、CDN からクライアントリソースがロードされます。これはデフォ

ルトで OFF です。

CDN パスパス: CDN の URL パスを表示します。

Bootstrap の使用の使用:［Bootstrap の使用］オプションを選択すると、コントロールに Bootstrap テーマを適用することができま

す。アプリケーションで Bootstrap テーマを使用する方法については、「Bootstrap for ASP.NET Web Forms クイックスタート」

を参照してください。

バージョン情報バージョン情報:［バージョン情報］をクリックすると、製品のバージョン情報を確認できるダイアログボックスが表示されます。

C1Layer コレクションコレクションエディターエディター

C1Layer コレクションコレクションエディターエディターを使用し、マップに新しいレイヤーを追加できるか既存のレイヤーを編集できます。



http://docs.grapecity.com/help/c1/aspnet/aspnet_gettingstarted/ThemeRoller for Visual Studio.html

http://docs.grapecity.com/help/c1/aspnet/aspnet_gettingstarted/Bootstrap for ASP.NET Wijmo Quick Start.html

C1VectorItemBase コレクションコレクションエディターエディター

C1VectorItemBase コレクションコレクションエディターエディターを使用し、C1VectorLayerに新しいベクタレイヤーを追加できるか、既存のベクタ

レイヤーを編集できます。



PointD コレクションコレクションエディターエディター

PointD コレクションコレクションエディターエディターを使用し、C1VectorPolylineまたはC1VectorPolygonでポイントを追加できます。座標値は倍

精度浮動小数点で設定されます。



MapSlice コレクションコレクションエディターエディター

MapSlice コレクションコレクションエディターエディターを使用し、C1VirtualLayerに新しいマップのスライスを追加できるか、既存のベクターを編集

できます。



Feature コレクションコレクションエディターエディター

Feature コレクションコレクションエディターエディターを使用し、C1VirtualLayerのDataGeojson.Featureプロパティに新しい機能を追加できるか、既

存の機能を編集できます。



法的要件と認証方法法的要件と認証方法

C1Mapsでは、Bing Maps から取得した地理情報を使用できます。このサービスを使用する前に、サービスのライセンス要件

を確認する必要があります。ライセンス条項は次のサイトで確認できます。

http://www.microsoft.com/maps/product/terms.html

Bing Mapsの認証方法の認証方法

C1Mapsが提供するマップサーフェス（VirtualEarthRoadSurface、VirtualEarthAerialSurface、VirtualEarthHybridSurface）は、Bing Maps APIを使用します。これらのオンラインタイルソースを商用利用する場合は有料です。Bing Mapsの使用方法

の詳細については、以下のMicrosoftドキュメントを参照してください。

http://msdn.microsoft.com/ja-jp/library/dd877180.aspx

C1Mapsを使用するBing Mapsアプリケーションの認証には、コードにBing Maps Keyを使用する方法をお勧めします。BingMaps Keyには有効期限がなく、キーの取得にサービス要求は必要ありません。そのため、Bing Maps KeyとC1Mapsコント

ロールを使用するアプリケーションの認証は極めて簡単です。

Bing Maps Keyの取得の取得

C1Mapsコントロールがサポートする組み込みのタイルソースを使用する場合は、まず、Bing Maps Keyを取得する必

要があります。Bing Maps Account Centerにアクセスし、アカウントを作成してからキーを取得します。

http://www.bingmapsportal.com/

キーの取得の詳細については、以下のMicrosoftドキュメントを参照してください。

http://msdn.microsoft.com/ja-jp/library/ff428642.aspx

C1Mapsの使用の認証の使用の認証

キーを取得したら、ソースビューで<c1:C1Maps>タグ内にキーを渡すことで、提供されているどのBing Mapsタイル

ソース（VirtualEarthRoadSurface、VirtualEarthAerialSurface、VirtualEarthHybridSurface）の使用も認証できます。次

に例を示します。

C#

<c1:C1Maps ID="C1Maps1" runat="server" ShowTools="True" Source="BingMapsRoadSource"Zoom="2" BingMapsKey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></c1:C1Maps>



http://www.microsoft.com/maps/product/terms.html

http://msdn.microsoft.com/ja-jp/library/dd877180.aspx

http://www.bingmapsportal.com/

http://msdn.microsoft.com/ja-jp/library/ff428642.aspx

主な機能主な機能

このトピックでは、C1Mapsの基本的な概念について説明します。

マップソースマップソース

C1Mapsは、さまざまなソースから取得した地理情報を表示できます。デフォルトでは、C1MapsはソースとしてMicrosoftLiveMaps航空写真を使用します。ソースは、Sourceプロパティを使用して変更できます。

次のソースがあります。

Bing Maps航空写真ソース航空写真ソース

Bing Maps道路ソース道路ソース

Bing Maps混合ソース混合ソース

マップの表示範囲マップの表示範囲

マップとして現在表示されている部分は、CenterプロパティとZoomプロパティ、およびコントロールのサイズによって決定され

ます。

CenterプロパティはPointD型ですが、実際は地理座標を表し、Xプロパティが経度、Yプロパティが緯度です。

Zoomプロパティは、マップの現在の解像度を指定します。ズーム値０でマップは完全にズームアウトし、値が１増えるたびに

マップの解像度が倍になります。

座標系座標系

地理地理座標は、緯度と経度を使用して地球上の各地点を示します。この座標系はデカルト座標ではありません。つまり、パンし

てもマップのスケールは変わりません。

情報レイヤ情報レイヤ

C1Mapsは、マップタイルが表示される１つの背景レイヤで構成されます。背景レイヤは、C1Mapsによって自動的に管理され

ます。マップには情報レイヤを追加できます。 C1Mapsには、３つの追加レイヤが含まれます。

C1VectorLayerには、直線や多角形などのベクターデータが表示されます。これらの図形の頂点は、地理座標に配置

されています。また、GeoJSONデータ形式で形状を直接追加することもできます。

C1ItemsLayerは、任意の項目をマップ上に地理的に配置して表示するために使用されるレイヤです。

C1VirtualLayerは、仮想化された項目を表示します。これは、それらの項目が属するマップ領域が表示されている場

合にのみ項目がロードされるということです。

ベクターレイヤベクターレイヤ

ベクターレイヤを使用して、マップ上の地理座標でさまざまなオブジェクトを配置できます。

次は、ベクターレイヤに追加できる主要なベクター要素です。

C1VectorPolyline - このオブジェクトは、必ずしも閉じた形状にする必要がないこと以外は、Polygonクラスと同じで

す。地理座標を使用して折れ線が形成されます。用途の例として、道路や経路があります。詳細については、「折れ線

の追加」を参照してください。

C1VectorPolygon - Polylineクラスに似ていますが、こちらは多角形を描画します。多角形は、線分をつないでできた

閉じた形状です。この多角形は地理座標を使用して形成されます。用途の例として、国境や地域区分があります。詳

細については、「多角形の追加」を参照してください。

C1VectorPlacemark - 地理的位置に関連付けられたオブジェクトです。プレースマークは、ピクセル座標で座標が表

現される、スケールに依存しないジオメトリと、オプションのラベル（任意のUIElement）を持ちます。用途の例として、

マップ上のラベル、アイコン、マークがあります。詳細については、「ラベルの追加」を参照してください。



要素の表示要素の表示/非表示非表示

現在のマップスケールに応じて要素の表示/非表示を制御するためのプロパティがいくつかあります。たとえば、ズームインし

たときには詳細な内容を表示し、ズームアウトしたときには詳細を隠すことができます。

MinSize：C1VectorLayer.MinSizeプロパティは、要素が表示されるようになる最小比例画面サイズを指定します。

LabelVisibilty：これは、C1VectorPlacemarkラベルの表示/非表示を制御する特別なプロパティです。C1VectorLayerのLabelVisibiltyには、次の値を指定できます。

Hide - ラベルは不可視になりますが、ツールチップとして表示されます。

AutoHide - 重なったラベルは非表示になります。

Visible - すべてのラベルが表示されます。

LOD（Level of Details）：各ベクター要素にはLODプロパティに保存される独自の表示/非表示設定があり、これがグ

ローバル値より優先します。LOD構造体には次のプロパティが含まれます。

MinSize、、MaxSize - 要素の比例画面サイズの表示範囲を指定します。サイズがこの範囲に収まらない場合、

要素は非表示になります。

MinZoom、、MaxZoom - 要素を表示するマップスケール（C1.Zoomプロパティ）の範囲を指定します。

ラベルの追加ラベルの追加

このトピックでは、C1VectorLayerおよびC1VectorPlacemarkを使用して、地理座標（米国Pennsylvania州Erie）にラベルを

追加します（詳細については、「ベクターレイヤ」を参照してください）。


1. コントロールを右クリックし、コンテキストメニューから［プロパティ］を選択してプロパティウィンドウを開きます。

2. Layersプロパティの横にある省略符ボタン(...)をクリックして、C1Layersコレクションエディタコレクションエディタを開きます。

3. ［追加］［追加］ボタンのドロップダウン矢印をクリックし、C1VectorLayerを選択します。C1LayersコレクションにC1VectorLayerが追加され、C1Layersコレクションエディタの右側にそのプロパティが表示されます。

4. Placemarkプロパティグループを展開し、LabelVisibilityをVisibleに設定して、C1VectorPlacemarkのラベルを表示し

ます。

5. Dataプロパティグループを展開し、DataTypeをWijJsonに設定します。

6. Vectorsプロパティの横にある省略符ボタン(...)をクリックして、C1VectorItemBaseコレクションエディタコレクションエディタを開きます。

7. ［追加］［追加］ボタンのドロップダウン矢印をクリックし、C1VectorPlacemarkを選択します。C1VectorItemBaseコレクションに

C1VectorPlacemarkが追加され、C1VectorItemBaseコレクションエディタの右側にそのプロパティが表示されます。

8. LabelをErie, PAに設定し、Pointを-80.0852, 42.1296に設定します。

9. ［［OK］］をクリックして、C1VectorItemBaseコレクションエディタを閉じます。

10. ［［OK］］をクリックして、C1Layersコレクションエディタを閉じます。

11. ［［F5］］キーを押してプロジェクトを実行します。

マップのスケールに応じて要素の表示/非表示を操作する方法については、トピック「ベクターレイヤ」の「要素の表示/非表示」

セクションを参照してください。


次のマークアップを<c1:C1Maps> </c1:C1Maps>タグの間に追加して、マップコントロールにラベルを追加します。

ソースビュー

<Layers> <c1:C1VectorLayer> <DataWijJson> <vectors> <c1:C1VectorPlacemark Label="Erie, PA" Point="-80.0852, 42.1296" >

copyCode



</c1:C1VectorPlacemark> </vectors> </DataWijJson> <Placemark LabelVisibility="Visible" /> </c1:C1VectorLayer></Layers>


1. 次のコードを Page_Load イベントに追加して、マップコントロールにラベルを追加します。

C#

// レイヤを作成してマップに追加します。

C1VectorLayer vl = new C1VectorLayer();C1Maps1.Layers.Add(vl);

// 使用するデータソースの種類を設定します。

vl.DataType = DataType.WijJson;

// ラベルを表示するかどうかを設定します

vl.Placemark.LabelVisibility = LabelVisibility.Visible;

//ベクタープレースマークを作成してレイヤに追加します。

C1VectorPlacemark vp1 = new C1VectorPlacemark();vl.DataWijJson.Vectors.Add(vp1);

// プレースマークを地理座標に設定します。

vp1.Point = new PointD(-80.107008, 42.16389);

// プレースマークのラベルとプロパティを設定します。

vp1.Label = "Erie, PA";

VB

' レイヤを作成してマップに追加します。

Dim vl As New C1VectorLayer()C1Maps1.Layers.Add(vl)

' 使用するデータソースの種類を設定します。

vl.DataType = DataType.WijJson

'ラベルを表示するかどうかを設定します。

vl.Placemark.LabelVisibility = LabelVisibility.Visible

'ベクタープレースマークを作成してレイヤに追加します。

Dim vp1 As New C1VectorPlacemark()vl.DataWijJson.Vectors.Add(vp1)

' プレースマークを地理座標に設定します。

vp1.Point = New PointD(-80.107008, 42.16389)

' プレースマークのラベルとプロパティを設定します。

vp1.Label = "Erie, PA"

copyCode

copyCode





次の図は、C1Mapsコントロールに米国Pennsylvania州Erieのラベルが付いた地理座標を示したところです。

ラベルを見やすくするため、フォームのテーマはmetro-darkに設定されています。

地理座標を折れ線で結ぶ地理座標を折れ線で結ぶ

地理座標を折れ線で結ぶには、C1VectorLayer（詳細については、「ベクターレイヤ」を参照してください）にC1VectorPolylineを追

加します。このトピックでは、３つの点から成る折れ線を作成します。




3. ［追加］［追加］ボタンのドロップダウン矢印をクリックし、C1VectorLayerを選択します。C1LayersコレクションにC1VectorLayerが追

加され、C1Layersコレクションエディタの右側にそのプロパティが表示されます。



6. ［追加］［追加］ボタンのドロップダウン矢印をクリックし、C1VectorPolylineを選択します。C1VectorItemBaseコレクションに

C1VectorPolylineが追加され、C1VectorItemBaseコレクションエディタの右側にそのプロパティが表示されます。

7. Fill、FillOpacity、Stroke、StrokeOpacity、StrokeWidthなどを任意に設定します。

8. Pointsプロパティの横にある省略符ボタン(...)をクリックして、PointDコレクションエディタコレクションエディタを開きます。

9. ［追加］［追加］ボタンを３回クリックします。次のように、各ポイントのX座標とY座標を設定します。



Point X Y

0 -80.15 42.12

1 -123.08 39.09

2 -3.90 30.85

10. ［［OK］］をクリックして、PointDコレクションエディタを閉じます。




マップのスケールに応じて要素の表示/非表示を操作する方法については、トピック「ベクターレイヤ」の「要素の表示/非表示」セク

ションを参照してください。


次のマークアップを<c1:C1Maps> </c1:C1Maps>タグの間に追加します。

ソースビュー

<Layers> <c1:C1VectorLayer> <DataWijJson> <Vectors> <c1:C1VectorPolyline FillOpacity="0" Stroke="Yellow" StrokeWidth="2"> <Points> <c1:PointD X="-80.15" Y="42.12" /> <c1:PointD X="-123.08" Y="39.09" /> <c1:PointD X="-3.9" Y="30.85" /> </Points> </c1:C1VectorPolyline> </Vectors> </DataWijJson> </c1:C1VectorLayer></Layers>



C#



// データソースの種類を設定します。


//ベクター折れ線を作成してレイヤに追加します。

C1VectorPolyline vpl = new C1VectorPolyline();vl.DataWijJson.Vectors.Add(vpl);

// ベクター折れ線に点を追加します。

vpl.Points.Add(new PointD(-80.15, 42.12));vpl.Points.Add(new PointD(-123.08, 39.09));vpl.Points.Add(new PointD(-3.90, 30.85));

copyCode

copyCode



// 描線の色と幅を設定します。

vpl.Stroke = System.Drawing.Color.Yellow;vpl.StrokeWidth = 2;

VB



' 使用するデータソースの種類を設定します。


'ベクター折れ線を作成してレイヤに追加します。

Dim vpl As New C1VectorPolyline()vl.DataWijJson.Vectors.Add(vpl)

' ベクター折れ線に点を追加します。

vpl.Points.Add(New PointD(-80.15, 42.12))vpl.Points.Add(New PointD(-123.08, 39.09))vpl.Points.Add(New PointD(-3.9, 30.85))

' 描線の色と幅を設定します。

vpl.Stroke = System.Drawing.Color.Yellowvpl.StrokeWidth = 2



次の図は、C1Mapsコントロールで３つの地理座標を折れ線で結んで表示したところです。

copyCode



地理座標を多角形で結ぶ地理座標を多角形で結ぶ

地理座標を多角形で結ぶには、C1VectorLayer（詳細については、「ベクターレイヤ」を参照してください）

にC1VectorPolygonを追加します。このトピックでは、３つの点から成る多角形を作成します。




3. ［追加］［追加］ボタンのドロップダウン矢印をクリックし、C1VectorLayerを選択します。C1LayersコレクションにC1VectorLayerが追加され、C1Layersコレクションエディタの右側にそのプロパティが表示されます。



6. ［追加］［追加］ボタンのドロップダウン矢印をクリックし、C1VectorPolygonを選択します。C1VectorItemBaseコレクションに

C1VectorPolygonが追加され、C1VectorItemBaseコレクションエディタの右側にそのプロパティが表示されます。

7. Fill、FillOpacity、Stroke、StrokeOpacity、StrokeWidthなどを任意に設定します。

8. Pointsプロパティの横にある省略符ボタン(...)をクリックして、PointDコレクションエディタコレクションエディタを開きます。

9. ［追加］［追加］ボタンを３回クリックします。次のように、各ポイントのX座標とY座標を設定します。

Point X Y

0 -80.15 42.12

1 -123.08 39.09

2 -3.90 30.85



10. ［［OK］］をクリックして、PointDコレクションエディタを閉じます。




マップのスケールに応じて要素の表示/非表示を操作する方法については、トピック「ベクターレイヤ」の「要素の表示/非表示」

セクションを参照してください。


次のマークアップを<c1:C1Maps> </c1:C1Maps>タグの間に追加して、マップコントロールに多角形を追加します。

ソースビュー

<Layers> <c1:C1VectorLayer> <DataWijJson> <Vectors> <c1:C1VectorPolygon Fill="Snow" Stroke="Yellow" StrokeWidth="2"> <Points> <c1:PointD X="-80.15" Y="42.12" /> <c1:PointD X="-123.08" Y="39.09" /> <c1:PointD X="-3.9" Y="30.85" /> </Points> </c1:C1VectorPolygon> </Vectors> </DataWijJson> </c1:C1VectorLayer></Layers>


1. 次のコードを Page_Load イベントに追加して、マップコントロールに多角形を追加します。

C#



// データソースの種類を設定します。


//ベクター多角形を作成してレイヤに追加します。

C1VectorPolygon vpl = new C1VectorPolygon();vl.DataWijJson.Vectors.Add(vpl);

// ベクター多角形に点を追加します。

vpl.Points.Add(new PointD(-80.15, 42.12));vpl.Points.Add(new PointD(-123.08, 39.09));vpl.Points.Add(new PointD(-3.90, 30.85));

// 塗り色、描線色と描線幅を設定します。

vpl.Fill = System.Drawing.Color.Snow;vpl.Stroke = System.Drawing.Color.Yellow;

copyCode

copyCode



vpl.StrokeWidth = 2;

VB



' データソースの種類を設定します。


'ベクター多角形を作成してレイヤに追加します。

Dim vpl As New C1VectorPolygon()vl.DataWijJson.Vectors.Add(vpl)

' ベクター多角形に点を追加します。

vpl.Points.Add(New PointD(-80.15, 42.12))vpl.Points.Add(New PointD(-123.08, 39.09))vpl.Points.Add(New PointD(-3.9, 30.85))

' 塗り色、描線色と描線幅を設定します。

vpl.Fill = System.Drawing.Color.Snowvpl.Stroke = System.Drawing.Color.Yellowvpl.StrokeWidth = 2



次の図は、C1Mapsコントロールで３つの地理座標を多角形で結んで表示したところです。

copyCode



GeoJsonファイルでマップに形状を表示するファイルでマップに形状を表示する

ベクターオブジェクトに加え、リモートGeoJsonファイルを使用してマップに形状を追加することもできます。この機能を使用する

と、ローカルファイルからデータをインポートしたり、外部ドメインからデータをロードすることができます。

GeoJson機能には、住所や位置を追加するためのポイント、番地や境界を示すために使用できるライン文字列、国境や県境

などの行政界を示すための多角形、およびこれらのタイプのマルチパートコレクションを格納できます。

次のトピックでは、リモートGeoJsonファイルを使用して、マップコントロールにいくつかの形状を表示する方法を示します。プロ

ジェクトのResourcesフォルダに、２つの.geo.jsonファイルが追加されていることを確認してください。

.jsonファイルが正しくダウンロードされるようにするには、web.configファイルの<system.webServer></system.webServer>タグの間に次のマークアップを追加します。

<staticContent> <mimeMap fileExtension=".json" mimeType="application/json"/></staticContent>

<head></head>タグの間に次のスクリプトを追加して、マップコントロール上で米国の都市を強調表示するために、形状の塗

りつぶしと透過度を設定します。

スクリプトスクリプト

ソースビュー copyCode



uslayer.OnClientShapeCreated = "onUsShapeCreated" uslayer.DataType = DataType.GeoJson uslayer.DataUrl = "Resources/us.geo.json"

countriesLayer.DataType = DataType.GeoJson countriesLayer.DataUrl = "Resources/countries.geo.json"End If



次の図は、C1Mapsコントロールに世界中のすべての国を黒い境界で表示し、米国のいくつかの都市を紫色で強調表示したと

ころです。

仮想レイヤ仮想レイヤ

仮想レイヤは、仮想化と非同期データロードをサポートしてマップ上に要素を表示します。一度に表示する要素が多くない場

合は、これを使用して、無制限の数の要素を表示できます。

マップ空間の分割は、MapSliceのC1VirtualLayer.Slicesコレクションを使用して定義されます。各マップスライスには、その

区分の最小ズームレベルが定義され、あるスライスの最大ズームレベルが次のスライスの最小ズームレベルになります。した

がって、最後のスライスの最大ズームレベルは、マップの最大ズームレベルになります。さらに、各スライスは、緯度/経度のグ

リッドに分割されます。

例として次のレイヤを紹介します。

ソースビュー

<c1:C1VirtualLayer> <Slices> <c1:MapSlice LatitudeSlices="2" LongitudeSlices="2" Zoom="5" /> <c1:MapSlice LatitudeSlices="4" LongitudeSlices="4" Zoom="10" />



</Slices></c1:C1VirtualLayer>

ここには、ズーム５～10とズーム10～最大ズームの２つのスライスがあります。ズーム値が１つのスライスから別のスライスに

移動すると、仮想レイヤはそのスライスのソースからデータを要求します。また、最初のスライスは緯度/経度で２×２に分割さ

れています。つまり、マップは４つの領域に分割され、レイヤは現在表示されている領域のデータのみを要求します。２番目の

スライスが16の領域に分割されているのは、ズーム値が大きくなるほど多数に分割した方がパフォーマンスが向上するためで

す。

Requestメソッドは、マップ空間の１つの領域をパラメータとして受け取るほか、返される項目のコレクションを受け取ります。こ

の実装は最初に、要求された最小ズームがアプリケーションパラメータより小さいかどうかをチェックし、小さい場合は何もしま

せん。そうでない場合は、Webサービスを呼び出してデータを取得します。

仮想レイヤの追加仮想レイヤの追加

このトピックでは、C1VirtualLayerを使用して仮想レイヤを追加および実装する方法を示します。

このトピックでは、以下のJavascriptファイルにある関数を使用してレイヤにデータをロードします。

工場データのスクリプト工場データのスクリプト

ソースコードビュー

<script type="text/javascript"> var factoriesDataBase, minStoreZoom = 2, storeSlices = Math.floor(Math.pow(2, minStoreZoom));

function loadFactoriesDataBase() { $.ajax({ url: "Resources/factories.json", data: null, context: null, success: function (result) { factoriesDataBase = result; minStoreZoom = 5; storeSlices = Math.floor(Math.pow(2, minStoreZoom)); }, error: null, dataType: "json", async: false }); }

function requestFactories(paper, zoom, maxZoom, lowerLeft, upperRight) { if (!factoriesDataBase) { loadFactoriesDataBase(); }

var result = { items: [] }, factories = factoriesDataBase.factories, len = factories.length; for (var i = 0; i < len; i++) {

copyCode



at: "right+30px top+30px" } });

paper.circle(50, 10, 10).attr("fill", "#222222"); paper.text(50, 10, office.stores).attr("fill", "white"); var set = paper.setFinish(); item.elements = set;

result.items.push(item); } return result; }

function requestStores(paper, minZoom, maxZoom, lowerLeft, upperRight) { if (!factoriesDataBase) { loadFactoriesDataBase(); }

if (minZoom < minStoreZoom) return null;

var result = { items: [] }, stores = factoriesDataBase.stores, len = stores.length;

for (var i = 0; i < len; i++) { var store = stores[i]; if (store.longitude <= lowerLeft.x || store.longitude > upperRight.x || store.latitude <= lowerLeft.y || store.latitude > upperRight.y) { continue; }

var item = { location: { x: store.longitude, y: store.latitude }, size: { width: 60, height: 60 }, pinpoint: { x: 30, y: 30 } };

paper.setStart(); var img = paper.image("Resources/store.png", 0, 0, 60, 60); $(img.node).wijtooltip({ content: store.name, position: { my: "left center", at: "right+30px top+30px" } });

var set = paper.setFinish(); item.elements = set;



result.items.push(item); } return result; } </script>

上のスクリプトで使用しているfactories.jsonファイルには、工場の緯度、経度、名前、および生産能力に関する情報と、マップ

上に工場、店舗、および事務所を表示するための３つの画像が含まれます。これらの画像とjquery.wijmo.wijtooltip.min.jsファイルは、プロジェクトのResourcesフォルダに保存されています。

「factories.json」と「jquery.wijmo.wijtooltip.min.js」のコードについては、オンラインヘルプを参照してください。


1. WebフォームにC1Mapsコントロールを追加します。



4. ［追加］［追加］ボタンのドロップダウン矢印をクリックし、C1VirtualLayerを選択します。C1LayersコレクションにC1VectorLayerが追加され、C1Layersコレクションエディタの右側にそのプロパティが表示されます。

5. 同様に、もう１つのVirtualLayerを追加します。

6. 最初のVirtualLayerを選択し、次の手順を実行します。

1. RequestプロパティをrequestFactoriesに設定します。

2. Slicesプロパティの横にある省略符ボタン(...)をクリックして、MapSliceコレクションエディタコレクションエディタを開きます。

3. ［追加］［追加］ボタンをクリックしてスライスを追加し、そのLatitudeSlicesプロパティを1に、LongitudeSlicesプロパ

ティを1に、Zoomプロパティを0に設定します。

4. ［［OK］］をクリックして、MapSliceコレクションエディタを閉じます。

7. ２番目のVirtualLayerを選択し、次の手順を実行します。

1. RequestプロパティをrequestStoresに設定します。

2. Slicesプロパティの横にある省略符ボタン(...)をクリックして、MapSliceコレクションエディタコレクションエディタを開きます。

3. ［追加］［追加］ボタンをクリックしてスライスを追加し、そのLatitudeSlicesプロパティを1に、LongitudeSlicesプロパ

ティを1に、Zoomプロパティを1に設定します。

4. ［追加］［追加］ボタンをクリックしてもう１つのスライスを追加し、そのLatitudeSlicesプロパティを1024に、LongitudeSlicesプロパティを1024に、Zoomプロパティを5に設定します。

5. ［［OK］］をクリックして、MapSliceコレクションエディタを閉じます。

8. ［［OK］］をクリックして、C1Layerコレクションエディタを閉じます。



次のマークアップを<c1:C1Maps> </c1:C1Maps>タグの間に追加して、C1Mapsコントロールに仮想レイヤを追加します。

ソースコードビュー

<Layers> <c1:C1VirtualLayer Request="requestFactories"> <Slices> <c1:MapSlice LatitudeSlices="1" LongitudeSlices="1" Zoom="0" /> </Slices> </c1:C1VirtualLayer>

copyCode



http://c1.grapecity.com/help/web/aspnet/aspwij_maps/AddVirtualLayer

<c1:C1VirtualLayer Request="requestStores"> <Slices> <c1:MapSlice LatitudeSlices="1" LongitudeSlices="1" Zoom="1" /> <c1:MapSlice LatitudeSlices="1024" LongitudeSlices="1024" Zoom="5" /> </Slices> </c1:C1VirtualLayer></Layers>


1. 次のコードを Page_Load イベントに追加して、C1Mapsコントロールに仮想レイヤを追加します。

C#

// 仮想レイヤ1を作成して追加します。

C1VirtualLayer vl1 = new C1VirtualLayer();vl1.Request = "requestFactories";C1Maps1.Layers.Add(vl1);MapSlice s1 = new MapSlice();s1.LatitudeSlices = 1;s1.LatitudeSlices = 1;s1.Zoom = 0;vl1.Slices.Add(s1);

// 仮想レイヤ2を作成して追加します。

C1VirtualLayer vl2 = new C1VirtualLayer();vl1.Request = "requestStores";C1Maps1.Layers.Add(vl2);MapSlice s2 = new MapSlice();s2.LatitudeSlices = 1;s2.LatitudeSlices = 1;s2.Zoom = 1;vl2.Slices.Add(s2);MapSlice s3 = new MapSlice();s3.LatitudeSlices = 1024;s3.LatitudeSlices = 1024;s3.Zoom = 5;vl2.Slices.Add(s3);

VB

' 仮想レイヤ1を作成して追加します。

Dim vl1 As New C1VirtualLayer()vl1.Request = "requestFactories"C1Maps1.Layers.Add(vl1)Dim s1 As New MapSlice()s1.LatitudeSlices = 1s1.LatitudeSlices = 1s1.Zoom = 0

' 仮想レイヤ2を作成して追加します。

Dim vl2 As New C1VirtualLayer()vl1.Request = "requestStores"C1Maps1.Layers.Add(vl2)

copyCode

copyCode



Dim s2 As New MapSlice()s2.LatitudeSlices = 1s2.LatitudeSlices = 1s2.Zoom = 1vl2.Slices.Add(s2)Dim s3 As New MapSlice()s3.LatitudeSlices = 1024s3.LatitudeSlices = 1024s3.Zoom = 5vl2.Slices.Add(s3)



次の図は、C1Mapsコントロールにズームレベル２で工場を表示したところです。

次の図は、C1Mapsコントロールでレベル５以上にズームインして、すべての店舗を表示したところです。



項目レイヤ項目レイヤ

項目レイヤは、マップ上に項目を表示する最も簡単な方法です。C1ItemsLayerクラスは、項目レイヤを表します。このレイヤ

は、ベクターレイヤや仮想レイヤと同様に、ソースビューまたはコードでC1Layerコレクションエディタを使用してマップに追加で

きます。

トピック「項目レイヤの追加」で使用されている工場サンプルでは、マップコントロールに項目レイヤを追加しています。

ソースビュー

<c1:C1ItemsLayer Request="requestOffices" />

このサンプルでは、項目レイヤのRequestプロパティを使用して、マップコントロールに事務所を表示するためのクライアント側

関数を呼び出しています。

項目レイヤの追加項目レイヤの追加

このトピックでは、項目レイヤを追加することでマップコントロールに項目を表示する方法を示します。このトピックでは、トピック

「仮想レイヤの追加」で使用されているスクリプトおよびリソースと同じスクリプトおよびリソースを使用します。


1. WebフォームにC1Mapsコントロールを追加します。



4. ［追加］［追加］ボタンのドロップダウン矢印をクリックし、C1ItemsLayerを選択します。C1LayersコレクションにC1ItemsLayerが追加され、C1Layersコレクションエディタの右側にそのプロパティが表示されます。

5. RequestプロパティをrequestOfficesに設定します。 6. ［［OK］］をクリックして、C1Layerコレクションエディタを閉じます。





次のマークアップを<c1:C1Maps> </c1:C1Maps>タグの間に追加して、ItemsLayerを使用してマップコントロールに項目を表

示します。

ソースビュー

<Layers> <c1:C1ItemsLayer Request="requestOffices"/></Layers>


1. 次のコードを Page_Load イベントに追加して、ItemsLayerを使用してマップコントロールに項目を表示します。

C#

var il = new C1ItemsLayer();il.Request = "requestOffices";C1Maps1.Layers.Add(il);

VB

Dim il As New C1ItemsLayeril.Request = "requestOffices"C1Maps1.Layers.Add(il)



次の図は、C1Mapsコントロールに項目レイヤを使用して事務所を表示したところです。

copyCode

copyCode

copyCode

マップのソースマップのソース



C1Mapsは、ソースとしてMicrosoft LiveMaps航空写真を使用しますが、Sourceプロパティを使用してソースを変更することも

できます。デフォルトでは、このプロパティはBing Maps（このサービスを使用する前に「法的要件および認証」を参照してくだ

さい）航空写真を表示するように設定されていますが、道路ソースまたは混合ソースを表示するように変更することができま

す。マップコントロールでは次のマップがサポートされています。

BingMapsRoadSource

BingMapsAerialSource



BingMapsHybridSource



マップのソースを変更するマップのソースを変更するマップのソースを変更するには、次の手順を実行します。



2. Sourceプロパティの横にあるドロップダウン矢印をクリックし、要件に合わせてソースを選択します。


<c1:C1Maps>タグ内のSourceプロパティを次のように変更して、C1Mapsコントロールのソースを変更します。

ソースビュー

<c1:C1Maps ID="C1Maps1" runat="server" Height="500px" Width="600px" Source="BingMapsRoadSource"></c1:C1Maps>



C#

copyCode

copyCode



C1Maps1.Source = C1.Web.Wijmo.Controls.C1Maps.MapSource.BingMapsRoadSource;

VB

C1Maps1.Source = C1.Web.Wijmo.Controls.C1Maps.MapSource.BingMapsRoadSource



次の図は、C1MapsコントロールのソースをBing Maps 道路ソースに設定したところです。

copyCode

カスタムソースを追加するカスタムソースを追加する

Bing Maps に事前定義されている３つのタイプに加え、マップでカスタムソースを使用することもできます。カスタムソースを使用

するには、SourceプロパティをCustomSourceに設定し、タイルソースを取得するためのJavascript関数を定義する必要があります。

このトピックでは、マップのカスタムソースとしてGoogle Mapsを使用する方法を示します。



2. Sourceプロパティの横にあるドロップダウン矢印をクリックし、CustomSourceを選択します。


4. CustomSourceプロパティグループを展開します。



5. MaxZoomを22、MinZoomを１、TileWidthを256、TileHeightを256、およびGetUrlをgetUrlに設定します。

ソースビューで、次のようにgetUrl関数を定義します。


1. 以下に、マップのソースを変更し、カスタムソースプロパティを設定した後のC1Mapsコントロールの最終的なマークアップを

示します。

ソースビュー

<c1:C1Maps ID="C1Maps1" runat="server" Height="500px" Width="600px" Source="CustomSource"> <CustomSource GetUrl="getUrl" MinZoom="1" MaxZoom="22" TileHeight="256" TileWidth="256"/></c1:C1Maps>

2. <head></head>タグの間に、Google Mapsタイルを取得するgetUrl関数のスクリプトを次のように追加します。

ソースビュー

<script type="text/javascript"> function getUrl(zoom, x, y) { var uriFormat = "http://mt{subdomain}.google.cn/vt/lyrs=r&hl=en-us&gl=cn&x={x}&y={y}&z={zoom}"; var subdomains = ["0", "1", "2", "3"]; var subdomain = subdomains[(y * Math.pow(2, zoom) + x) % subdomains.length]; return uriFormat.replace("{subdomain}", subdomain).replace("{x}", x). replace("{y}", y).replace("{zoom}", zoom); }</script>


1. 次のコードを Page_Load イベントに追加して、マップのソースを変更し、カスタムソース設定を指定します。

C#

C1Maps1.Source = C1.Web.Wijmo.Controls.C1Maps.MapSource.CustomSource;C1Maps1.CustomSource.MaxZoom = 22;C1Maps1.CustomSource.MinZoom = 1;C1Maps1.CustomSource.TileWidth = 256;C1Maps1.CustomSource.TileHeight = 256;C1Maps1.CustomSource.GetUrl = "getUrl";

VB

C1Maps1.Source = C1.Web.Wijmo.Controls.C1Maps.MapSource.CustomSourceC1Maps1.CustomSource.MaxZoom = 22C1Maps1.CustomSource.MinZoom = 1C1Maps1.CustomSource.TileWidth = 256C1Maps1.CustomSource.TileHeight = 256C1Maps1.CustomSource.GetUrl = "getUrl"



copyCode

copyCode

copyCode

copyCode



次の図は、C1MapsコントロールにGoogleマップタイルを表示したところです。



ユーザーシナリオ

行政界を描画する行政界を描画する

ベクターレイヤを使用すると、地理座標を持つジオメトリ、形状、多角形、およびパスをマップ上に描画できます。これを使用し

て、国境や県境などの行政界を描画できます。このトピックでは、マップに行政界を描画する方法を示します。


1. Visual Studioで、新しいASP.Net Webアプリケーションアプリケーションを作成し、新しいWebフォームフォームを追加します。

2. ツールボックスでC1Mapsコントロールを見つけ、それをWebフォームに配置します。


4. Heightを500pxに設定し、Widthを600pxに設定します。


6. Centerを103, 35に、Zoomを３に設定します。

7. SourceをBingMapsRoadSourceに設定します。

コードでマップにベクターレイヤおよび多角形を追加するには、次のようにします。


次のコードをPage_Loadイベントに追加して、MapsコントロールにC1VectorLayerを追加し、中国の各部を表す３つの

C1VectorPolygonsをベクターレイヤに追加します。

C#でコードを書く場合でコードを書く場合

C#

// ベクターレイヤを作成してマップに追加します。

C1VectorLayer vectorlayer = new C1VectorLayer();vectorlayer.DataType = DataType.WijJson;C1Maps1.Layers.Add(vectorlayer);

// 3つの多角形を作成して、ベクターレイヤに追加します。

C1VectorPolygon[] vectors = new C1VectorPolygon[3];for (int i = 0; i < 3; i++){ vectors[i] = new C1VectorPolygon(); vectorlayer.DataWijJson.Vectors.Add(vectors[i]);}

// 最初の多角形に色を設定し、点を追加します。

vectors[0].Fill = Color.Yellow;vectors[0].Name = "China";vectors[0].Stroke = Color.Black;vectors[0].Points.Add(new PointD(110.855d, 19.52888d));vectors[0].Points.Add(new PointD(110.4832d, 19.16761d));vectors[0].Points.Add(new PointD(110.5255d, 18.80083d));vectors[0].Points.Add(new PointD(110.0503d, 18.3852d));vectors[0].Points.Add(new PointD(109.7594d, 18.39152d));vectors[0].Points.Add(new PointD(109.7036d, 18.19777d));vectors[0].Points.Add(new PointD(108.6871d, 18.50562d));vectors[0].Points.Add(new PointD(108.6283d, 19.28028d));

copyCode



vectors[0].Points.Add(new PointD(109.2939d, 19.76d));vectors[0].Points.Add(new PointD(109.1653d, 19.7236d));vectors[0].Points.Add(new PointD(109.2572d, 19.89972d));vectors[0].Points.Add(new PointD(109.4658d, 19.82861d));vectors[0].Points.Add(new PointD(109.6108d, 19.99389d));vectors[0].Points.Add(new PointD(110.6655d, 20.13361d));vectors[0].Points.Add(new PointD(110.9425d, 19.97861d));vectors[0].Points.Add(new PointD(111.0215d, 19.63829d));vectors[0].Points.Add(new PointD(110.855d, 19.52888d));

// 2番目の多角形に色を設定し、点を追加します。

vectors[1].Fill = Color.Yellow;vectors[1].Name = "China";vectors[1].Stroke = Color.Black;vectors[1].Points.Add(new PointD(121.4441, 25.13474));vectors[1].Points.Add(new PointD(121.5632, 25.28361));vectors[1].Points.Add(new PointD(122.0004, 25.00722));vectors[1].Points.Add(new PointD(121.8182, 24.85028));vectors[1].Points.Add(new PointD(121.8397, 24.47638));vectors[1].Points.Add(new PointD(121.3556, 23.0875));vectors[1].Points.Add(new PointD(120.7196, 21.92791));vectors[1].Points.Add(new PointD(120.6103, 22.31277));vectors[1].Points.Add(new PointD(120.3071, 22.54044));vectors[1].Points.Add(new PointD(120.0539, 23.04437));vectors[1].Points.Add(new PointD(120.1112, 23.61708));vectors[1].Points.Add(new PointD(121.0017, 25.00166));vectors[1].Points.Add(new PointD(121.4441, 25.13474));

// 3番目の多角形に色を設定し、点を追加します。

vectors[2].Fill = Color.Yellow;vectors[2].Name = "China";vectors[2].Stroke = Color.Black;vectors[2].Points.Add(new PointD(88.91693d, 27.32083d));vectors[2].Points.Add(new PointD(88.76464d, 27.54243d));vectors[2].Points.Add(new PointD(88.83575d, 28.00805d));vectors[2].Points.Add(new PointD(88.62435d, 28.1168d));vectors[2].Points.Add(new PointD(88.14279d, 27.86605d));vectors[2].Points.Add(new PointD(87.19275d, 27.82305d));vectors[2].Points.Add(new PointD(86.69527d, 28.11166d));vectors[2].Points.Add(new PointD(86.45137d, 27.90888d));vectors[2].Points.Add(new PointD(86.19769d, 28.15805d));vectors[2].Points.Add(new PointD(86.0054d, 27.88625d));vectors[2].Points.Add(new PointD(85.72137d, 28.27916d));vectors[2].Points.Add(new PointD(85.11095d, 28.30666d));vectors[2].Points.Add(new PointD(85.19518d, 28.59104d));vectors[2].Points.Add(new PointD(84.84665d, 28.54444d));vectors[2].Points.Add(new PointD(84.48623d, 28.73402d));vectors[2].Points.Add(new PointD(84.11651d, 29.26097d));vectors[2].Points.Add(new PointD(83.5479d, 29.18902d));vectors[2].Points.Add(new PointD(83.19109d, 29.63166d));vectors[2].Points.Add(new PointD(82.17525d, 30.06923d));vectors[2].Points.Add(new PointD(82.11123d, 30.33444d));vectors[2].Points.Add(new PointD(81.42623d, 30.385d));



vectors[2].Points.Add(new PointD(81.23221d, 30.01194d));vectors[2].Points.Add(new PointD(81.02536d, 30.20435d));vectors[2].Points.Add(new PointD(80.207d, 30.57552d));vectors[2].Points.Add(new PointD(80.25423d, 30.73374d));vectors[2].Points.Add(new PointD(79.86304d, 30.96583d));vectors[2].Points.Add(new PointD(79.55429d, 30.95708d));vectors[2].Points.Add(new PointD(79.08082d, 31.43729d));vectors[2].Points.Add(new PointD(78.76825d, 31.30895d));vectors[2].Points.Add(new PointD(78.77075d, 31.96847d));vectors[2].Points.Add(new PointD(78.47594d, 32.24304d));vectors[2].Points.Add(new PointD(78.40595d, 32.5561d));vectors[2].Points.Add(new PointD(78.74623d, 32.63902d));vectors[2].Points.Add(new PointD(78.9711d, 32.35083d));vectors[2].Points.Add(new PointD(79.52874d, 32.75666d));vectors[2].Points.Add(new PointD(79.37511d, 33.09944d));vectors[2].Points.Add(new PointD(78.93623d, 33.42863d));vectors[2].Points.Add(new PointD(78.81387d, 33.52041d));vectors[2].Points.Add(new PointD(78.73581d, 34.06833d));vectors[2].Points.Add(new PointD(78.98535d, 34.35001d));vectors[2].Points.Add(new PointD(78.33707d, 34.6118d));vectors[2].Points.Add(new PointD(78.02305d, 35.28069d));vectors[2].Points.Add(new PointD(78.0718d, 35.49902d));vectors[2].Points.Add(new PointD(77.82393d, 35.50133d));vectors[2].Points.Add(new PointD(76.89526d, 35.6125d));vectors[2].Points.Add(new PointD(76.55304d, 35.90665d));vectors[2].Points.Add(new PointD(76.18061d, 35.81458d));vectors[2].Points.Add(new PointD(75.92887d, 36.07082d));vectors[2].Points.Add(new PointD(76.04166d, 36.23751d));vectors[2].Points.Add(new PointD(75.85984d, 36.66343d));vectors[2].Points.Add(new PointD(75.45179d, 36.73169d));vectors[2].Points.Add(new PointD(75.39902d, 36.91156d));vectors[2].Points.Add(new PointD(75.14787d, 36.99719d));vectors[2].Points.Add(new PointD(74.56543d, 37.02782d));vectors[2].Points.Add(new PointD(74.39089d, 37.17d));vectors[2].Points.Add(new PointD(74.91574d, 37.23733d));vectors[2].Points.Add(new PointD(75.18748d, 37.40659d));vectors[2].Points.Add(new PointD(74.9036d, 37.65243d));vectors[2].Points.Add(new PointD(74.85442d, 38.47256d));vectors[2].Points.Add(new PointD(74.35471d, 38.67438d));vectors[2].Points.Add(new PointD(73.81401d, 38.61271d));vectors[2].Points.Add(new PointD(73.70818d, 38.88653d));vectors[2].Points.Add(new PointD(73.85235d, 38.97256d));vectors[2].Points.Add(new PointD(73.62005d, 39.23569d));vectors[2].Points.Add(new PointD(73.65569d, 39.45483d));vectors[2].Points.Add(new PointD(73.95471d, 39.59965d));vectors[2].Points.Add(new PointD(73.8429d, 39.76896d));vectors[2].Points.Add(new PointD(73.99096d, 40.04202d));vectors[2].Points.Add(new PointD(74.88089d, 40.32792d));vectors[2].Points.Add(new PointD(74.8588d, 40.51723d));vectors[2].Points.Add(new PointD(75.23394d, 40.45042d));vectors[2].Points.Add(new PointD(75.58284d, 40.64452d));vectors[2].Points.Add(new PointD(75.70374d, 40.298d));



vectors[2].Points.Add(new PointD(76.3344d, 40.35324d));vectors[2].Points.Add(new PointD(76.87067d, 41.01258d));vectors[2].Points.Add(new PointD(78.08083d, 41.04079d));vectors[2].Points.Add(new PointD(78.39554d, 41.39286d));vectors[2].Points.Add(new PointD(80.24513d, 42.03954d));vectors[2].Points.Add(new PointD(80.23402d, 42.19622d));vectors[2].Points.Add(new PointD(80.15804d, 42.63245d));vectors[2].Points.Add(new PointD(80.25796d, 42.81565d));vectors[2].Points.Add(new PointD(80.57226d, 42.88545d));vectors[2].Points.Add(new PointD(80.38405d, 43.02906d));vectors[2].Points.Add(new PointD(80.81526d, 43.1683d));vectors[2].Points.Add(new PointD(80.36887d, 44.11378d));vectors[2].Points.Add(new PointD(80.38499d, 44.6358d));vectors[2].Points.Add(new PointD(80.51589d, 44.73408d));vectors[2].Points.Add(new PointD(79.87106d, 44.90282d));vectors[2].Points.Add(new PointD(81.67928d, 45.3497d));vectors[2].Points.Add(new PointD(81.94803d, 45.15748d));vectors[2].Points.Add(new PointD(82.56638d, 45.13303d));vectors[2].Points.Add(new PointD(82.64624d, 45.43581d));vectors[2].Points.Add(new PointD(82.32179d, 45.5831d));vectors[2].Points.Add(new PointD(83.03443d, 47.20061d));vectors[2].Points.Add(new PointD(83.93026d, 46.97332d));vectors[2].Points.Add(new PointD(84.67804d, 46.99361d));vectors[2].Points.Add(new PointD(84.80318d, 46.8277d));vectors[2].Points.Add(new PointD(85.52257d, 47.0591d));vectors[2].Points.Add(new PointD(85.70139d, 47.26221d));vectors[2].Points.Add(new PointD(85.53707d, 47.93721d));vectors[2].Points.Add(new PointD(85.76596d, 48.39333d));vectors[2].Points.Add(new PointD(86.59791d, 48.54277d));vectors[2].Points.Add(new PointD(86.87602d, 49.1102d));vectors[2].Points.Add(new PointD(87.34821d, 49.09262d));vectors[2].Points.Add(new PointD(87.8407d, 49.17295d));vectors[2].Points.Add(new PointD(87.89291d, 48.98304d));vectors[2].Points.Add(new PointD(87.7611d, 48.88103d));vectors[2].Points.Add(new PointD(88.05942d, 48.73499d));vectors[2].Points.Add(new PointD(87.99194d, 48.56541d));vectors[2].Points.Add(new PointD(88.51679d, 48.40582d));vectors[2].Points.Add(new PointD(88.61179d, 48.21193d));vectors[2].Points.Add(new PointD(89.08514d, 47.99374d));vectors[2].Points.Add(new PointD(90.07096d, 47.88791d));vectors[2].Points.Add(new PointD(90.9136d, 46.95221d));vectors[2].Points.Add(new PointD(91.07027d, 46.57735d));vectors[2].Points.Add(new PointD(90.92151d, 46.29694d));vectors[2].Points.Add(new PointD(91.02651d, 46.01735d));vectors[2].Points.Add(new PointD(90.68193d, 45.57972d));vectors[2].Points.Add(new PointD(90.89694d, 45.25305d));vectors[2].Points.Add(new PointD(91.56088d, 45.07729d));vectors[2].Points.Add(new PointD(93.5547d, 44.95721d));vectors[2].Points.Add(new PointD(94.71735d, 44.35499d));vectors[2].Points.Add(new PointD(95.41061d, 44.29416d));vectors[2].Points.Add(new PointD(95.34109d, 44.01937d));vectors[2].Points.Add(new PointD(95.53339d, 43.99311d));vectors[2].Points.Add(new PointD(95.87901d, 43.28388d));



vectors[2].Points.Add(new PointD(98.56944d, 26.12527d));vectors[2].Points.Add(new PointD(98.73109d, 26.18472d));vectors[2].Points.Add(new PointD(98.77777d, 26.79166d));vectors[2].Points.Add(new PointD(98.69699d, 27.52972d));vectors[2].Points.Add(new PointD(98.45888d, 27.6725d));vectors[2].Points.Add(new PointD(98.31992d, 27.54014d));vectors[2].Points.Add(new PointD(98.14499d, 28.14889d));vectors[2].Points.Add(new PointD(97.55887d, 28.54652d));vectors[2].Points.Add(new PointD(97.34888d, 28.22277d));vectors[2].Points.Add(new PointD(96.65387d, 28.46749d));vectors[2].Points.Add(new PointD(96.40193d, 28.35111d));vectors[2].Points.Add(new PointD(96.34027d, 28.525d));vectors[2].Points.Add(new PointD(96.61373d, 28.79569d));vectors[2].Points.Add(new PointD(96.47083d, 29.05666d));vectors[2].Points.Add(new PointD(96.17532d, 28.90138d));vectors[2].Points.Add(new PointD(96.14888d, 29.05972d));vectors[2].Points.Add(new PointD(96.39172d, 29.25757d));vectors[2].Points.Add(new PointD(96.08315d, 29.46444d));vectors[2].Points.Add(new PointD(95.38777d, 29.03527d));vectors[2].Points.Add(new PointD(94.64751d, 29.33346d));vectors[2].Points.Add(new PointD(94.23456d, 29.07348d));vectors[2].Points.Add(new PointD(93.96172d, 28.6692d));vectors[2].Points.Add(new PointD(93.35194d, 28.61876d));vectors[2].Points.Add(new PointD(93.22205d, 28.3193d));vectors[2].Points.Add(new PointD(92.71044d, 28.1419d));vectors[2].Points.Add(new PointD(92.54498d, 27.86194d));vectors[2].Points.Add(new PointD(91.65776d, 27.76472d));vectors[2].Points.Add(new PointD(91.66277d, 27.945d));vectors[2].Points.Add(new PointD(91.30138d, 28.08111d));vectors[2].Points.Add(new PointD(91.08693d, 27.96999d));vectors[2].Points.Add(new PointD(90.3765d, 28.07958d));vectors[2].Points.Add(new PointD(90.38898d, 28.24257d));vectors[2].Points.Add(new PointD(89.99819d, 28.32369d));vectors[2].Points.Add(new PointD(89.48749d, 28.05777d));vectors[2].Points.Add(new PointD(88.91693d, 27.32083d));

Visual Basicでコードを書く場合でコードを書く場合

VB

' ベクターレイヤを作成してマップに追加します。

Dim vectorlayer As New C1VectorLayer()vectorlayer.DataType = DataType.WijJsonC1Maps1.Layers.Add(vectorlayer)

' 3つの多角形を作成して、ベクターレイヤに追加します。

Dim vectors As C1VectorPolygon() = New C1VectorPolygon(2) {}For i As Integer = 0 To 2 vectors(i) = New C1VectorPolygon() vectorlayer.DataWijJson.Vectors.Add(vectors(i))Next

' 最初の多角形に色を設定し、点を追加します。

copyCode



vectors(0).Fill = Color.Yellowvectors(0).Name = "China"vectors(0).Stroke = Color.Blackvectors(0).Points.Add(New PointD(110.855, 19.52888))vectors(0).Points.Add(New PointD(110.4832, 19.16761))vectors(0).Points.Add(New PointD(110.5255, 18.80083))vectors(0).Points.Add(New PointD(110.0503, 18.3852))vectors(0).Points.Add(New PointD(109.7594, 18.39152))vectors(0).Points.Add(New PointD(109.7036, 18.19777))vectors(0).Points.Add(New PointD(108.6871, 18.50562))vectors(0).Points.Add(New PointD(108.6283, 19.28028))vectors(0).Points.Add(New PointD(109.2939, 19.76))vectors(0).Points.Add(New PointD(109.1653, 19.7236))vectors(0).Points.Add(New PointD(109.2572, 19.89972))vectors(0).Points.Add(New PointD(109.4658, 19.82861))vectors(0).Points.Add(New PointD(109.6108, 19.99389))vectors(0).Points.Add(New PointD(110.6655, 20.13361))vectors(0).Points.Add(New PointD(110.9425, 19.97861))vectors(0).Points.Add(New PointD(111.0215, 19.63829))vectors(0).Points.Add(New PointD(110.855, 19.52888))

' 2番目の多角形に色を設定し、点を追加します。

vectors(1).Fill = Color.Yellowvectors(1).Name = "China"vectors(1).Stroke = Color.Blackvectors(1).Points.Add(New PointD(121.4441, 25.13474))vectors(1).Points.Add(New PointD(121.5632, 25.28361))vectors(1).Points.Add(New PointD(122.0004, 25.00722))vectors(1).Points.Add(New PointD(121.8182, 24.85028))vectors(1).Points.Add(New PointD(121.8397, 24.47638))vectors(1).Points.Add(New PointD(121.3556, 23.0875))vectors(1).Points.Add(New PointD(120.7196, 21.92791))vectors(1).Points.Add(New PointD(120.6103, 22.31277))vectors(1).Points.Add(New PointD(120.3071, 22.54044))vectors(1).Points.Add(New PointD(120.0539, 23.04437))vectors(1).Points.Add(New PointD(120.1112, 23.61708))vectors(1).Points.Add(New PointD(121.0017, 25.00166))vectors(1).Points.Add(New PointD(121.4441, 25.13474))

' 3番目の多角形に色を設定し、点を追加します。

vectors(2).Fill = Color.Yellowvectors(2).Name = "China"vectors(2).Stroke = Color.Blackvectors(2).Points.Add(New PointD(88.91693, 27.32083))vectors(2).Points.Add(New PointD(88.76464, 27.54243))vectors(2).Points.Add(New PointD(88.83575, 28.00805))vectors(2).Points.Add(New PointD(88.62435, 28.1168))vectors(2).Points.Add(New PointD(88.14279, 27.86605))vectors(2).Points.Add(New PointD(87.19275, 27.82305))vectors(2).Points.Add(New PointD(86.69527, 28.11166))vectors(2).Points.Add(New PointD(86.45137, 27.90888))vectors(2).Points.Add(New PointD(86.19769, 28.15805))vectors(2).Points.Add(New PointD(86.0054, 27.88625))



vectors(2).Points.Add(New PointD(85.72137, 28.27916))vectors(2).Points.Add(New PointD(85.11095, 28.30666))vectors(2).Points.Add(New PointD(85.19518, 28.59104))vectors(2).Points.Add(New PointD(84.84665, 28.54444))vectors(2).Points.Add(New PointD(84.48623, 28.73402))vectors(2).Points.Add(New PointD(84.11651, 29.26097))vectors(2).Points.Add(New PointD(83.5479, 29.18902))vectors(2).Points.Add(New PointD(83.19109, 29.63166))vectors(2).Points.Add(New PointD(82.17525, 30.06923))vectors(2).Points.Add(New PointD(82.11123, 30.33444))vectors(2).Points.Add(New PointD(81.42623, 30.385))vectors(2).Points.Add(New PointD(81.23221, 30.01194))vectors(2).Points.Add(New PointD(81.02536, 30.20435))vectors(2).Points.Add(New PointD(80.207, 30.57552))vectors(2).Points.Add(New PointD(80.25423, 30.73374))vectors(2).Points.Add(New PointD(79.86304, 30.96583))vectors(2).Points.Add(New PointD(79.55429, 30.95708))vectors(2).Points.Add(New PointD(79.08082, 31.43729))vectors(2).Points.Add(New PointD(78.76825, 31.30895))vectors(2).Points.Add(New PointD(78.77075, 31.96847))vectors(2).Points.Add(New PointD(78.47594, 32.24304))vectors(2).Points.Add(New PointD(78.40595, 32.5561))vectors(2).Points.Add(New PointD(78.74623, 32.63902))vectors(2).Points.Add(New PointD(78.9711, 32.35083))vectors(2).Points.Add(New PointD(79.52874, 32.75666))vectors(2).Points.Add(New PointD(79.37511, 33.09944))vectors(2).Points.Add(New PointD(78.93623, 33.42863))vectors(2).Points.Add(New PointD(78.81387, 33.52041))vectors(2).Points.Add(New PointD(78.73581, 34.06833))vectors(2).Points.Add(New PointD(78.98535, 34.35001))vectors(2).Points.Add(New PointD(78.33707, 34.6118))vectors(2).Points.Add(New PointD(78.02305, 35.28069))vectors(2).Points.Add(New PointD(78.0718, 35.49902))vectors(2).Points.Add(New PointD(77.82393, 35.50133))vectors(2).Points.Add(New PointD(76.89526, 35.6125))vectors(2).Points.Add(New PointD(76.55304, 35.90665))vectors(2).Points.Add(New PointD(76.18061, 35.81458))vectors(2).Points.Add(New PointD(75.92887, 36.07082))vectors(2).Points.Add(New PointD(76.04166, 36.23751))vectors(2).Points.Add(New PointD(75.85984, 36.66343))vectors(2).Points.Add(New PointD(75.45179, 36.73169))vectors(2).Points.Add(New PointD(75.39902, 36.91156))vectors(2).Points.Add(New PointD(75.14787, 36.99719))vectors(2).Points.Add(New PointD(74.56543, 37.02782))vectors(2).Points.Add(New PointD(74.39089, 37.17))vectors(2).Points.Add(New PointD(74.91574, 37.23733))vectors(2).Points.Add(New PointD(75.18748, 37.40659))vectors(2).Points.Add(New PointD(74.9036, 37.65243))vectors(2).Points.Add(New PointD(74.85442, 38.47256))vectors(2).Points.Add(New PointD(74.35471, 38.67438))vectors(2).Points.Add(New PointD(73.81401, 38.61271))vectors(2).Points.Add(New PointD(73.70818, 38.88653))



vectors(2).Points.Add(New PointD(73.85235, 38.97256))vectors(2).Points.Add(New PointD(73.62005, 39.23569))vectors(2).Points.Add(New PointD(73.65569, 39.45483))vectors(2).Points.Add(New PointD(73.95471, 39.59965))vectors(2).Points.Add(New PointD(73.8429, 39.76896))vectors(2).Points.Add(New PointD(73.99096, 40.04202))vectors(2).Points.Add(New PointD(74.88089, 40.32792))vectors(2).Points.Add(New PointD(74.8588, 40.51723))vectors(2).Points.Add(New PointD(75.23394, 40.45042))vectors(2).Points.Add(New PointD(75.58284, 40.64452))vectors(2).Points.Add(New PointD(75.70374, 40.298))vectors(2).Points.Add(New PointD(76.3344, 40.35324))vectors(2).Points.Add(New PointD(76.87067, 41.01258))vectors(2).Points.Add(New PointD(78.08083, 41.04079))vectors(2).Points.Add(New PointD(78.39554, 41.39286))vectors(2).Points.Add(New PointD(80.24513, 42.03954))vectors(2).Points.Add(New PointD(80.23402, 42.19622))vectors(2).Points.Add(New PointD(80.15804, 42.63245))vectors(2).Points.Add(New PointD(80.25796, 42.81565))vectors(2).Points.Add(New PointD(80.57226, 42.88545))vectors(2).Points.Add(New PointD(80.38405, 43.02906))vectors(2).Points.Add(New PointD(80.81526, 43.1683))vectors(2).Points.Add(New PointD(80.36887, 44.11378))vectors(2).Points.Add(New PointD(80.38499, 44.6358))vectors(2).Points.Add(New PointD(80.51589, 44.73408))vectors(2).Points.Add(New PointD(79.87106, 44.90282))vectors(2).Points.Add(New PointD(81.67928, 45.3497))vectors(2).Points.Add(New PointD(81.94803, 45.15748))vectors(2).Points.Add(New PointD(82.56638, 45.13303))vectors(2).Points.Add(New PointD(82.64624, 45.43581))vectors(2).Points.Add(New PointD(82.32179, 45.5831))vectors(2).Points.Add(New PointD(83.03443, 47.20061))vectors(2).Points.Add(New PointD(83.93026, 46.97332))vectors(2).Points.Add(New PointD(84.67804, 46.99361))vectors(2).Points.Add(New PointD(84.80318, 46.8277))vectors(2).Points.Add(New PointD(85.52257, 47.0591))vectors(2).Points.Add(New PointD(85.70139, 47.26221))vectors(2).Points.Add(New PointD(85.53707, 47.93721))vectors(2).Points.Add(New PointD(85.76596, 48.39333))vectors(2).Points.Add(New PointD(86.59791, 48.54277))vectors(2).Points.Add(New PointD(86.87602, 49.1102))vectors(2).Points.Add(New PointD(87.34821, 49.09262))vectors(2).Points.Add(New PointD(87.8407, 49.17295))vectors(2).Points.Add(New PointD(87.89291, 48.98304))vectors(2).Points.Add(New PointD(87.7611, 48.88103))vectors(2).Points.Add(New PointD(88.05942, 48.73499))vectors(2).Points.Add(New PointD(87.99194, 48.56541))vectors(2).Points.Add(New PointD(88.51679, 48.40582))vectors(2).Points.Add(New PointD(88.61179, 48.21193))vectors(2).Points.Add(New PointD(89.08514, 47.99374))vectors(2).Points.Add(New PointD(90.07096, 47.88791))vectors(2).Points.Add(New PointD(90.9136, 46.95221))vectors(2).Points.Add(New PointD(91.07027, 46.57735))



vectors(2).Points.Add(New PointD(99.5113, 23.08204))vectors(2).Points.Add(New PointD(98.92747, 23.18916))vectors(2).Points.Add(New PointD(98.67991, 23.97076))vectors(2).Points.Add(New PointD(98.89073, 24.16007))vectors(2).Points.Add(New PointD(97.54762, 23.92999))vectors(2).Points.Add(New PointD(97.7593, 24.26055))vectors(2).Points.Add(New PointD(97.54305, 24.47666))vectors(2).Points.Add(New PointD(97.55255, 24.73992))vectors(2).Points.Add(New PointD(98.19109, 25.61527))vectors(2).Points.Add(New PointD(98.36137, 25.56944))vectors(2).Points.Add(New PointD(98.7104, 25.85597))vectors(2).Points.Add(New PointD(98.56944, 26.12527))vectors(2).Points.Add(New PointD(98.73109, 26.18472))vectors(2).Points.Add(New PointD(98.77777, 26.79166))vectors(2).Points.Add(New PointD(98.69699, 27.52972))vectors(2).Points.Add(New PointD(98.45888, 27.6725))vectors(2).Points.Add(New PointD(98.31992, 27.54014))vectors(2).Points.Add(New PointD(98.14499, 28.14889))vectors(2).Points.Add(New PointD(97.55887, 28.54652))vectors(2).Points.Add(New PointD(97.34888, 28.22277))vectors(2).Points.Add(New PointD(96.65387, 28.46749))vectors(2).Points.Add(New PointD(96.40193, 28.35111))vectors(2).Points.Add(New PointD(96.34027, 28.525))vectors(2).Points.Add(New PointD(96.61373, 28.79569))vectors(2).Points.Add(New PointD(96.47083, 29.05666))vectors(2).Points.Add(New PointD(96.17532, 28.90138))vectors(2).Points.Add(New PointD(96.14888, 29.05972))vectors(2).Points.Add(New PointD(96.39172, 29.25757))vectors(2).Points.Add(New PointD(96.08315, 29.46444))vectors(2).Points.Add(New PointD(95.38777, 29.03527))vectors(2).Points.Add(New PointD(94.64751, 29.33346))vectors(2).Points.Add(New PointD(94.23456, 29.07348))vectors(2).Points.Add(New PointD(93.96172, 28.6692))vectors(2).Points.Add(New PointD(93.35194, 28.61876))vectors(2).Points.Add(New PointD(93.22205, 28.3193))vectors(2).Points.Add(New PointD(92.71044, 28.1419))vectors(2).Points.Add(New PointD(92.54498, 27.86194))vectors(2).Points.Add(New PointD(91.65776, 27.76472))vectors(2).Points.Add(New PointD(91.66277, 27.945))vectors(2).Points.Add(New PointD(91.30138, 28.08111))vectors(2).Points.Add(New PointD(91.08693, 27.96999))vectors(2).Points.Add(New PointD(90.3765, 28.07958))vectors(2).Points.Add(New PointD(90.38898, 28.24257))vectors(2).Points.Add(New PointD(89.99819, 28.32369))vectors(2).Points.Add(New PointD(89.48749, 28.05777))vectors(2).Points.Add(New PointD(88.91693, 27.32083))


プロジェクトを実行すると、中国が黄色で強調表示されます。



maps for asp.net web forms - grapecity...maps for asp.net web forms 2018.04.12 更新...

Documents