WPF - GMap

WPF에서 GMap을 사용하는 과정입니다.

 

GMap은 지도 라이브러리로 Google Map 뿐 아니라 다양한 지도 서비스를 사용할 수 있습니다.

간단한 설정만으로 훌륭한 지도 컨트롤을 사용할 수 있어서 매우 놀라웠습니다.

예전에 Binary로 된  지도 데이터를 읽어서 DirectX로 힘들게 그려주던 생각이 나서 조금은 허무하기도 했습니다.

다만 인터넷에 연결되어 있어야 정상적인 사용이 가능합니다.

 

제가 사용한 방식에 대해서 공유합니다.

 

 

 

 

 

 

프로젝트 생성 및 Nuget package 설치

Visual Studio에서 WPF 프로젝트를 생성합니다.

.NET8을 사용했습니다.

 

nuget 관리자에서

GMap.NET.Core를 설치합니다.

GMap.NET.WinPresentation도 함께 설치합니다.

두 package모두 2.1.7 버전을 사용했습니다.

 

 

 

 

 

 

GoogleMap

 

XAML

 

<Window x:Class="GMap_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GMap_Test"
        xmlns:gmap="clr-namespace:GMap.NET.WindowsPresentation;assembly=GMap.NET.WindowsPresentation"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <gmap:GMapControl x:Name="_gmap"/>
    </Grid>
</Window>

 

7 Line : xmlns:gmap="clr-namespace:GMap.NET.WindowsPresentation;assembly=GMap.NET.WindowsPresentation"

11 Line : <gmap:GMapControl x:Name="_gmap"/>

 

두 줄을 추가합니다.

 

 

 

 

Code behind

 

코드 비하인드를 사용하는 것을 좋아하지 않지만 어쩔 수 없습니다.

GMap이 Binding을 원활하게 지원하지 않기 때문에 Dependency Property나 Code behind를 사용해야 합니다.

좋은 방법이 있으신 분은 공유해 주시면 좋겠습니다.

 

F7을 눌러 코드 비하인드로 전환하고

 

public MainWindow()
{
    InitializeComponent();
    _gmap.MapProvider = GMapProviders.GoogleMap;
}

 

MainWindow() 생성자를 위와 같이 수정합니다.

 

GMap에서 GoogleMap을 사용하겠다는 코드입니다.

실행하면 이것만으로도 지도가 나타납니다.

정말 좋네요.

 

 

 

 

 

 

 

 

 

대한민국, 서울, 강남으로

 

 

조금 더 우리가 사용하는 지도답게 수정해 봅니다.

 

XAML

    <Grid>
        <gmap:GMapControl x:Name="_gmap"
                            MinZoom="2"
                            MaxZoom="17"     />
    </Grid>

 

CodeBehind

public MainWindow()
{
    InitializeComponent();
    
    _gmap.DragButton = MouseButton.Left;
    _gmap.MapProvider = GMapProviders.GoogleMap;
    _gmap.Position = new PointLatLng(37.497872, 127.0275142);
    _gmap.Zoom = 19; 
}

 

위 코드를 적용하면

지도는 구글맵을 사용하고

시작 위치는 대한민국 서울 강남, 

zoom level은 19로 강남의 거리가 제법 상세하게 보입니다.

 

GMap 실행화면

 

 

zoom level에 따른 pixel 당 거리는 아래와 같습니다.

switch (zoomLevel)
{
    case 0: meter = 156543.03392; break;
    case 1: meter = 78271.51696; break;
    case 2: meter = 39135.75848; break;
    case 3: meter = 39135.75848; break;
    case 4: meter = 9783.93962; break;
    case 5: meter = 4891.96981; break;
    case 6: meter = 2445.98490; break;
    case 7: meter = 1222.99245; break;
    case 8: meter = 611.49622; break;
    case 9: meter = 305.74811; break;
    case 10: meter = 152.87405; break;
    case 11: meter = 76.43702; break;
    case 12: meter = 38.21851; break;
    case 13: meter = 19.10925; break;
    case 14: meter = 9.55462; break;
    case 15: meter = 4.77731; break;
    case 16: meter = 2.38865; break;
    case 17: meter = 1.19432; break;
    case 18: meter = 0.59716; break;
    case 19: meter = 0.29858; break;
}

 

 

마무리

대단히 간단하지만 강력한 GMap 라이브러리의 맛보기였습니다.

이외에도 확대, 축소, Marker 등록 등 다양한 기능이 있는데 포스트를 이어서 할지는 조금 고민해 보겠습니다.

현재 진행 중인 프로젝트의 일부분만 공유합니다. (보안 문제)

 

다양한 Marker