MapCodeX HTML5 Javascr pt Framework

Transkript

1 MapCodeX GIS Platform MapCodeX HTML5 Javascr pt Framework Kodlama standartları, tasarım lkeler, paketler, açıklamalar *Yazılım Geliştiriciler İçin v.5

2 Kısım 1 GİRİŞ Günümüzde web teknolojilerinde gelinen aşama, bulut sistemler, donanım ve işletim sistemleri ile bağımsız çalışma yöntemleri, tüm yazılım projelerinde algının değişmesini sebep olmuştur. Web tabanlı bulut çözümleri, tek noktadan yazılım dağıtımını sağlamakta, yüksek donanım ihtiyaçlarını en aza indirgemekte, donanım - yazılım yapılandırma maliyetlerini düşürmektedir. Bu sebeple, yeni nesil tüm yazılımların web tabanlı ve bulut mimaride olacağına kesin gözüyle bakılmaktadır. Bu ana fikirden yola çıkarak, web tabanlı, bulut mimaride yönetilebilir ve açık kaynak kod yapısı ile GIS api, framework ve uygulama geliştirilmesi planlanmıştır. Sözü edilen esaslar gözetilerek öncelikle bir yazılım bandı kurulmuş, ardından bu yazılım bandı kullanılarak CBS tabanlı bir framework geliştirilmiş ve bu framework ü kullanan bir uygulama üretilmiştir. Bu uygulamanın en önemli özelliği, bir eklenti yöneticisi barındırması ve bu eklenti yöneticisi sayesinde, özelleştirilmiş modüllerin yazılabilmesi olmuştur. Bu kapsamda, var olan verinin sisteme entegrasyonu ve diğer kurumların sistemi beslemesi amacıyla, CAD ve GIS yetenekleri aynı yazılım içerisinde toplanmıştır. GIS, kontrollü, güvenli, sorgulanabilir veri üretimini ve yönetimini gerektirmektedir. CAD ise kullanıcıya sınırsız çizim, düzenleme ve tasarlama yeteneği sağlanmaktadır. Günümüzde kullanıcılar bu iki yeteneği farklı yazılımlar kullanarak elde etmektedir. Bu iki alanın farklı ihtiyaçlarını tek framework altında toplayan akıllı algoritmalar, yazılımcılar için geniş bir kütüphanede sunulmuştur. Ayrıca, her türlü konumsal sorgulama, sayısal veri entegrasyonu, bu verilerin görüntülenmesi, konumsal analizler, karar verme analizleri, model analizleri ile bütün bu bilgilerin manipülasyonu ve otomasyonunu sağlanmıştır. Sistem, HTML5 tabanlı olarak tasarlanmıştır. Bu yüzden HTML5 ile yazılım dünyasına gelen bütün yetenekleri barındırmaktadır. Bunların başında ve en önemlisi, her mobil cihazda (her marka tableti, akıllı telefon) ve bilgisayarlarda (bütün tarayıcılarda), internet bağlantısı olan her yerde hızlı ve bütün yetenekleri ile birlikte çalışabilmesidir.

3 Kısım 2 TEMEL TASARIM Yazılıma ait temel mimari Şekil 1 de gösterilmiştir. Şekil 1: Temel Mimari 2

