Herkese merhaba arkadaslar, bu yazıda sizlere ArcGIS Mobile platformunun WPF teknolojisini kullanarak harita üzerinde geçici geometriksel çizimlerin nasıl yapılabildiğini anlatacağım.

Geçici Çizim Nedir ?

Coğrafi Bilgi Sistemi uygulamalarında harita üzerinde var olan her geometriksel nesne veritabanında binary formatta veri halinde tutulur. Geçici çizimde ise oluşturulan bu geometriksel nesneler veritabanına yansıtılmaz. Bir GraphicLayer oluşturulur ve bunu  üzerine eklenir. GraphicLayer (Görsel Katman) üzerine çizilmiş tüm nesneler temizlendiğinde, harita üzerine çizilmiş bu tüm geometriksel nesneler şekiller  kaybolurlar. Buna geçici çizim denilmektedir.

Visual Studio ile Class Library Projesi

ArcGIS Mobile eklenti yazabilmek için Class Library projesi tipinde proje açıp geliştirmenin  bu proje üzerinde yapılması gerekmektedir.

Program Files – ArcGIS – 10 – bin  dizininde yer alan ArcGIS Mobile DLL dosyalarının projeye referans olarak eklenmesı gerekmektedir. Böylece, harita ile ilgili işlemler yapılabilmektedir.

WPF ile Geçici Çizim

Geçici çizim uygulamasını geliştirirken aşağıdaki adımlar uygulanmalıdır.

1. Class Library projesi açılır.
2. ArcGIS Mobile DLL dosyaları projeye referans olarak eklenir.
3. WPF ekranı hazırlanır. Bu sayfa  MobileApplicationPage isimli sınıftan kalıtımalır.
4. Nokta, Çizgi ve Poligon çizimi için butonlar eklenir ve Click Event’leri doldurulur.
5. GraphicLayer için Helper sınıfı yazılır.

Arayüze ait kodlar aşağıdaki gibidir.

