MapCodeX GIS Platform
MapCodeX HTML5 Javascrˉpt
Framework
Kodlama standartları, tasarım lkeler, paketler,
açıklamalar
*Yazılım Geliştiriciler İçin v.5
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.
Kısım
2 TEMEL TASARIM
Yazılıma ait temel mimari Şekil 1’de gösterilmiştir.
Şekil 1: Temel Mimari
2
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
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(“http:xyz.com”, true);
var ajaxParameter = new McxAjaxParameter();
ajaxParameter.setAsync(false);
var getLayerResult = datasource.getLayer(“Parsel”,ajaxParameter);
var layers = getLayerResult.getLayers();
if(layers.length < 1)
return;
4
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
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
Sıklıkla kullanılan
UI'ları içerir
-LayerManager
-LayerListBox
gibi....
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
Ortak GIS
Implementasyonları
Geometri ve
katman stil
tanımları
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
Ş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
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
Ş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
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
Amacı
AccordionContentDisplayer
Akordion tipi katman/veri kaynağı gösterimleri
AnchorPointEditor
Katman etiketleri için kayıklık aracı
AttributeQueryGenerator
Öznitelik sorgu editörü
AttributeValueSelectEditor
Öznitelik değerleri için tekil değer seçicisi
CheckBox
Seçim kutusu
ColorPicker
Renk ve saydamlık seçici
ColorSelector
Gelişmiş renk ve saydamlık seçici
10
ComboBox
Açılır kapanır değer seçici
CommonToolBar
GIS araçları içeren araç çubuğu
ContextMenu
Sağ tıklayınca açılan içerik menüsü
CoordinateEditor
Koordinat görüntüleme/düzenleme aracı
DashPatternPicker
Stil tanımları için çizgi stili seçicisi
DataComboBox
Bind edilmiş veri seçicisi
DataGrid
GIS için özelleşmiş ızgara kontrolü
DateTimeBox
Tarih zaman seçicisi
DisplayItemView
Nesne seçicisi
FeatureBalloon
Harita nesnesi için balon göstericisi
FeatureClassifyView
Nesneleri katmanlarına göre gruplayıcı
FeatureExplorer
Nesnelerin özniteliklerini ve/veya geometrilerini gösteren
düzenlemeyi sağlayan gösterici
FeatureGrid
Nesneleri yatay bir şekilde görüntülemeyi/editlemeyi
sağlayan bileşen
FeatureRelationViewer
GIS nesnelerini
sağlayan bileşen
FieldRelationEditor
Nesne ilişkilerini açılır kapanır kutuda göstermeyi
sağlayan bileşen
FileUploader
Dosya upload ekranı
FillEditor
Katman ve nesnelerin boyama stilleri seçim bileşeni
FontPicker
Font seçicisi
FontSelector
Gelişmiş font seçicisi
GradientLegend
Gradient lejantı
GradientSelectBox
Gradient seçim kutusu
GroupBox
UI nesneleri gruplayıcısı
GroupedSelectView
Grup seçicisi
ImageButton
Imaj içeren buton
11
hiyararşik
olarak
görüntülemeyi
Label
Katman ya da nesne etiket seçicisi
LabelFormatExpressionEditor
Etiket hesaplama aracı
LabelFormatSelector
Etiket formatı seçici
LayerComboBox
Katman görünüm açılır kapanır kutusu
LayerFieldSelector
Katman öznitelik seçicisi
LayerListUserControl
Katman listesi görünümü
LayerListDataSourceComboBox
Veri kaynağı seçme aracı
LayerManager
Katman yöneticisi
LayerPropertiesPanel
Katman öznitelik göstericisi
Layout
Ekran yerleşim aracı
LineSymbolizerEditor
Çizgi stil editörü
ListBox
Liste kutusu
LoadingIndicator
Yükleniyor göstergeci
LoadingPanel
Yükleniyor paneli
MarkSelector
İşaret seçicisi
MediaContainer
Media gösterme yükleme aracı
NotificationBox
Uyarı açılır kapanır kutusu
NumberBox
Sayısal veri giriş aracı
NumberSlider
Sayısal veri giriş aracı
NumberSpinner
Sayısal veri giriş aracı (sınırlandırıcı kullanarak)
OpacitySetter
Opaklık seçici
OpenDataSourceControl
Veri kaynağı açıcı
PointSymbolizerEditor
Nokta stil seçici
PolygonSymbolizerEditor
Kapalı alan sembol seçici
ProgressBar
İlerleyen durum çubuğu
RadioButton
Değer seçici
12
RenderStatusWatermark
Harita render durum gösterici
ScaleComboBox
Ölçek giriş açılır kapanır kutusu
AttributeSelectionFilterControl
Öznitelik seçim filter controlü
Splitter
UI nesneleri ayıracı
StrokeEditor
Çizgi sitil seçici
SubtypeColoringEditor
Alttip renklendirme aracı
SubtypeEngineView
Alttip hesaplama aracı
SymbolizerEditor
Semboloji editörü
TabControl
Tab kontrolü
TextArea
Serbest yazım alanı
TextBox
Yazım kutusu
TextEditor
Uzun yazım kutusu
TextSymbolizerEditor
Yazı sembolojisi düzenleme aracı
ToolBar
Araç çubuğu
VisibleRangeSetter
Değer aralığı seçicisi
WebPageViewer
Web sayfası görüntüleme aracı
Wizard
Sihirbaz
WorkspaceManagerView
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
Amacı
AddSelectedToDialog
Seçim kümesi dialogu
CoordinateSystemDialog
Koordinat sistemi seçme dialogu
DataSourceListDialog
Veri kaynağı seçme dialogu
FeatureExplorerDialog
Nesne gezgini dialogu
13
FeatureGridDialog
Nesne düzenleme ızgara dialogu
GoToXY
X, Y veri giriş dialogu
HeatMapDialog
Yoğunluk haritası veri giriş dialogu
InputBoxDialog
Genel veri giriş dialogu
OnlineMapDialog
Online haritalar açma dialogu
OpenCoverageDialog
Covarage servise bağlanma dialogu
ShareWorkspaceDialog
Workspace paylaşma dialogu
ShowCoordinateDialog
Koordinat gösterme dialogu
WorkspaceSelectionDialog
Workspace seiçim dialogu
Tablo 2: MapCodeX Framework Diyalogları
14
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
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');
map.setDisplay(/** @type {number} */ (mapContainer.width()), /** @type {number} */ (mapContainer.height()));
}
initializeMap();
</script>
</head>
<body>
<div id="harita" style="position: absolute; width: 100%; height: 100%"></div>
</body>
</html>
16
•
Örnek 2- Online Harita Ekleme
function CreateOnlineMap()
{
//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');
map.setDisplay(/** @type {number} */ (mapContainer.width()), /** @type {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([email protected]:m', true);
var dataSource = dataSourceResult.getDataSource();
/**
* @param {McxGetLayerResult} getLayerResult
*/
function onGetLayerSuccess(getLayerResult)
{
//haritaya online map i ekliyoruz
/**
* @private
* @type {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(21.859076433121025, 33.49920382165604, 47.59255573248409, 44.12420382165604);
//gerekli işlemleri tamamlayıp katmanımızı ekledikten sonra haritaya çiz komutu gönderiyoruz
map.getRenderer().paintLayer(null, null);
}
function onGetLayerFail()
{
17
}
/**
* @private
* @type {McxAjaxParameter}
*/
var ajaxParameter = new McxAjaxParameter();
ajaxParameter.setParameters(this, onGetLayerSuccess, onGetLayerFail);
dataSource.getLayer([email protected]: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(32.83091162420381,
39.92940137340764);
var ankaraMarker = new McxPointMarker(ankaraCenter, McxGuid.createGuid());
ankaraMarker.setSymbolizer(pointSymbolizer);
harita.getMarkerCollection().add(ankaraMarker);
var istanbulCenter = McxFactoryFinder.GeometryFactory().createPoint(28.991932474124162,
41.0000435410032);
var istanbulMarker = new McxPointMarker(istanbulCenter, McxGuid.createGuid());
istanbulMarker.setSymbolizer(pointSymbolizer);
harita.getMarkerCollection().add(istanbulMarker);
var izmirCenter = McxFactoryFinder.GeometryFactory().createPoint(27.139324990047694,
38.415698397691074);
var izmirMarker = new McxPointMarker(izmirCenter, McxGuid.createGuid());
izmirMarker.setSymbolizer(pointSymbolizer);
harita.getMarkerCollection().add(izmirMarker);
18
// belirteç ekledikten sonra haritaya renderer aracı üstünden sadece geçici nesneleri (belirteç, seçim vs)
//çizdirme komutu gönderiyoruz
harita.getRenderer().paintNonLayer();
}
19
• Ö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.
* @interface
*/
function IMcxAction()
{
}
/**
* Executes this action.
* @param {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
• Ö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.
* @interface
* @extends {IMcxMouseListener}
* @extends {IMcxTouchListener}
* @extends {IMcxKeyListener}
*/
function IMcxController()
{
}
/**
* @return {McxCursors}
*/
IMcxController.prototype.getCursor = function()
{
};
/**
* @return {McxCursors | string}
*/
IMcxController.prototype.getDescription = function()
{
};
/**
* Initialize this controller and binds to the specified map, so the controller interacts with it.
* @param {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.
* @param {IMcxDrawContext} dc
*/
IMcxController.prototype.paint = function(dc)
{
};
/**
* @param {string} type
* @return {boolean}
*/
IMcxController.prototype.isInstanceOf = function(type)
{
};
/**
* @return {HTMLElement|jQueryObject|string}
*/
IMcxController.prototype.getOptionUI = function()
{
21
};
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.
/**
* @public
* @constructor
* @extends {McxSelectController}
*/
function McxSelectAndDeletePolygonsController()
{
//object oriented kodlamayla benzer şekilde tepe sınıfın constructorını çağırıyoruz.
mcx.base(this);
/**
* @protected
* @type {McxSelectController}
*/
this.base = this;
/**
* @protected
* @type {boolean}
*/
this.base.canSet = false;
/**
* @protected
* @type {McxApplyMode|number}
*/
this.base.applyMode = McxApplyMode.Select;
/**
* @protected
* @type {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);
/**
* @protected
* @param {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
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.
* @public
* @param {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
Download

MapCodeX HTML5 Javascr pt Framework