4 Mimari dört ana seviyede ifade edilebilir; alt seviyede donanım, işletim sistemi ve web sunucusu vardır. Bu seviyede, tercih edilen HTML5 teknolojisi sayesinde tüm donanım ve işletim sistemlerinden ve tüm internet sunuculularından kolaylıkla sunulabilecek. Tablet, telefon gibi taşınabilir cihazlardan ve bilgisayarlardan kullanılabilmektedir. Framework Katmanı: Base, driver, mapping, UI katmanı olmak üzere dört temel seviyeden oluşmaktadır. Her bir katman, tamamen nesne yönelimli bir yazılım metodolojisi ile %100 javascript kullanılarak kodlanmıştır. Framework katmanı birbirine bağlı yönetilebilir birçok modülü içermektedir. Framework katmanı temel GIS, CAD, veri kaynaklarına bağlanma, görüntüleme ve görsel bileşenleri içermektedir. BuiltIn Katmanı: Uygulama seviyesindeki tüm ürünlerin, orta seviyeli implementasyonlarını barındırır. Temel olarak kullanılan Zoom, Pan, Draw gibi fonksiyonları ve Paint fonksiyonlarını içerir. İlkel seviyede kullanım çağrıları olduğu için UI içermez. App & Plugin(Addon) Katmanı: CAD ve GIS özelliklerini aynı platformda birleştiren, gelişmiş düzenleme ve sorgulama araçlarına sahip web tabanlı uygulama katmanıdır. İçerdiği intelliplugin teknolojisi sayesinde, orta seviyeli geliştiricilere ve konu uzmanlarına (harita, inşaat, jeoloji...) grafik ve coğrafi işlemlerin karmaşıklığına sokmadan kolay bir geliştirme ortamı sunar. Her modül bir eklenti (addon) olarak uygulamaya eklenebilir. MapCodeX HTML5 geliştirme ortamı temel olarak iki ana bölümde, yazılım geliştiriciler tarafından kullanılabilir. Yazılım geliştiriciler Framework seviyesini alarak kendi uygulamalarını geliştirebilmekte ya da MapCodeX Web Client uygulamasına eklenti geliştirebilmektedir. Her iki durumda da birbirine bağımlı olan modülleri almak zorundadırlar. Şekil 1 de ifade edilen mimari aşağıdan yukarı doğru bağımlılıkları da ifade etmektedir. Bu durumda framework katmanı tek başına alt paketleri ile kullanılabilmektedir. Built-in katmanı ise framework katmanına ihtiyaç duymaktadır. Tüm mimari, büyük verilerin yönetilmesinde kullanılan ve genel olarak CAD ve GIS yazılım tasarımlarında da sıklıkla kullanılan MVC tasarım kalıbı kullanılarak tasarlanmıştır. Model-viewcontroller, yazılım mühendisliğinde kullanılan bir "mimari desen"dir. Kullanıcıya yüklü miktarda verinin sunulduğu karmaşık uygulamalarda, veri ve gösterimin soyutlanması esasına dayanır. Bu sayede veriler (model) ve kullanıcı arayüzü (view) birbirini etkilemeden düzenlenebilir. Model-view-controller, bu işlemi controller adı verilen ara bileşenle, veri gösterimi ve kullanıcı etkileşiminden, veri erişimi ve iş mantığını çıkarma suretiyle çözmektedir. 3

5 Temel olarak yazılımın ana esası şu şekilde açıklanır; Yazılım Provider adı verilen bileşenler ile çeşitli veri kaynak larına bağlanır. Bu kaynaklar web servisleri, veritabanları, olabilir. Provider lar layer ları üretir. Her bir layer domain nesneleri(line, polygon..) ve bunların görünüme yönelik özellikleri içerir. Her layer view ler ile ekranda veya plotter çıktısında gösterilir. Her layer, layer a ait domain nesneler ve view lar UI, Controller, Action lar ile kontrol edilir. Controller, map deki klavye ve mouse eventlerini dinleyen memory nesneleridir. Action, bir anda başlayan ve biten bu arada bir grup işi yaptıran komut kümeleridir. Aşağıdaki örnekte server a bağlanan bir katman yaratılmıştır. Katmandaki nesneleri ve etiketleri boyayan boyayıcılar katmana eklenmiş ve sonunda katmanların görünüme eklenmesi sağlanmıştır. var driver = new McxServerDriver(); var datasource = driver.opendatasource( true); var ajaxparameter = new McxAjaxParameter(); ajaxparameter.setasync(false); var getlayerresult = datasource.getlayer( Parsel,ajaxParameter); var layers = getlayerresult.getlayers(); if(layers.length < 1) return; 4

6 var layer = layers[0] map.getlayers().addlayer(layer); Kısım 3 Framework Framework katmanı kendi içerisinde 4 ana paketten oluşmuştur. Bu paketlerin birbirine olan bağımlılığı Şekil 2 de gösterilmiştir. Render işlemlerini içeren paketleri içerir Sıklıkla kullanılan UI'ları içerir -LayerManager -LayerListBox gibi... veri kaynaklarına bağlanan paketleri içeri Temel Interfaceleri ve ortak impelemantasyoml arı içieri Şekil 2: Framework Katmanı Temel Paketleri ve Birbirine Olan Bağımlılıkları 5

