Maps for ASP.NET Web Forms
GeoJsonファイルでマップに形状を表示する
主な機能 > ベクターレイヤ > GeoJsonファイルでマップに形状を表示する

ベクターオブジェクトに加え、リモートGeoJsonファイルを使用してマップに形状を追加することもできます。この機能を使用すると、ローカルファイルからデータをインポートしたり、外部ドメインからデータをロードすることができます。

GeoJson機能には、住所や位置を追加するためのポイント、番地や境界を示すために使用できるライン文字列、国境や県境などの行政界を示すための多角形、およびこれらのタイプのマルチパートコレクションを格納できます。

次のトピックでは、リモートGeoJsonファイルを使用して、マップコントロールにいくつかの形状を表示する方法を示します。 プロジェクトのResourcesフォルダに、２つの.geo.jsonファイルが追加されていることを確認してください。

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

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

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

スクリプト

ソースビュー
コードのコピー 
<script type="text/javascript">
    function onUsShapeCreated(e, d) {
        d.shape.attr("fill", "#00F").attr("fill-opacity", 0.2);
    }
</script>

フォームにMapsコントロールを追加し、次の手順を実行して、GeoJsonファイルを使用してマップコントロールに形状を表示します。

コードの場合

  1. 次のアセンブリをインポートします。

    C#
    コードのコピー 
    using C1.Web.Wijmo.Controls.C1Maps;
using C1.Web.Wijmo.Controls.C1Maps.GeoJson;
using GeoJsonFeature = C1.Web.Wijmo.Controls.C1Maps.GeoJson.Feature;
using System.Drawing;

    VB
    コードのコピー 
    Imports C1.Web.Wijmo.Controls.C1Maps
Imports C1.Web.Wijmo.Controls.C1Maps.GeoJson
Imports GeoJsonFeature = C1.Web.Wijmo.Controls.C1Maps.GeoJson.Feature
Imports System.Drawing

  2. 次のコードを Page_Load イベントに追加して、GeoJsonファイルを使用してマップコントロールに形状を表示するためのベクターレイヤを２つ追加します。

    C#
    コードのコピー 
    if (!IsPostBack)
{
    var uslayer = new C1VectorLayer();
    var countriesLayer = new C1VectorLayer();
    C1Maps1.Layers.Add(uslayer);
    C1Maps1.Layers.Add(countriesLayer);

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

    countriesLayer.DataType = DataType.GeoJson;
    countriesLayer.DataUrl = "Resources/countries.geo.json";
}

    VB
    コードのコピー 
    If Not IsPostBack Then
    Dim uslayer As New C1VectorLayer()
    Dim countriesLayer As New C1VectorLayer()
    C1Maps1.Layers.Add(uslayer)
    C1Maps1.Layers.Add(countriesLayer)

    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

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

ここまでの成果

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

 

 

Copyright © GrapeCity, Inc. All rights reserved.