syncfusion-wpf-map

Syncfusion WPF Maps (SfMap) の実装

Syncfusion WPF Maps コントロールは、Windows Presentation Foundation アプリケーションで地理データを可視化するための強力なコンポーネントです。シェープファイルの描画、地図画像の表示、マーカーやバブルの追加、豊富なカスタマイズオプションを備えたインタラクティブなデータ可視化の作成を包括的にサポートします。

このスキルを使用する場面

以下が必要な場合に、このスキルを使用してください。

• 地理マップを描画する（シェープファイル（.shp、.dbf）を使用）
• 地図上で統計データを可視化する（色分けを使用）
• マーカー、バブル、ツールチップなどのインタラクティブ要素を追加する
• OpenStreetMap または Bing Maps の地図画像を表示する
• データに基づく色マッピングでコロプレスマップを作成する
• データ解釈用の地図凡例を実装する
• ズーム、パン、選択によるユーザー操作を可能にする
• 地理データの可視化を含むダッシュボードを構築する
• オーバーレイやサブレイヤーを含むマルチレイヤーマップをサポートする
• テーマやテンプレートで地図の外観をカスタマイズする

コンポーネントの概要

SfMap は、次の機能を備えた地理データを表示するグラフィカル表現コントロールです。

主な機能

• 複数のレイヤータイプ： ベクター図形用の ShapeFileLayer、タイル用の ImageryLayer
• データバインディング： ビジネスオブジェクトを地図の図形に接続
• 視覚要素： マーカー、バブル、注釈、ラベル
• 色マッピング： 範囲ベースおよびカテゴリ別の色分け
• 凡例： カスタマイズ可能な凡例の自動生成
• ユーザー操作： ズーム、パン、選択、ツールチップ
• マルチレイヤーのサポート： サブレイヤーと KML オーバーレイ

主なユースケース

• 気象データの可視化
• 人口密度マップ
• 販売地域の分析
• 政治・選挙マップ
• 建物・フロアプランのレイアウト
• リソースの利用可能状況のマッピング

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet（Syncfusion.SfMaps.WPF）によるインストール
• 必要なアセンブリと名前空間のインポート
• 最初の SfMap コントロールの作成
• シェープファイルの構造（.shp、.dbf）の理解
• シェープファイル用の Uri プロパティの設定
• 基本的な XAML および C# の実装
• 最小限の実行可能な例

レイヤーの構成

📄 参照： references/layers.md

• ShapeFileLayer と ImageryLayer の比較
• ShapeSettings の構成
• ShapeFill、ShapeStroke、ShapeStrokeThickness プロパティ
• インタラクティブな選択を行うための EnableSelection
• 選択した図形のカスタマイズ（SelectedShapeColor、SelectedShapeStroke）
• レイヤーの背景と視覚プロパティ
• 複数レイヤーの管理

📄 参照： references/map-providers.md

• 地図タイル用の ImageryLayer
• OpenStreetMap の統合
• Bing Maps の構成
• カスタムタイルプロバイダー
• ズームレベルとキャッシュ

データバインディングとデータの設定

📄 参照： references/data-binding.md

• コレクションへの ItemsSource バインディング
• ShapeIDPath と ShapeIDTableField のマッピング
• 数値データ用の ShapeValuePath
• 色のバインディング用の ShapeColorValuePath
• INotifyPropertyChanged を使用した ObservableCollection
• MVVM パターンの実装
• バインディングのトラブルシューティング

視覚要素

📄 参照： references/markers.md

• 地図へのマーカーの追加
• マーカーモデルのプロパティ（Label、Latitude、Longitude）
• デフォルトのマーカー描画
• MarkerTemplate のカスタマイズ
• 条件付きスタイル設定のための MarkerTemplateSelector
• MarkerIconFill と MarkerLabelForeground
• 位置と配置

📄 参照： references/bubbles.md

• BubbleMarkerSetting の構成
• データに基づくサイズ設定のための ValuePath
• MinSize と MaxSize のプロパティ
• ColorValuePath と ColorMappings
• AutoFillColor とカスタム Fill
• Stroke、StrokeThickness、Opacity
• バブルの凡例

📄 参照： references/shapes-color-customization.md

• 形状の色のプロパティ
• AutoFillColors プロパティ
• 連続データ向けの RangeColorMapping
• カテゴリデータ向けの EqualsColorMapping
• ツリーマップ風の可視化
• カラーパレットとグラデーション
• カスタム色ロジック

📄 参照： references/legends.md

• LegendVisibility と配置
• LegendPosition 列挙型の値
• カスタム配置のための LegendPositionX と LegendPositionY
• タイトル用の LegendHeader
• LegendType（Layers または Bubbles）
• LegendIcon の形状（Rectangle、Circle、Diamond、Triangle）
• 複数列レイアウト用の LegendColumnSplit
• カスタム凡例テンプレート