7 Base Katmanı: Temel ve çok kullanılan java script fonksiyonlarını, Interfaceleri, geometri ve koordinat dönüşümlerini, stil işlemlerini içeren bir katmandır. Tüm kütüphanelerden bağımsız olarak; vektör, matris, bilgisayar grafikleri, matematik, jeodezi (datum, projeksiyon, dönüşümler) işlemlerini içeren tüm uygulamalarda kullanılabilecek bir dizi kütüphaneyi barındırmaktadır. Base katmanın içerdiği paketler ve birbirine olan bağımlılıkları Şekil 3 de verilmiştir. Geometri ve koordinat dönüşümleri Geometri ve katman stil tanımları Ortak GIS Implementasyonları Factory Implementasyonları GIS interface Temel Java Script Fonksiyonları Şekil 3: Base Katmanı Paket İçerikleri ve Bağımlılıkları JsFramework: Hazır java script fonksiyonlarını ve object oriented yapıyı oluşturmak için (örneğin inheritance) gerekli sınıfları içerir. Diğer kütüphanelere bağımlılığı olmaması sebebiyle tüm projelerde kullanılabilir. CoreGIS: Temel interfaceleri içerir. Interfaceler; coordinate system, data, geometry, mapping ve style olarak 5 temel paket de toplanmıştır. Javascript ile bir interface örneği Şekil 4 de gösterilmiştir. 6

8 Şekil 4: Interface örneği Geospatial: Geometrik işlemleri ve coğrafi dönüşüm işlemlerini yapan sınıf ve paketleri içerir. Geometrik işlemlerde OGC Simple Feature Access tanımlarına uyulmuştur. Geometri transformasyon işlemlerinde ise OGC CTS tanımlarına uyulmuştur. Style: Geometrik nesneler ve katman tanımlarında kullanılmak üzere stil tanımlamalarını içeren sınıflar kullanılmaktadır. Stil tanımlamalarında OGC SE standardı dikkate alınmıştır. Common: Ortak implementasyonları içermektedir. Data, dialog, mapping, topology, usercontrol gibi alt paketler ve abstract sınıfları içermektedir. System: Base katmanının geçiş paketi olan system, base katmanındaki nesnelere direk ulaşıma alternatif sağlamak amacıyla Factory sınıflarını içermektedir. Temel olarak base katmanını kullanan diğer tüm katmanlar sadece System i referans alarak çalışabilmektedir. 7

9 Driver Katmanı Driver katmanı ya da başka bir deyişle provider katmanı veri kaynaklarına bağlanan veriyi getiren ve MapCodeX nesnelerine çeviren ara birimdir. Şekil 5 de yapılmış tüm implementasyonlar gösterilmiştir. Base katmanını refarans alarak çalışmaktadır. CAD nesnelerini üretir ve sunar. ArcGIS Google Bing OpenStreet raster servislerine bağlanır. OGC WMS,WFS Sunucularına bağlanır MapCodeX Sunucularına Bağlanır Şekil 5: MapCodeX API için default implementasyonlar MapCodeX API de harita katmanı sağlayan her sunucuya IMcxDriver interface ini implemente edilrek ulaşılır. Driver lar veri kaynaklarına bağlanan provider lar olarak da düşünülebilir. Bu yapı.net de kullanılan OLEDB yapısından farklı değildir. Driver lar veri kaynaklarına bağlanır ve veriyi layer olarak sunar. Her bir layer veri tabanı gibi düşünüldüğünde bir tablo gibidir. Layer lar feature ları tutar. Feature kavramı ise veritabanı örneğinden yola çıkılırsa, bir row a eşittir. Her row sözel ve geometrik veriyi tutan hücrelerden oluşmaktadır. Şekil 6 da veriye ulaşım şekli gösterilmiştir. 8

