33
Syncfusion의 SfMap 컨트롤을 사용하여 WPF 애플리케이션에서 맵 차트를 구현하는 방법을 예제로 설명하겠습니다. 이를 통해 지리적 데이터를 시각화할 수 있습니다. 위에 제공한 코드와 함께 예시 설명을 단계별로 진행합니다.
1. 프로젝트 설정
Syncfusion의 SfMap을 사용하려면 Syncfusion WPF 패키지를 설치해야 합니다.
NuGet 패키지 설치
패키지 관리자 콘솔에서 다음 명령을 실행하여 Syncfusion WPF 패키지를 설치합니다:
Install-Package Syncfusion.SfMaps.WPF또는 NuGet 패키지 관리자에서 Syncfusion.SfMaps.WPF를 검색하고 설치합니다.
2. ViewModel 생성
맵에 바인딩할 데이터를 포함하는 ViewModel을 생성합니다.
ViewModel.cs
using System.Collections.ObjectModel;
namespace SyncfusionMapExample
{
public class ViewModel
{
public ObservableCollection<CountryData> CountryData { get; set; }
public ViewModel()
{
CountryData = new ObservableCollection<CountryData>
{
new CountryData { CountryCode = "USA", CountryName = "United States" },
new CountryData { CountryCode = "CAN", CountryName = "Canada" },
new CountryData { CountryCode = "MEX", CountryName = "Mexico" },
};
}
}
public class CountryData
{
public string CountryCode { get; set; }
public string CountryName { get; set; }
}
}설명
CountryData: 국가 코드와 국가 이름을 포함하는 데이터 클래스입니다.ViewModel:CountryData목록을 생성하고 초기화합니다.
3. XAML 코드
이제 ViewModel과 Syncfusion의 SfMap 컨트롤을 사용하여 지도를 구현합니다.
MainWindow.xaml
<Window x:Class="SyncfusionMapExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SyncfusionMapExample"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
Title="Syncfusion Map Example" Height="600" Width="800">
<Grid>
<!-- ViewModel Binding -->
<Grid.DataContext>
<local:ViewModel />
</Grid.DataContext>
<!-- Syncfusion Map -->
<syncfusion:SfMap>
<syncfusion:SfMap.Layers>
<!-- Shape File Layer -->
<syncfusion:ShapeFileLayer ItemsSource="{Binding CountryData}"
ShapeIDPath="CountryCode"
ShapeIDTableField="ADM0_A3_US"
Uri="shp_DataPath">
<!-- Shape Settings -->
<syncfusion:ShapeFileLayer.ShapeSettings>
<syncfusion:ShapeSetting ShapeValuePath="CountryName">
<syncfusion:ShapeSetting.FillSetting>
<syncfusion:ShapeFillSetting AutoFillColors="True" />
</syncfusion:ShapeSetting.FillSetting>
</syncfusion:ShapeSetting>
</syncfusion:ShapeFileLayer.ShapeSettings>
</syncfusion:ShapeFileLayer>
</syncfusion:SfMap.Layers>
</syncfusion:SfMap>
</Grid>
</Window>MainWindow.xaml.cs
using System.Collections.ObjectModel;
namespace SyncfusionMapExample
{
public class CountryInfo
{
public string ADM0_A3_US { get; set; } // 국가 코드
public string SOVEREIGNT { get; set; } // 국가 이름
}
public class ViewModel
{
public ObservableCollection<CountryInfo> CountryData { get; set; }
public ViewModel()
{
CountryData = new ObservableCollection<CountryInfo>
{
new CountryInfo { ADM0_A3_US = "IDN", SOVEREIGNT = "Indonesia" },
new CountryInfo { ADM0_A3_US = "MYS", SOVEREIGNT = "Malaysia" },
new CountryInfo { ADM0_A3_US = "CHL", SOVEREIGNT = "Chile" },
new CountryInfo { ADM0_A3_US = "BOL", SOVEREIGNT = "Bolivia" },
new CountryInfo { ADM0_A3_US = "PER", SOVEREIGNT = "Peru" }
};
}
}
}
4. 코드 설명
ViewModel 바인딩:
<Grid.DataContext>
<local:ViewModel />
</Grid.DataContext>
ViewModel이DataContext로 설정되어 지도에 표시될 데이터를 제공합니다.
Syncfusion SfMap:
- ShapeFileLayer를 사용하여 Shapefile(.shp)을 로드하고 국가 경계를 표시합니다.
Uri: Shapefile의 경로를 설정합니다.
데이터 바인딩:
ItemsSource="{Binding CountryData}":ViewModel의CountryData와 바인딩합니다.- **
ShapeIDPath="CountryCode"**와 **ShapeIDTableField="ADM0_A3_US"**를 통해 Shapefile의 도형과 데이터 항목을 매핑합니다.
Shape 설정:
ShapeValuePath="CountryName": 각 도형에 국가 이름을 적용합니다.AutoFillColors="True": 자동으로 색상을 할당하여 시각적으로 구분합니다.
5. 실행 결과
예상 출력
- 윈도우가 실행되면 지도에 미국, 캐나다, 멕시코 등의 국가가 자동으로 색상이 적용된 상태로 표시됩니다.
- 지도는 Shapefile에서 정의된 국가 경계를 기반으로 그려집니다.
6. 주의사항 및 팁
- Shapefile 경로 확인:
Uri속성에 설정된 Shapefile 경로가 정확해야 합니다. 경로가 잘못되면 지도가 표시되지 않습니다.
- Syncfusion 라이선스:
- Syncfusion은 상업용 라이선스가 필요합니다. 무료 커뮤니티 버전이나 평가판을 사용할 수 있습니다.
- Shapefile 관련 파일:
.shp파일 외에도.shx,.dbf파일이 필요합니다. 이 파일들이 동일한 디렉토리에 있어야 Shapefile이 제대로 로드됩니다.
이 예제를 바탕으로 다양한 지리적 데이터를 시각화하고 사용자 정의를 추가해보세요!
실행사진