📄 参照： references/map-labels.md

• 形状ラベル用の LabelPath
• ShapeLabelTemplate のカスタマイズ
• ラベルの位置と表示設定
• フォントのスタイル設定と書式設定
• ズームに応じたラベル表示

インタラクティブ機能

📄 参照： references/user-interaction.md

• ToolTipSettings の構成
• EnableZoom と EnablePan のプロパティ
• MinZoom と MaxZoom の制約
• ZoomLevel プロパティ
• 形状選択用の EnableSelection
• マウス、タッチ、キーボードでの操作
• カスタムツールチップテンプレート
• プログラムによるズームとパン

📄 参照： references/events.md

• ShapeSelected イベント
• ShapeSelectionChanged イベント
• BubbleMarkerSelected イベント
• MarkerSelected イベント
• ZoomLevelChanged イベント
• イベント引数とデータアクセス

高度な機能

📄 参照： references/annotations.md

• Annotations コレクション
• テキスト、形状、画像の注釈
• 座標による位置指定
• カスタム注釈テンプレート
• 表示設定と操作

📄 参照： references/multilayer-support.md

• SubShapeFileLayers コレクション
• 複数の形状レイヤーの追加
• KML ファイルのサポート
• KmlItemsTemplate のカスタマイズ
• レイヤーの順序と z-index
• ベクターレイヤーと画像レイヤーの組み合わせ

クイックスタートの例

データバインディングと色のマッピングを使って地図を作成する最小限の例を次に示します。

XAML

<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Maps;assembly=Syncfusion.SfMaps.WPF">
    <Grid>
        <Grid.DataContext>
            <local:MapViewModel />
        </Grid.DataContext>

        <syncfusion:SfMap>
            <syncfusion:SfMap.Layers>
                <syncfusion:ShapeFileLayer Uri="MyApp.ShapeFiles.world1.shp"
                                           ItemsSource="{Binding Countries}"
                                           ShapeIDPath="Name"
                                           ShapeIDTableField="NAME"
                                           EnableSelection="True">
                    
                    <syncfusion:ShapeFileLayer.ShapeSettings>
                        <syncfusion:ShapeSetting ShapeValuePath="Population"
                                                 ShapeStroke="White"
                                                 ShapeStrokeThickness="1">
                            <syncfusion:ShapeSetting.FillSetting>
                                <syncfusion:ShapeFillSetting AutoFillColors="False">
                                    <syncfusion:ShapeFillSetting.ColorMappings>
                                        <syncfusion:RangeColorMapping From="0" To="1000000" Color="#FEE5D9" />
                                        <syncfusion:RangeColorMapping From="1000000" To="10000000" Color="#FCAE91" />
                                        <syncfusion:RangeColorMapping From="10000000" To="100000000" Color="#FB6A4A" />
                                        <syncfusion:RangeColorMapping From="100000000" To="1000000000" Color="#CB181D" />
                                    </syncfusion:ShapeFillSetting.ColorMappings>
                                </syncfusion:ShapeFillSetting>
                            </syncfusion:ShapeSetting.FillSetting>
                        </syncfusion:ShapeSetting>
                    </syncfusion:ShapeFileLayer.ShapeSettings>                 
                </syncfusion:ShapeFileLayer>
            </syncfusion:SfMap.Layers>
        </syncfusion:SfMap>
    </Grid>
</Window>

C# ViewModel

using System.Collections.ObjectModel;
using System.ComponentModel;

public class Country : INotifyPropertyChanged
{
    private string name;
    private int population;

    public string Name
    {
        get { return name; }
        set { name = value; OnPropertyChanged(nameof(Name)); }
    }