10 Şekil 6: MapCodeX API veriye ulaşım sistemi Mapping Katmanı Mapping katmanı kavramsal harita yapısını ve canvas implementasyonlarını içerir. Haritalar bir DIV e eklenebilen HTML nesneleridir. Kavramsal harita nesnesi katmanların çizildiği canvas ları ve marker ları tutar. Ayrıca nesne yönelimli dillerde olduğu gibi kolay event mekanizmaları içerir. Temel olarak HTML5 ve WebGL olmak üzere iki tip canvas yapısı vardır. Bu canvas yapıları üzerine providerlar ı çizen canvas yapıları eklenmiştir. Şekil 7 de map paketleri gösterilmiştir. 9

11 Kavramsal Harita Yapısını içerir HTML5 Canvas implementasyonları -VectorCanvas -TileCanvas -GridCanvas WebGL Canvas Implementasyonları Şekil 7: Map paketleri UI Katmanı MapCodeX Framework GIS verisine bağlanma, bunları haritalarda gösterme dışında GIS için kullanılan birçok görsel component ı içermektedir. Bu componentler kolaylıkla projeye eklenip kullanılabilemekte ve proje içinde birbiriyle haberleşebilmektedir. Component AccordionContentDisplayer AnchorPointEditor AttributeQueryGenerator AttributeValueSelectEditor CheckBox ColorPicker ColorSelector Amacı Akordion tipi katman/veri kaynağı gösterimleri Katman etiketleri için kayıklık aracı Öznitelik sorgu editörü Öznitelik değerleri için tekil değer seçicisi Seçim kutusu Renk ve saydamlık seçici Gelişmiş renk ve saydamlık seçici 10

12 ComboBox CommonToolBar ContextMenu CoordinateEditor DashPatternPicker DataComboBox DataGrid DateTimeBox DisplayItemView FeatureBalloon FeatureClassifyView FeatureExplorer FeatureGrid Açılır kapanır değer seçici GIS araçları içeren araç çubuğu Sağ tıklayınca açılan içerik menüsü Koordinat görüntüleme/düzenleme aracı Stil tanımları için çizgi stili seçicisi Bind edilmiş veri seçicisi GIS için özelleşmiş ızgara kontrolü Tarih zaman seçicisi Nesne seçicisi Harita nesnesi için balon göstericisi Nesneleri katmanlarına göre gruplayıcı Nesnelerin özniteliklerini ve/veya geometrilerini gösteren düzenlemeyi sağlayan gösterici Nesneleri yatay bir şekilde görüntülemeyi/editlemeyi sağlayan bileşen FeatureRelationViewer GIS nesnelerini hiyararşik olarak görüntülemeyi sağlayan bileşen FieldRelationEditor FileUploader FillEditor FontPicker FontSelector GradientLegend GradientSelectBox GroupBox GroupedSelectView ImageButton Nesne ilişkilerini açılır kapanır kutuda göstermeyi sağlayan bileşen Dosya upload ekranı Katman ve nesnelerin boyama stilleri seçim bileşeni Font seçicisi Gelişmiş font seçicisi Gradient lejantı Gradient seçim kutusu UI nesneleri gruplayıcısı Grup seçicisi Imaj içeren buton 11

13 Label LabelFormatExpressionEditor LabelFormatSelector LayerComboBox LayerFieldSelector LayerListUserControl LayerListDataSourceComboBox LayerManager LayerPropertiesPanel Layout LineSymbolizerEditor ListBox LoadingIndicator LoadingPanel MarkSelector MediaContainer NotificationBox NumberBox NumberSlider NumberSpinner OpacitySetter OpenDataSourceControl PointSymbolizerEditor PolygonSymbolizerEditor ProgressBar RadioButton Katman ya da nesne etiket seçicisi Etiket hesaplama aracı Etiket formatı seçici Katman görünüm açılır kapanır kutusu Katman öznitelik seçicisi Katman listesi görünümü Veri kaynağı seçme aracı Katman yöneticisi Katman öznitelik göstericisi Ekran yerleşim aracı Çizgi stil editörü Liste kutusu Yükleniyor göstergeci Yükleniyor paneli İşaret seçicisi Media gösterme yükleme aracı Uyarı açılır kapanır kutusu Sayısal veri giriş aracı Sayısal veri giriş aracı Sayısal veri giriş aracı (sınırlandırıcı kullanarak) Opaklık seçici Veri kaynağı açıcı Nokta stil seçici Kapalı alan sembol seçici İlerleyen durum çubuğu Değer seçici 12

