Bugün çok önceleri ajax kullanarak gis yazılımımda yaptığım bir post geti yazacağız.
Haritaya tıklayınca katmandan çektiği veriyi, eşsiz bir veri(Örn:GlobalId) ile tablosal veride eşleştirerek, tablosal verileri ile birleştirip istenilen bilgileri getirmesi ve değişiklikleri kaydetmesini sağlayan güzel bir işlem ; ortaya karışık herşeyin kullanıldığı bir işlem diyebiliriz:
Servis açtık , Sql Connection sağladık. Serviste oluşturulan sınıflarda Veritabanından verileri çektik ve kaydettik.
Katman ekledik. Katmanlardan haritaya tıklanınca istenilen verileri çektik
Tablosal veriden çekilen ile katmandan çekilen arasında var olan ortak veriyi sorguladık ve tablosal veritabanındaki verileri böylece haritayı tıklayınca getirmiş olduk.
Aşağıdaki resimde haritaya tıklayınca pencereye bu verilerin geldiğini görebiliyoruz. Ekle ve Güncelle tuşları altında ajax nasıl işliyor ona bakalım.
Güzel bir yemek tarifi verir gibi de olur:)
Malzemeler:
Bir adet tablosal veritabanı(MySql üzerinde olacak)
Bir adet coğrafik veritabanı (GeoDatabase üzerinde olacak)
Bir adet iki veritabanı arasında ortak bir veri, biz globalid kullanacağız
Bir adet arada servis etmek ve yemek için ajax
İki veri tabanını ortak attribute ile bağlıyoruz. Ajax ile karıştırarak çekiyourz ve servis ediyoruz.
Hadi bakalım başlayalım;
Visual Studio üzerinden File>New Web Site diyerek oluşturduğum proje üzerinde yaptığım bir kısım olduğu için onun üzerinden gideceğiz.
Tablosal veritabanımıza bağlantıyı servis yazarak yapıyoruz ;
Aşağıdaki resimde olduğu gibi yeni servis açtım ismini isteğinize göre verirsiniz ben Servis dedim geçtim .
//Tablosal veritabanına bağlantı
//Aşağıdaki satırları web.config içine yazıyoruz. Ve SqlConnection yani bağlantımızı sağlamış //oluyoruz.
<connectionStrings>
<add name="Bağlantınıza koyacağınız isim" connectionString="Data Source=veritabanın bulunduğu makinanın adı-adresi; Persist Security Info=True; Initial Catalog=Veritabanınızın ismi; UserID=Veritabanına bağlanabilen ve yazılımda neler yapılması gerekiyorsa yetkisi olan kullanıcı bağlantı ismi; Password=Şifre" />
</connectionStrings>
Servisimizdeki sınıflarda get post metodlarını aynı sınıfta da tutabilirsiniz ayrı sınıfta da ben iki ayrı sınıfta tuttum.
get metodumuz - verileri getirmek için
post metodumuz-verileri kaydetme ve güncelleme için
Özetlersek: Yukarıda tablosal verilerimize erişim için AJAX enabled WCF servis oluşturarak , bağlantıyı sağladık get ve post metodlarında select, insert, update sql komutlarını kullanarak verilerimizi listelere atadık ki ajax ile servis isminden ulaşabilelim.
Şimdi gelelim haritamızı oluşturduğumuz sınıfta katmanı ekleyip o katmandaki verileri çekip tablosal verilerle kesiştirerek istediğimize ulaşmaya...
//Haritamızı oluşturuyoruz. Altlık olarak topo seçtim siz farklı bir altlık haritası seçebilirsiniz
initialExtent = new esri.geometry.Extent({ "xmin": 2927447, "ymin": 4259478, "xmax": 5018471, "ymax": 5196834, "spatialReference": { "wkid": 102100 } });
map = new Map("map", {
extent: initialExtent,
basemap: "topo",
zoom: 6
});
//Katmanı oluşturuyoruz
var layer = new FeatureLayer("ArcGis veya bunun benzeri programlar ile oluşturduğunuz harita servisinizde katmana erişim urlsini buraya yazıyoruz", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
//haritaya katmanı ekliyoruz
map.addLayers([layer]);
//haritaya tıklayınca olacak olanlar :)
dojo.connect(layer, "onClick", function (evt) { //haritayı tıkla
var globalids = evt.graphic.attributes.BLG_GLBLID); //eventı grafikten attribut olarak al ve adını globalids yap. Yani haritayı tıklayınca katmana git ordaki coğrafi verilerden bölgeglobalidyi çek ismini globalids koy.
var bolgeadi = evt.graphic.attributes.BLGADI; //Yukarıdaki mantık
$.ajax({
type: 'GET', //verileri getirmek için GET
contentType: 'application/json; charset=utf-8',
url: 'Service.svc/Getobje', //Oluşturduğumuz serviste get metodumuzun(yukarıdaki resimde olan metod) ismine erişimi sağlıyoruz
data: '{#globalids}', //get metodumuzdaki parametremiz
proccessData: false,
dataType: 'json',
success: function (data) {
var d = eval(data.d);
var i = 0;
for (i; i < d.length; i++) {
sqlglobal.push(d[i].globalid); //Getobje metodunda select komutu ile çektiğimiz verileri burda yazmasam da oluşturduğumuz dizilere ekliyoruz. Herbir veri için ayrı dizi oluşturdum bunun sebebi herbirine ayrı karşılaştırmaya ihtiyaç duymamdı. Siz tek bir diziye ekleyebilirsiniz. Yani sqlglobal ve diğerleri birer dizidir.
sqltelefon.push(d[i].telefon);
sqleposta.push(d[i].eposta);
sqlvergino.push(d[i].vergino);
sqlvergidairesi.push(d[i].vergidairesi);
sqlkepadresi.push(d[i].kepadresi);
sqlx.push(d[i].x);
sqly.push(d[i].y);
sqlfax.push(d[i].fax);
sqladres.push(d[i].adres);
}
for (i; i < sqlglobal.length; i++) {
if (sqlglobal[i] === globalids) { //Tablosal veriden çektiğim globalid ile geodatabase(haritayı tıklayınca katmandan gelen globalid eşit mi şartını burda yazıyoruz. Asıl amacımız buydu o yüzden kırmızııı :))).
map.infoWindow.setTitle("İLETİŞİM");//Ekrana verileri getirince çıkacak olan penceremiz ve başlığı
var contentString = '<div class="block"><label><b>Adres:</b></label><input type="text" value="' + sqladres[i] + '" id="adres_id" runat="server" /></div>' +
'<div class="block"><label><b>Telefon:</b></label> <input type="text" value="' + sqltelefon[i] + '" id="telefon_id" runat="server" /></div> ' +
'<div class="block"><label><b>Fax :</b></label> <input type="text" value="' + sqlfax[i] + '" id="fax_id"/></div> ' +
'<div class="block"><label><b>Kep Adresi:</b></label> <input type="text" value="' + sqlkepadresi[i] + '"id="kepadresi_id"/></div>' +
'<div class="block"><label><b>Vergi Dairesi:</b></label> <input type="text" value="' + sqlvergidairesi[i] + '" readonly/></div>' +
'<div class="block"><label><b>Vergi No:</b></label> <input type="text" value="' + sqlvergino[i] + '" readonly/></div>' +
'<div class="block"><label><b>e-posta:</b></label> <input type="text" value="' + sqleposta[i] + '" id="eposta_id" /></div>' +
'<div class="block"><label><b>X Koordinatı:</b></label> <input type="text" value="' + sqlx[i] + '" readonly /></div>' +
'<div class="block"><label><b>Y Koordinatı:</b></label> <input type="text" value="' + sqly[i] + '" readonly /></div>' +
'<button id="gncClick" value="Submit" onClick="guncelle_click()" runat="server">GUNCELLE</button>' + '<b><button id="btnekleClick" value="Ekle" onClick="ekle_click()" runat="server">EKLE</button>';
map.infoWindow.setContent(contentString); //yukarıda belirlediğimiz stringleri pencerese set ediyoruz.
map.infoWindow.resize(350, 240);//pencerenin büyüklüğünü belirliyoruz.
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); //pencereyi gösteriyoruz
$('#gncClick').click(function () {//güncelle butonuna tıklanınca işleme başla//ekle tuşuna basılınca olayında sadece tuş ismini değiştiriyoruz
var arrData = {};
arrData.Adres = document.getElementById('adres_id').value;
arrData.Telefon = document.getElementById('telefon_id').value;
arrData.GlobalId = globalids;
$.ajax({
type: 'POST',
url: 'Service.svc/PostObjectId', //yukarıdaki resimlerdeki sonuncusunda güncellemek için yazdığımız metoda erişim urlsini yazıyoruz //ekle tuşuna basılırsa burda o metodun ismi yazılacak.
data: JSON.stringify(arrData),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function (data) {//değiştirilen değerleri veritabanına işlemesini sağlayan success//ekle tuşuna basıldığında bu succes içerisine şartlar koymanız gerekecek varsa ekleme yoksa ekle gibi...
var obj = eval(data.d);
if (obj == 'true') {
$('#adres_id').val('');
$('#telefon_id').val('');
}
alert("Güncelleme işlemi başarılı şekilde gerçekleştirilmiştir.");
window.location.reload();
},
error: function () {
alert("error");
}
});
});
}
}
}
});
});