<MobileClient:MobileApplicationPage x:Class="RedLiningTask.RedLining"
    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>
        <Button Style="{DynamicResource NavigationButtonStyle}" Width="89" HorizontalAlignment="Right" Margin="0,131,13,0" Name="btnPolyLine" Click="btnPolyLine_Click" Height="56" VerticalAlignment="Top">
            <Grid Width="140">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="49" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="Polyline.png" Margin="24,6,0,4" HorizontalAlignment="Left" Grid.ColumnSpan="2" Width="39"></Image>
            </Grid>
        </Button>
        <Button Style="{DynamicResource NavigationButtonStyle}" Width="95" HorizontalAlignment="Right" Margin="0,192.52,108,0" Name="btnPoint" Click="btnPoint_Click" Height="56" VerticalAlignment="Top">
            <Grid Width="140">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="49" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="MultiPoint.png" Margin="24,6,0,4" HorizontalAlignment="Left" Grid.ColumnSpan="2" Width="39"></Image>
            </Grid>
        </Button>
        <Button Style="{DynamicResource NavigationButtonStyle}" Width="89" HorizontalAlignment="Right" Margin="0,192.52,13,0" Name="btnMultiPoint" Click="btnMultiPoint_Click" Height="56" VerticalAlignment="Top">
            <Grid Width="140">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="49" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="Point.png" Margin="24,6,0,4" HorizontalAlignment="Left" Grid.ColumnSpan="2" Width="39"></Image>
            </Grid>
        </Button>
        <Button Style="{DynamicResource NavigationButtonStyle}" Width="191" Height="56" HorizontalAlignment="Right" Margin="0,0,12,195.48" Name="btnClearAll" VerticalAlignment="Bottom" Click="btnClearAll_Click">
            <Grid Width="140">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="49" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="ClearSelection.png" Margin="10,4,0,6" HorizontalAlignment="Left" Width="39"></Image>
                <StackPanel Grid.Column="1" Margin="5">
                    <TextBlock Text="Temizle" TextWrapping="Wrap" Height="16" />
                </StackPanel>
            </Grid>
        </Button>
        <Button Margin="0,254.52,12,257.48" Name="btnFinishDraw" Style="{DynamicResource NavigationButtonStyle}" HorizontalAlignment="Right" Width="191" Click="btnFinishDraw_Click">Çizimi Bitir</Button>
        <Button Height="56" Margin="0,130.52,108,0" Name="btnPolygon" Style="{DynamicResource NavigationButtonStyle}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="95" Click="btnPolygon_Click">
            <Grid Width="140">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="49" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="Polygon.png" Margin="24,6,0,4" HorizontalAlignment="Left" Grid.ColumnSpan="2" Width="39"></Image>
            </Grid>
        </Button>
        <my:Map Name="map" xmlns:my="clr-namespace:ESRI.ArcGIS.Mobile.WPF;assembly=ESRI.ArcGIS.Mobile" Margin="0,0,209,0" />
        <Button Margin="0,6.52,12,0" Name="btnPan" Style="{DynamicResource NavigationButtonStyle}" Height="56" HorizontalAlignment="Right" VerticalAlignment="Top" Width="191" Click="btnPan_Click">
            <Grid Width="140">
                <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>
                <StackPanel Grid.Column="1" Margin="5">
                    <TextBlock Text="Kaydır" TextWrapping="Wrap" Height="16" />
                </StackPanel>
            </Grid>
        </Button>
        <Button Height="56" Margin="0,69,108,0" Name="btnZoomOut" Style="{DynamicResource NavigationButtonStyle}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="95" Click="btnZoomOut_Click"></Button>
        <Button Height="56" HorizontalAlignment="Right" Margin="0,69,12,0" Name="btnZoomIn" Style="{DynamicResource NavigationButtonStyle}" VerticalAlignment="Top" Width="90" Click="btnZoomIn_Click"></Button>
             
        <Grid Width="140" Height="49" HorizontalAlignment="Right" Margin="0,69,59,0" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="49" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="Zoom_Out.png" Margin="24,6,0,4" HorizontalAlignment="Left" Grid.ColumnSpan="2" Width="39"></Image>
        </Grid>
        <Grid Width="140" Height="49" HorizontalAlignment="Right" Margin="0,69,-38,0" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="49" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="ZoomIn.png" Margin="24,6,0,4" HorizontalAlignment="Left" Grid.ColumnSpan="2" Width="39"></Image>
        </Grid>
        <Button Height="56" HorizontalAlignment="Right" Margin="0,0,12,9" Name="btnSend" Style="{DynamicResource NavigationButtonStyle}" VerticalAlignment="Bottom" Width="191" Click="btnSend_Click">
            <Grid Width="140">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="49" Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image HorizontalAlignment="Left" Margin="10,4,0,6" Source="Mail.png" Width="39" />
                <StackPanel Grid.Column="1" Margin="5">
                    <TextBlock Height="16" Text="Kml Gönder" TextWrapping="Wrap" />
                </StackPanel>
            </Grid>
        </Button>
    </Grid>
</MobileClient:MobileApplicationPage>

WPF ekranın ön yüzüne ait ekran XAML kodlara dikkat edilecek olunursa, MobileClient:MobileApplicationPage’den kalıtım almaktadır. Ekran görüntüsü aşağıdaki gibidir.

Geçici Çizim için GraphicLayer Helper Geliştirmek