14 RenderStatusWatermark ScaleComboBox AttributeSelectionFilterControl Splitter StrokeEditor SubtypeColoringEditor SubtypeEngineView SymbolizerEditor TabControl TextArea TextBox TextEditor TextSymbolizerEditor ToolBar VisibleRangeSetter WebPageViewer Wizard WorkspaceManagerView Harita render durum gösterici Ölçek giriş açılır kapanır kutusu Öznitelik seçim filter controlü UI nesneleri ayıracı Çizgi sitil seçici Alttip renklendirme aracı Alttip hesaplama aracı Semboloji editörü Tab kontrolü Serbest yazım alanı Yazım kutusu Uzun yazım kutusu Yazı sembolojisi düzenleme aracı Araç çubuğu Değer aralığı seçicisi Web sayfası görüntüleme aracı Sihirbaz Workspace yöneticisi Tablo 1: MapCodeX API UI Bileşenleri MapCodeX Framework hazır kullanılabilecek birçok dialoğu içermektedir. Bu dialoglar Tablo 2 de listelenmiştir. Dialog AddSelectedToDialog CoordinateSystemDialog DataSourceListDialog FeatureExplorerDialog Amacı Seçim kümesi dialogu Koordinat sistemi seçme dialogu Veri kaynağı seçme dialogu Nesne gezgini dialogu 13

15 FeatureGridDialog GoToXY HeatMapDialog InputBoxDialog OnlineMapDialog OpenCoverageDialog ShareWorkspaceDialog ShowCoordinateDialog WorkspaceSelectionDialog Nesne düzenleme ızgara dialogu X, Y veri giriş dialogu Yoğunluk haritası veri giriş dialogu Genel veri giriş dialogu Online haritalar açma dialogu Covarage servise bağlanma dialogu Workspace paylaşma dialogu Koordinat gösterme dialogu Workspace seiçim dialogu Tablo 2: MapCodeX Framework Diyalogları 14

16 Kısım 4 Kabuller Her yazılan sınıf Mcx ön eki ile başlamıştır. Eğer interface yazılıyor ise IMcx ile başlamıştır. Her class, interface ve enum bir dosyaya yazılmıştır. Her dosyanın en başında önce provide ardından require kısımları yazılmıştır. Dosya, dosya sistemi içinde provide ettiği konumda tanımlanmıştır. Yazılan her sınıf ayrı bir.js dosyasına çıkarılmıştır. Interface den gelen implementasyonlar constructor ın peşinden sıralanmıştır. Implement eden sınıfın özel fonksiyonları ise bunlardan sonra yazılmıştır. Event function ları dışında gerekmedikçe kodun constructor larında herhangi bir function tanımlanmamıştır Application seviyesinde yazılan kodlarda dışarıya açılacak fonksiyonların tümünde parametreler ve return değerleri açık ve anlaşılır biçimde yazılmıştır. Buna ek olarak function ın ne iş yaptığı bir cümle ile yazılmıştır. 15