    public int Population
    {
        get { return population; }
        set { population = value; OnPropertyChanged(nameof(Population)); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class MapViewModel
{
    public ObservableCollection<Country> Countries { get; set; }

    public MapViewModel()
    {
        Countries = new ObservableCollection<Country>
        {
            new Country { Name = "United States", Population = 331000000 },
            new Country { Name = "China", Population = 1400000000 },
            new Country { Name = "India", Population = 1380000000 },
            new Country { Name = "Brazil", Population = 212000000 }
        };
    }
}

一般的なパターン

パターン 1：カスタムテンプレートを使用したマーカーの追加

<syncfusion:ShapeFileLayer Uri="MyApp.ShapeFiles.usa_state.shp"
                           Markers="{Binding Cities}">
    <syncfusion:ShapeFileLayer.MarkerTemplate>
        <DataTemplate>
            <Grid>
                <Ellipse Width="12" Height="12" Fill="Red" />
                <TextBlock Text="{Binding Label}" 
                           Margin="0,15,0,0"
                           FontSize="11"
                           Foreground="Black" />
            </Grid>
        </DataTemplate>
    </syncfusion:ShapeFileLayer.MarkerTemplate>
</syncfusion:ShapeFileLayer>

public class City
{
    public string Label { get; set; }
    public string Latitude { get; set; }
    public string Longitude { get; set; }
}

パターン 2：ツールチップの実装

<syncfusion:ShapeFileLayer.ToolTipSettings>
    <syncfusion:ToolTipSetting ValuePath="Population" />
</syncfusion:ShapeFileLayer.ToolTipSettings>

パターン 3：インタラクティブなズームとパンの有効化

<syncfusion:SfMap EnableZoom="True" 
                  EnablePan="True"
                  MinZoom="1"
                  MaxZoom="20"
                  ZoomLevel="5" />

パターン 4：凡例の作成

<syncfusion:ShapeFileLayer LegendVisibility="Visible"
                           LegendPosition="BottomLeft"
                           LegendHeader="Population Density"
                           LegendIcon="Rectangle"
                           LegendColumnSplit="2" />

主なプロパティ

SfMap のプロパティ

• EnableZoom (bool)：ズーム機能を有効または無効にします
• EnablePan (bool)：パン機能を有効または無効にします
• MinZoom (double)：最小ズームレベル
• MaxZoom (double)：最大ズームレベル
• ZoomLevel (double)：現在のズームレベル
• Layers (ObservableCollection<MapLayer>)：地図レイヤーのコレクション

ShapeFileLayer のプロパティ

• Uri (string)：埋め込みリソースとしてのシェイプファイル（.shp）へのパス
• ItemsSource (IEnumerable)：バインディング用のデータソース
• ShapeIDPath (string)：シェイプとの照合に使用するデータソース内のプロパティパス
• ShapeIDTableField (string)：照合に使用する .dbf ファイル内のフィールド名
• EnableSelection (bool)：シェイプの選択を有効にします
• Markers (IEnumerable)：マーカーオブジェクトのコレクション
• LegendVisibility (Visibility)：凡例の表示／非表示
• LegendPosition (LegendPosition)：凡例の標準位置
• LegendPositionX/Y (double)：凡例のカスタム座標
• LegendHeader (string)：凡例のタイトルテキスト
• LegendIcon (LegendIcons)：凡例項目のアイコン形状
• LegendType (LegendType)：シェイプまたはバブルの凡例
• LegendColumnSplit (int)：凡例の列数
• ToolTipSettings (ToolTipSetting)：ツールチップの設定

ShapeSetting のプロパティ

• ShapeFill (Brush)：シェイプのデフォルトの塗りつぶし色
• ShapeStroke (Brush)：シェイプの枠線の色
• ShapeStrokeThickness (double)：枠線の太さ
• ShapeValuePath (string)：データ値のプロパティ
• ShapeColorValuePath (string)：色の値のプロパティ
• SelectedShapeColor (Brush)：選択したシェイプの塗りつぶし色
• SelectedShapeStroke (Brush)：選択したシェイプの枠線の色
• SelectedShapeStrokeThickness (double)：選択したシェイプの枠線の太さ
• FillSetting (ShapeFillSetting)：色のマッピング設定

BubbleMarkerSetting のプロパティ

• ValuePath (string)：バブルサイズの値を示すプロパティ
• ColorValuePath (string)：バブルの色を示すプロパティ
• MinSize (double)：バブルの最小直径
• MaxSize (double)：バブルの最大直径
• Fill (Brush)：バブルの塗りつぶし色
• Stroke (Brush)：バブルの枠線の色
• StrokeThickness (double)：バブルの枠線の太さ
• Opacity (double)：バブルの不透明度（0～1）
• AutoFillColor (bool)：色の自動割り当てを有効にします
• ColorMappings (ObservableCollection)：範囲／等値の色マッピング

一般的なユースケース

ユースケース 1：人口密度マップ

人口データを色分けした地域で表示し、詳細な統計情報を示すインタラクティブなツールチップを表示します。

ユースケース 2：営業地域の可視化

地理的な地域ごとの営業実績を表示します。バブルで売上を表し、色で成長率を示します。

ユースケース 3：選挙結果マップ

候補者ごとにカテゴリ別の色を使用し、解釈用の凡例を付けて投票結果を可視化します。

ユースケース 4：気象データダッシュボード

リアルタイムのデータ更新に対応し、地図上に気温、降水量などの気象指標を表示します。

ユースケース 5：店舗検索

カスタムマーカーで店舗の場所を示し、ユーザーがさまざまな地域を調べられるようにズーム／パンを有効にします。

ユースケース 6：建物の間取り図

カスタムシェイプファイルを使用して建物のレイアウトを描画し、部屋のラベルと占有データを可視化します。

---

次のステップ： 実装のニーズに応じて、上記の該当するリファレンスファイルを参照してください。初期設定には getting-started.md から始め、その後必要に応じてほかのリファレンスを確認してください。