Geçici çizim için GraphicLayer oluşturup, bu GraphicLayer’i düzenlemek gerekir. Bu işi üstlenecek olan sınıf ise helper sınıfı olacaktır. GraphicLayer ile ilgili her türlü işlemden sorumlu olacaktır.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace RedLiningTask
{
    class GraphicLayerHelper
    {
        //Geçici çizim için GraphicLayer
        private static ESRI.ArcGIS.Mobile.WPF.GraphicLayer graphicLayerRedlining = null;
        //GraphicLayer üzerine çizilecek olan geometriksel nesneleri renklendirmek için,
        //ColorBrush ve Pen nesneleri üretilir.
        private static System.Windows.Media.SolidColorBrush brushRedlining;
        private static System.Windows.Media.Pen penRedlining;

        //GraphicLayer üretmekle sorumlu metod
        public static void createGraphicLayer(ESRI.ArcGIS.Mobile.WPF.Map map)
        {
            //Singleton ile GraphicLayer nesnesi oluşturulur.
            if (graphicLayerRedlining == null)
            {
                graphicLayerRedlining = new ESRI.ArcGIS.Mobile.WPF.GraphicLayer();
                //GraphicLayer ile ilgili renk ve çizim ayarları yapılandırılır.
                initializeGraphicLayer(graphicLayerRedlining);
                //Hazırlanmış olan GraphicLayer harita üzerine yeni bir katman olarak eklenir.
                map.MapGraphicLayers.Add(graphicLayerRedlining);
            }
        }
        
        public static ESRI.ArcGIS.Mobile.WPF.GraphicLayer getGraphicLayer()
        {
            return graphicLayerRedlining;
        }

        private static void initializeGraphicLayer(ESRI.ArcGIS.Mobile.WPF.GraphicLayer currentGraphicLayer)
        {
            //Çizim sırasında kırınımlar yapılmasına izin verir.
            currentGraphicLayer.DrawVertexes = true;
            //Çizilen geometrinin içini dolduracak olan renktir.
            currentGraphicLayer.Fill = getBrush();
            //Çizilen geometrinin çizgi rengini belirler.
            currentGraphicLayer.DrawingPen = getPen();
            //Çizilen geometrinin içini dolduracak olan renktir.
            currentGraphicLayer.SelectionFill = getBrush();
            currentGraphicLayer.SelectionPen = getPen();
            currentGraphicLayer.DrawVertexes = false;
        }

        public static System.Windows.Media.SolidColorBrush getBrush()
        {
            if (brushRedlining == null) { brushRedlining = new System.Windows.Media.SolidColorBrush(); }
            brushRedlining.Color = System.Windows.Media.Colors.Red;
            return brushRedlining;
        }

        public static System.Windows.Media.Pen getPen()
        {
            if (penRedlining == null) { penRedlining = new System.Windows.Media.Pen(); }
            penRedlining.Thickness = 3;
            penRedlining.Brush = getBrush();
            return penRedlining;
        }

        //GraphicLayer üzerine çizilmiş olan tüm geometrileri temizler.
        public static void resetGraphicLayer()
        {
            if (graphicLayerRedlining != null)
            {
                graphicLayerRedlining.GeometryBag.Clear();
                graphicLayerRedlining = null;
            }
        }
    }
}

Ekrana ait kod tarafı aşağıdaki gibidir. Açıklamalar ile anlatımlar yapılmıştı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.WPF;
using ESRI.ArcGIS.Mobile.MobileServices;
using ESRI.ArcGIS.Mobile.Geometries;
using Google.KML;
using System.Xml;
using System.Windows.Markup;
using AddressSearchToolkit;
using WpfEmailToolkit;

namespace RedLiningTask
{
    public partial class RedLining : MobileApplicationPage
    {
        private MobileCache mobileCache = null;
        private AddVertexSketchTool vertexSketchTool = null;
        private UaysPopUpWindow findLocationPopupWindow;
        private SendEmailWindow window;

        public RedLining()
        {
            InitializeComponent();
            this.Title = "Geçici Çizim";
            if (mobileCache == null)
            {  mobileCache = new MobileCache(); }

            //TODO Datasource infos kontrol edilecek.
            //MobileApplication.Current.Project.DataSourceInfos
            //Spatial olarak ArcGIS Server üzerinden indirilmiş olan GIS projesinin dizini belirlenir.
            string projectFolder = MobileApplication.Current.ApplicationTitle.ToString().Split('-')[1].Trim();
            string cacheFolder = MobileApplication.Current.ApplicationTitle.ToString().Split('-')[1].ToLower().Trim();
            //Cache dizini MobileCache nesnesine verilir. MobileCache nesnesi cache veriyi okuyup kullanılabilir hale getirir.
            mobileCache.StoragePath = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData).ToString() + @"\ESRI\ArcGIS Mobile\" + "P_" +projectFolder+ @"\" +cacheFolder;
            //Open ile cache verisi kullanıma açılır.
            mobileCache.Open();
            //AddRange metodu yardımıyla kullanıma hazır hale getirilmiş olan veri harita üzerine yüklenir.
            map.MapLayers.AddRange(mobileCache);

            //Yeni çizimleri yapmaya imkan veren AddVertexSketchTool sınıfından bir nesne oluşturulur.
            vertexSketchTool = new AddVertexSketchTool();
            //Harita üzerinde GraphicLayer oluşturulur ve eklenir.
            GraphicLayerHelper.createGraphicLayer(this.map);
            KmlUtil.setSpatialReference(mobileCache.SpatialReference);
            
            //Eklentiye ikon eklemeye yarar.
            Uri uri = new Uri("pack://application:,,,/RedLiningTask;Component/Redlining.png");
            this.ImageSource = new System.Windows.Media.Imaging.BitmapImage(uri);
            this.BackCommands.Add(this.BackCommand);
        }

        //Seçili cursorda geçici çizim özelliğini bırakmayı sağlar.
        private void finishRedLining()
        {
            vertexSketchTool.DetachFromSketchGraphicLayer();
        }