17 Kısım 5 Örnekler Bu bölümde api teknolojisi ve kullanımı kodlama örnekleri ile anlatılmıştır. Kod örnekleri bu doküman ile sağlanan ekte yer almaktadır. Örnek 1- Bir Harita Nesnesinin Oluşturulması Aşağıda gösterildiği gibi bir harita yaratılıp ekrana ya da ekranda herhangi bir alana konulabilir. Harita verilen <div> nesnesinin boyutuyla aynı boyuta sahip olacaktır. Dikkat edilmesi gereken <div> in id si ile map in ismi McxMap in constructor ından alınan ismin aynı olması gerekmektedir. Haritanın başlangıç koordinat sistemi yereldir. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <script> function initializemap() //yeni bir map objesi yaratıyoruz. //parametre olarak da map in yer alacağı html nesnesinin ismini veriyoruz var map = new McxMap('map'); //boyama ve çizim işlemleri için haritaya bir renderer aracı veriyoruz (imcxrenderer interface ini implement etmeli bu class) var renderer = new McxRenderer(map); map.setrenderer(renderer); //katmanları yönetmek için bir collection veriyoruz (imcxlayercollection interface ini implement etmeli bu class) (mcxrenderer hem imcxlayercollection hem imcxrenderer implementasyonudur api kullanıcısı bu nesneleri dilerse ayrı ayrı implement edebilir) map.setlayercollection(renderer); //her bir katmanı nasıl çizdireceğine karar veren bir canvas sağlayıcı set ediyoruz. (imcxcanvasprovider implementasyonu) var canvasprovider = new McxCanvasProvider(); map.getrenderer().addcanvasprovider(canvasprovider); //kullanıcının harita ile etkileşimi sırasında nasıl davranacağına karar veren class(imcxinputhandler implementasyonu) var nativeinputhandler = new McxNativeInputHandler(map); map.setinputhandler(nativeinputhandler); //haritanın genişliği ve yüksekliğini değişir kullandığımız için (ekran küçüldüğünde vs) div in boyutlarını alıyoruz //haritaya display olarak set ediyoruz. var mapcontainer = $('#map'); number} number} (mapcontainer.height())); } initializemap(); </script> </head> <body> <div id="harita" style="position: absolute; width: 100%; height: 100%"></div> </body> </html> 16

18 function CreateOnlineMap() Örnek 2- Online Harita Ekleme //yeni bir harita objesi yaratıyoruz. //parametre olarak da map in yer alacağı html nesnesinin ismini veriyoruz var map = new McxMap('map'); //boyama ve çizim işlemleri için haritaya bir renderer aracı veriyoruz (imcxrenderer interface ini implement etmeli bu class) var renderer = new McxRenderer(map); map.setrenderer(renderer); //katmanları yönetmek için bir collection veriyoruz (imcxlayercollection interface ini implement etmeli bu class) // (mcxrenderer hem imcxlayercollection hem imcxrenderer implementasyonudur api kullanıcısı bu nesneleri dilerse ayrı ayrı implement edebilir) map.setlayercollection(renderer); //her bir katmanı nasıl çizdireceğine karar veren bir canvas sağlayıcı set ediyoruz. (imcxcanvasprovider implementasyonu) var canvasprovider = new McxCanvasProvider(); map.getrenderer().addcanvasprovider(canvasprovider); //kullanıcının harita ile etkileşimi sırasında nasıl davranacağına karar veren class(imcxinputhandler implementasyonu) var nativeinputhandler = new McxNativeInputHandler(map); map.setinputhandler(nativeinputhandler); //haritanın genişliği ve yüksekliğini değişir kullandığımız için (ekran küçüldüğünde vs) div in boyutlarını alıyoruz //haritaya display olarak set ediyoruz. var mapcontainer = $('#map'); number} number} (mapcontainer.height())); //bu aşamada tile driver yaratıp bir anlamda datasource ve connectionı yaratmasını sağlıyoruz var tiledriver = new McxTileDriver(); var datasourceresult = tiledriver.opendatasource('mom@google:m', true); var datasource = datasourceresult.getdatasource(); } McxGetLayerResult} getlayerresult * / function ongetlayersuccess(getlayerresult) //haritaya online map i ekliyoruz Array.<IMcxLayer>} var layers = getlayerresult.getlayers(); for(var t=0; t< layers.length; t++) var layer = layers[t]; map.getlayers().add(layer); } //eger eklenen katman haritanın ilk katmanı ise haritanın sınırı katmanın sınırı olur //haritaya türkiyenin sınırlarının set ediyoruz açılış ölçeği olarak map.setworld( , , , ); //gerekli işlemleri tamamlayıp katmanımızı ekledikten sonra haritaya çiz komutu gönderiyoruz map.getrenderer().paintlayer(null, null); function ongetlayerfail() 17

