Herkese merhaba arkadaşlar. Bir önceki yazıda WPF ortamında offline harita verisini görüntülemeyi anlatmıştım. Bu yazıda ise var olan proje üzerine ZoomOut(Harita üzerinde uzaklaş), ZoomIn (Harita üzerinde yakınlaş) ve Pan (Harita üzerinde  kaydır) işlemlerinin nasıl yapıldığından bahsedeceğim.

Zoom Out : Harita üzerinde belli bir ölçek dahilinde  uzaklaşmayı sağlar. Haritaya daha geniş bir  açıdan bakmanıza yardımcı olur.

Zoom In : Harita üzerinde belli bir ölçek dahilinde  yakınlaşmayı sağlar.Harita üzerinde daha fazla detay görmek istediğiniz alana yakınlaşmanızı sağlar.

Pan : Harita üzerinde görmek istediğiniz alanı sağa sola aşağı yukarı kaydırarak görmenizi sağlar.

İkon eklesek mi ?

Projede kullanılacak olan Zoom Out, Zoom In ve Pan gibi işlemler için oluşturulacak olan butonlara ikon eklenir. Aşağıdaki gibi indirilmiş olan PNG dosyaları projeye eklenir. “Properties” panelinde  “Build Action” özelliği “Resource” olarak  ayarlanmalıdır. Böyle resim dosyası kaynak olarak kullanılır. Resim dosyasını harici bir dosya dizininden aramayacaktır.

Ardından XAML dosyası, yani WPF ekranının arayüz tasarım kodları aşağıdaki gibidir. Butonların Content’leri “Grid” ve  “Image”  bileşenlerinden oluşacaktır. Böylece klasik bir text yerine içeriği zengin bir ikon butonun içeriği olacaktır.

<MobileClient:MobileApplicationPage x:Class="OfflineMap.Map"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:MobileClient = "clr-namespace:ESRI.ArcGIS.Mobile.Client;assembly=ESRI.ArcGIS.Mobile.Client"
    Height="568" Width="1370">
    <Grid>
        <my:Map Name="map" xmlns:my="clr-namespace:ESRI.ArcGIS.Mobile.WPF;assembly=ESRI.ArcGIS.Mobile" />
        <Button Height="52" HorizontalAlignment="Right" Name="btnZoomIn" VerticalAlignment="Top" Width="75" Opacity="0.5" Click="btnZoomIn_Click">
            <!-- 
                Butonun Contentine Grid bileşeni eklenir.
                Grid içine alt eleman olarak Image eklenir.
                Kullanılacak olan Image'in Source'u "Resource" olarak seçilmelidir.
            -->
            <Grid Width="60">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="49" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="Zoom_In.png" Margin="10,4,0,6" HorizontalAlignment="Left" Width="39"></Image>
            </Grid>
        </Button>
        <Button Height="52" HorizontalAlignment="Right" Margin="0,68,0,0" Name="btnZoomOut" Opacity="0.5" VerticalAlignment="Top" Width="75" Click="btnZoomOut_Click">
            <Grid Width="60">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="49" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="Zoom_Out.png" Margin="10,4,0,6" HorizontalAlignment="Left" Width="39"></Image>
            </Grid>
        </Button>        
        <Button HorizontalAlignment="Right" Margin="0,137,0,0" Name="btnPan" Opacity="0.5" Width="75" Height="52" VerticalAlignment="Top" Click="btnPan_Click">
            <Grid Width="60">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="49" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="Pan.png" Margin="10,4,0,6" HorizontalAlignment="Left" Width="39"></Image>
            </Grid>
        </Button>
    </Grid>
</MobileClient:MobileApplicationPage>

Görsel arayüzü tamamladıktan sonra, kaynak kod tarafına gidilip Butonlara ait “Click” olayları yazılır.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using ESRI.ArcGIS.Mobile.Client;
using ESRI.ArcGIS.Mobile.MobileServices;
using ESRI.ArcGIS.Mobile.Geometries;

namespace OfflineMap
{
    public partial class Map : MobileApplicationPage
    {
        // Harita verisini offline olarak haritaya yuklemeye yarayan mobil cache nesnesi tanimlanir.
        private MobileCache mobileCache;
        public Map()
        {
            InitializeComponent();
            // MobileCache sinifindan nesne yaratilir.
            mobileCache = new MobileCache();
            // Mobil cache'in bulundugu dosya dizini belirtilir.
            mobileCache.StoragePath = @"C:\Users\uays\AppData\Local\ESRI\ArcGIS Mobile\P_firat\firat";
            // Offline harita verisi "Open" metodu ile okumak icin acilir.
            mobileCache.Open();
            // Acilan cache icinde yer alan spatial katmanlar harita uzerine "AddRange" metodu ile eklenir.
            map.MapLayers.AddRange(mobileCache);
            // Haritanin o anki gorunen cerceve boyutu alinir.
            // 0.75 kati kadar cerceve boyutu kucultulur.
            Envelope envelope = map.GetExtent().Resize(0.75);
            // Kucultulmus yeni cerceve boyutu haritanin yeni cercevesi olarak setlenir.
            map.SetExtent(envelope);
            // Ekran uzerine "Geri Don" tusu eklenir.
            this.BackCommands.Add(this.BackCommand);
        }

        private void btnZoomIn_Click(object sender, RoutedEventArgs e)
        {
            // Harita üzerinde Zoom Out (Uzaklaşmayı) sağlar.
            this.map.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.ZoomIn;
        }

        private void btnZoomOut_Click(object sender, RoutedEventArgs e)
        {
            // Harita üzerinde Zoom In (Yakınlaşmayı) sağlar.
            this.map.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.ZoomOut;
        }

        private void btnPan_Click(object sender, RoutedEventArgs e)
        {
            // Harita üzerinde Pan (Kaydırma) işlemini yapabilmeyi sağlar.
            this.map.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.Pan;
        }
    }
}

Ardından yeni üretilen DLL dosyası “C:\Program Files\ArcGIS\Mobile\10.0\bin”  klasörü içine kopyalanır ve replace edilir.

Uygulama çalıştırıldığında aşağıdaki gibi yeni işlevleri kullanma şansına sahipsiniz.

Yukarıda Zoom In işlemi yapılmaktadır. Aşağıdaki resimde Zoom In işleminden sonra haritanın mevcut durumudur.

Ardından Zoom Out işlemi yapılır ve öncesi ve sonrası aşağıdaki gibidir.

Umarım yararlı bir yazı olmuştur. Bir sonraki makalemde görüşmek dileğiyle ...

Batuhan Düzgün

Bilgisayar Mühendisi

Endüstri Mühendisi