        //Yeni bir Polygon çizimini sağlar.
        private void btnPolygon_Click(object sender, RoutedEventArgs e)
        {
            // ESRI geometri kütüphanesinde yer alan Polygon sınıfından bır nesne üretilir.
            ESRI.ArcGIS.Mobile.Geometries.Polygon polygon = new ESRI.ArcGIS.Mobile.Geometries.Polygon();
            //Üretilen bu geometri nesnesi GraphicLayer üzerine eklenir.
            addGeometryToGraphicLayer(polygon);
        }

        //Yeni bir PolyLine çizimini sağlar.
        private void btnPolyLine_Click(object sender, RoutedEventArgs e)
        {
            // ESRI geometri kütüphanesinde yer alan PolyLine sınıfından bır nesne üretilir.
            ESRI.ArcGIS.Mobile.Geometries.Polyline polyline = new ESRI.ArcGIS.Mobile.Geometries.Polyline();
            //Üretilen bu geometri nesnesi GraphicLayer üzerine eklenir.
            addGeometryToGraphicLayer(polyline);
        }

        //Yeni bir Point çizimini sağlar.
        private void btnPoint_Click(object sender, RoutedEventArgs e)
        {
            // ESRI geometri kütüphanesinde yer alan Point sınıfından bır nesne üretilir.
            ESRI.ArcGIS.Mobile.Geometries.Point point = new ESRI.ArcGIS.Mobile.Geometries.Point();
            //Üretilen bu geometri nesnesi GraphicLayer üzerine eklenir.
            addGeometryToGraphicLayer(point);
        }

        //Yeni bir MultiPoint çizimini sağlar.
        private void btnMultiPoint_Click(object sender, RoutedEventArgs e)
        {
            // ESRI geometri kütüphanesinde yer alan MultiPoint sınıfından bır nesne üretilir.
            ESRI.ArcGIS.Mobile.Geometries.Multipoint multiPoint = new ESRI.ArcGIS.Mobile.Geometries.Multipoint();
            //Üretilen bu geometri nesnesi GraphicLayer üzerine eklenir.
            addGeometryToGraphicLayer(multiPoint);
        }

        //Harita üzerine çizilmiş olan geometriksel nesneyi GraphicLayer üzerine ekler.
        private void addGeometryToGraphicLayer(ESRI.ArcGIS.Mobile.Geometries.Geometry geometry)
        {
            //O anki harita cursoru Pan(Kaydırma) moduna çeker.
            map.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.None;
            GraphicLayer graphicLayer = GraphicLayerHelper.getGraphicLayer();
            //Geometriksel nesne GraphicLayer'ın GeometryBag isimli List'ine eklenir.
            graphicLayer.GeometryBag.Add(geometry);
            graphicLayer.SelectedGeometry = geometry;
            //Çizim başlatılır ve böylece geometriksel nesne GraphicLayer üzerine yerleştirilmiş olur.
            vertexSketchTool.AttachToSketchGraphicLayer(graphicLayer);
        }

        private void btnFinishDraw_Click(object sender, RoutedEventArgs e)
        {
            finishRedLining();
        }

        private void btnClearAll_Click(object sender, RoutedEventArgs e)
        {
            clearRedLiningDraws();
        }

        public void clearRedLiningDraws()
        {
            clearAllGeometries();
        }

        private void btnPan_Click(object sender, RoutedEventArgs e)
        {
            // Harita cursorunu Pan (Kaydırma) moduna çeker.
            map.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.Pan;
        }

        private void btnZoomOut_Click(object sender, RoutedEventArgs e)
        {
            //Harita cursorunu ZoomOut (Uzaklaş) moduna çeker.
            map.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.ZoomOut;
        }

        private void btnZoomIn_Click(object sender, RoutedEventArgs e)
        {
            //Harita cursorunu ZoomIn (Yaklaş) moduna çeker.
            map.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.ZoomIn;
        }

        private void clearAllGeometries()
        {
            if (GraphicLayerHelper.getGraphicLayer().GeometryBag != null)
            { GraphicLayerHelper.getGraphicLayer().GeometryBag.Clear(); }
        }

        protected override void OnBackCommandExecute()
        {
            MobileApplication.Current.Transition(this.PreviousPage);
        }

}

Hazırlanmış olan proje Build edilir ve oluşan DLL dosyası ArcGIS Mobile bin klasörü içine konulur.

Program çalıştırıldığında aşağıdaki gibi geçici çizim yapılabilir.

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