19 } } McxAjaxParameter} var ajaxparameter = new McxAjaxParameter(); ajaxparameter.setparameters(this, ongetlayersuccess, ongetlayerfail); datasource.getlayer('mom@google:m', ajaxparameter); Örnek 3- Cad Katmanı Ekleme var karmanismi = yeni katman ; //hafızada bir katman yaratmak için bir memory driver yaratılır var driver = new McxMemDriver(); //katmanı oluşturmak için driver a opendatasource denir var opendatasourceresult = driver.opendatasource('', true); var datasource = opendatasourceresult.getdatasource(); var layer = datasource.createlayer(layername, map.getcoordinatesystem(), McxGeometryType.Unknown, []); // katman layer collection a eklenir harita.getlayers().add(layer); // katmanı ekledikten sonra artık paintlayer diyerek haritaya boyayabiliriz harita.getrenderer().paintlayer(layer, null); }); Örnek 4- Belirteç Ekleme function createmarker() var pointsymbolizer = McxFactoryFinder.StyleFactory().createPointSymbolizer(); var starmark = new McxStarMark(); //yıldız mark ı yaratıyoruz // dolgu nesnesini yaratıyoruz var fill = McxFactoryFinder.StyleFactory().createFillFromColor('red'); //html5 renk paletini destekler fill.setopacity(0.5); starmark.setfill(fill); var stroke = McxFactoryFinder.StyleFactory().createStrokeFromColor('#800000'); starmark.setstroke(stroke); pointsymbolizer.setsymbols([starmark]); // nokta sembolojisine özel bir sembol set ediyoruz //3 adet farklı belirteç yaratıyoruz. Belirteçlere farklı geometriler fakat aynı çizim stili veriyoruz var ankaracenter = McxFactoryFinder.GeometryFactory().createPoint( , ); var ankaramarker = new McxPointMarker(ankaraCenter, McxGuid.createGuid()); ankaramarker.setsymbolizer(pointsymbolizer); harita.getmarkercollection().add(ankaramarker); var istanbulcenter = McxFactoryFinder.GeometryFactory().createPoint( , ); var istanbulmarker = new McxPointMarker(istanbulCenter, McxGuid.createGuid()); istanbulmarker.setsymbolizer(pointsymbolizer); harita.getmarkercollection().add(istanbulmarker); var izmircenter = McxFactoryFinder.GeometryFactory().createPoint( , ); var izmirmarker = new McxPointMarker(izmirCenter, McxGuid.createGuid()); izmirmarker.setsymbolizer(pointsymbolizer); harita.getmarkercollection().add(izmirmarker); 18

20 } // belirteç ekledikten sonra haritaya renderer aracı üstünden sadece geçici nesneleri (belirteç, seçim vs) //çizdirme komutu gönderiyoruz harita.getrenderer().paintnonlayer(); 19

21 Örnek 5- Action Çalıştırma Action lar kullanıcının program üstünde gerçekleştirmek istediği herhangi bir eylem için (veritabanına yazma okuma, haritada herhangi bir şey gösterme vb.) kullanılan bir kavramdır. Her Action yaratılıp işlevini gerçekleştirdikten sonra ömrü dolar. Tekrar çalıştırılması için haritanın inputhandler objesi vasıtasıyla çalıştırılması gerekmektedir. API deki bütün action lar IMcxAction interface inin implementasyonudur. IMcxAction interface i aşağıda gösterilmiştir. * Describes an instant procedure. An action ends immediately when it does its job. function IMcxAction() } * Executes this action. IMcxMap} map IMcxAction.prototype.execute = function(map) }; Bir action örneği olan McxZoomLayersAction ın kullanımı aşağıda gösterilmiştir. Bu action constructor ından geçilen katman listesindeki katmanların hepsini görebilecek şekilde haritanın ölçeğini ve sınırını değiştirir. var action = new McxZoomLayersAction(layerArray, 1); harita.getinputhandler().execute(action); 20

