XamMap で地域ごとの値の大きさに応じて色を塗り分けるコロプレス図を表示するには、MapLayer の FillMode を Choropleth に設定し、Brushes と ValueScale で色と値の対応を指定します。

XamMap の設定

地図の形はシェイプファイルから読み込み、色分けに使う値は独自のデータから割り当てます。XAML では MapLayer を定義し、DataMapping にデータ側のキー(Name=Code)と色分けに使う値(Value=Population)を指定します。

<ig:XamMap x:Name="JapanMap" ...>
    <ig:XamMap.Layers>
        <ig:MapLayer x:Name="PrefectureLayer"
                     LayerName="prefectureLayer"
                     DataMapping="Name=Code; Value=Population">
            ...
        </ig:MapLayer>
    </ig:XamMap.Layers>
</ig:XamMap>

コードビハインドでは、ShapeFileReader でシェイプファイルを読み込み、MapLayer.Reader に設定します。このとき DataMapping に Name=CODE を指定し、シェイプファイルの CODE 列を各地図要素の Name として読み込みます。続いて DataSource にデータを渡して DataBind() を呼び出すと、同じ Name を持つ地図要素に値が Value として割り当てられます。

private void LoadPrefectureShapes()
{
    var reader = new ShapeFileReader
    {
        Uri = global::System.IO.Path.Combine(AppContext.BaseDirectory, "Shapefiles", "japan_prefectures"),
    };

    var converter = new DataMapping.Converter();
    reader.DataMapping = converter.ConvertFromString("Name=CODE") as DataMapping;

    PrefectureLayer.Reader = reader;
}

private void BindPopulation(MainViewModel viewModel)
{
    PrefectureLayer.DataSource = viewModel.Prefectures;
    PrefectureLayer.DataBind();
}

FillMode(Choropleth)の使用

FillMode="Choropleth" を設定すると、各地図要素の Value に応じて、Brushes に並べた色から塗りつぶしの色が選ばれます。Brushes には、値の小さい順に色を並べます。

値と色の対応は ValueScale で決めます。このサンプルの人口は一部の地域に大きく偏っているため、線形のスケールではほとんどの地域が最も薄い色になってしまいます。そこで LogarithmicScale(対数スケール)を使い、IsAutoRange="False" としたうえで MinimumValue と MaximumValue で範囲を指定しています。また、MapColorSwatchPane の LayerName に対象のレイヤー名を指定すると、色と値の対応を示す凡例を表示できます。

<ig:XamMap x:Name="JapanMap" ...>
    <ig:XamMap.Layers>
        <ig:MapLayer x:Name="PrefectureLayer"
                     LayerName="prefectureLayer"
                     FillMode="Choropleth"
                     DataMapping="Name=Code; Value=Population">
            <ig:MapLayer.Brushes>
                <ig:BrushCollection>
                    <SolidColorBrush Color="#FFEFF3FF" />
                    <SolidColorBrush Color="#FFBDD7E7" />
                    <SolidColorBrush Color="#FF6BAED6" />
                    <SolidColorBrush Color="#FF3182BD" />
                    <SolidColorBrush Color="#FF08519C" />
                </ig:BrushCollection>
            </ig:MapLayer.Brushes>
            <ig:MapLayer.ValueScale>
                <ig:LogarithmicScale IsAutoRange="False"
                                     MinimumValue="500000"
                                     MaximumValue="15000000" />
            </ig:MapLayer.ValueScale>
        </ig:MapLayer>
    </ig:XamMap.Layers>

    <ig:MapColorSwatchPane ig:XamDock.Edge="InsideTop" ...
                           LayerName="prefectureLayer"
                           DisplayMode="Range" />
</ig:XamMap>

実行結果

47 都道府県が人口の大きさに応じて、薄い青から濃い青までの 5 段階で塗り分けられます。地図の上部には、色と値の範囲の対応を示す凡例が表示されます。

Tagged:

製品について

Ultimate UI for WPF