22 Örnek 6- Controller Set Etmek Controller lar bir kere yaratılıp haritaya verildikten sonra sürekli kullanıcı ile etkileşim halinde olan kullanıcıya cevap veren, başka bir controller kullanılana kadar da ömrüne devam eden bir yapıdır. Bütün controller IMcxController interface ini kullanır. IMcxController aşağıda verilmiştir. Örnek bir controller olan McxSelectController kullanımı aşağıda gösterilmiştir. Bu controller kullanıcının haritadaki seçim hareketlerine cevap vererek nesneleri seçim kümesine ekler. * Describes a mechanism that can contain a series of events besides an action. IMcxMouseListener} IMcxTouchListener} IMcxKeyListener} function IMcxController() } McxCursors} IMcxController.prototype.getCursor = function() }; McxCursors string} IMcxController.prototype.getDescription = function() }; * Initialize this controller and binds to the specified map, so the controller interacts with it. IMcxMap} map IMcxController.prototype.startInteraction = function(map) }; * Terminates the interaction between controller and map. (delete markers, close dialogs, etc.) IMcxController.prototype.endInteraction = function() }; * Paints the necessary items if this controller needs to. IMcxDrawContext} dc IMcxController.prototype.paint = function(dc) }; string} type boolean} IMcxController.prototype.isInstanceOf = function(type) }; HTMLElement jqueryobject string} IMcxController.prototype.getOptionUI = function() 21

23 }; var controller = new McxSelectController(); Harita.getInputHandler().setControler(controller); Örnek 7- Controller İnheritance Örneği Kod miktarını azaltmak daha güvenli ve az sorunlu kod yazmak için api deki var olan controller dan inheritance yoluyla yeni controller lar üretmek genelde tercih edilen ve oldukça faydalı bir yöntemdir. Aşağıda yer alan kodda bu kullanımın bir örneği mevcuttur. Kırmızı ile işaretlenmiş satırlara özellikle dikkat edilmesi gerekmektedir. Javascript in inheritance yeteneği olmadığından API nin alt yapı kodlarının (JsFramework paketi) kullanılması gerekmektedir. McxSelectController} function McxSelectAndDeletePolygonsController() //object oriented kodlamayla benzer şekilde tepe sınıfın constructorını çağırıyoruz. mcx.base(this); McxSelectController} this.base = this; boolean} this.base.canset = false; McxApplyMode number} this.base.applymode = McxApplyMode.Select; McxSelectToolMode number} this.base.selecttoolmode = McxSelectToolMode.Fence; } this.base.sethoveruse(true); //base sınıfın fonksiyonların çağırmak için bu çağrının yapılması gerekmektedir. mcx.inherits(mcxselectanddeletepolygonscontroller, McxSelectController); McxSelectResult} selecteventargs McxSelectAndDeletePolygonsController.prototype.onSelectFeaturesSuccess = function(selecteventargs) var features = selecteventargs.getfeatures(); var filteredfeatures = []; for(var i = 0 ; i < features.length ; i++) var geometry = features[i].getgeometry(); 22

24 if(geometry.isinstanceof(mcxgeometrytype.polygon)) filteredfeatures.push(features[i]); } if(filteredfeatures.length <= 0) return; var filteredselectresult = new McxSelectResult(selectEventArgs.getFilter(), filteredfeatures, selecteventargs.getlayer(), selecteventargs.getargs()); //fonksiyon override ettiğimizde tepe sınıfın fonksiyonunun çağrılması istendiğinde böyle bir cağrı yapmalıyız //bu örnekte tepe sınıfın fonksiyonuna giden parametreleri de manüpüle ediyoruz. //nesneleri filtreleyip sadece polygon nesnelerinin seçilmesini sağlıyoruz McxSelectAndDeletePolygonsController.superClass_.onSelectFeaturesSuccess.call(this, filteredselectresult); }; * This occurs when a user presses a mouse button over an element. McxMouseEventArgs} mouseeventargs McxSelectAndDeletePolygonsController.prototype.onMouseDown = function(mouseeventargs) //fonksiyon override ettiğimizde tepe sınıfın fonksiyonunun çağrılması istendiğinde böyle bir cağrı yapmalıyız McxDeleteFeaturesController.superClass_.onMouseDown.call(this, mouseeventargs); if(mouseeventargs.getbutton()!= 'right') return; if(!mcxselectionhelper.instance.checkselection(this.base.map)) return; var selection = McxSelectionHelper.instance.getSelection(this.base.map); var deletefeaturesaction = new McxDeleteFeatureAction(selection); deletefeaturesaction.execute(this.base.map); 23

25