5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
1/46
ArcGIS API untuk Flex
ArcGIS API untuk Flex merupakan sebuah API dari ArcGIS yang memungkinkan user
untuk membuat applikasi dengan Arcgis berbasis flex. Dengan menggunakan API ini, kita dapat
membuat peta dengan menggunakan ArcGIS.
Untuk dapat menggunakan ArcGIS API kedalam flex, diperlukan untuk menambahkan
ArcGIS flex library yang berbentuk .swc kedalam project flex yang kita buat. Apabila project
ArcGIS ini dicompile, maka akan menghasilkan dua buah file yaitu sebuah file flash (.swf) dan
sebuah file html yang dimana didalamnya diembed file flash yang dibuat sebelumnya.
Aplikasi dengan bentuk flash player ini, tentunya dapat digunakan pada online (.html)
ataupun pada desktop (.swf). Koneksi internet tetap dibutuhkan apabila layer peta yang
digunakan didapat dari map service.
Membuat peta dengan Flex
Untuk dapat membuat peta dengan menggunakan flex, perlu dipersiapkan terlebih
dahulu file-file yang diperlukan. File pertama yang dibutuhkan ada tool untuk membuat sebuah
project berbasis Flex. Tool yang disarankan untuk digunakan ada Flash Builder. File kedua yang
dibutuhkan adalah ArcGIS API untuk Flex yang berupa sebuah file .swc. Setelah file API dan tool
untuk membuat aplikasi flex ini disediakan maka kita dapat memulai untuk membuat sebuah
apilkasi flex untuk menampilkan peta dengan menggunakan ArcGIS API. Berikut adalah langkah-
langkah yang diperlukan untuk membuat peta ArcGIS berbasis flex.
1. Buka Flash Builder, kemudian pilih File > new > Flex Project.2. Masukkan project name, pilih tipe project sebagai web, dan gunakan default flex sdk
kemudian pilih next.
3. Pada bagian server setting, pastikan server type adalah none, kemudian pilih next.4. Pada bagian selanjutnya pastikan component set adalah Mx + Spark.5. Tekan Finish.6. Klik kanan pada project kemudian pilih propertiest.7. Pada bagian Flex Build Path, pada tab library path, pilih add swc dan kemudian pilih
ArcGIS API library yang bertipe swc.
8. Pada file utama .mxml, deklarasikan referensi esri pada bagian awal seperti padatampilan coding dibawah ini.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
2/46
layout="absolute">. . . . . . . . . . .
9. Kemudian tambahkan coding untuk menggunakan map kedalam aplikasi seperti codingdibawah ini.
10.Jalan kan project dengan menekan button Run.
Gambar 1
Tampilan Html dari Flex Project
Layer
Pada ArcGIS API untuk flex, terdapat banyak tipe layer yang dapat ditambahkan kedalampeta. Layer-layer yang dapat ditambahkan kedalam peta ini terbagi menjadi dua kategorisasi
utama yaitu basemap layer dan operational layer. Basemap Layer adalah layer yang
sebelumnya sudah dibuat yang dapat dijuga disebut sebagai TiledLayer. Basemap layer memiliki
beberapa jenis layer yaitu :
ArcGISTiledMapServiceLayer OpenStreetMapLayer
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
3/46
WMTSLayer VETiledLayer ArcGISLocalTiledLayer WebTiledLayer
Basemap layer cenderung relatif statis dan biasanya jarang diperbarui. Umumnya, kitadapat menggunakan basemap layer sebagai layer dasar untuk menampilkan data-data dari
Operational Layer lainnya. Operational Layer berfokus pada data yang sifatnya dinamic. Dengan
kata lain data yang digunakan akan berubah-ubah jauh lebih sering dibandingkan dengan
basemap layer . Operational Layer dibedakan menjadi dua jenis lagi yaitu Server-Side Image
Results dan Client-Side Graphics. Yang membedakan dari dua jenis ini adalah lokasi dimana
layer tersebut akan dibuat. Bila pada server side layer akan dibuat didalam server, maka pada
client-side layer akan dibuat pada desktop. Server Side Image beberapa jenis layer yaitu :
ArcGISDynamicMapServiceLayer. ArcGISImageServiceLayer. GPResultImageLayer. WMSLayer. ArcIMSMapServiceLayer.
Sedangkan Client-Side Graphics terdiri dari beberapa jenis juga yaitu :
GraphicsLayer. FeatureLayer. CSVLayer. GeoRSSLayer. KMLLayer.
Untuk menambahkan peta kedalam flex dapat dilakukan secara mudah dengan
menambahkan beberapa baris code seperti pada contoh dibawah ini kedalam esri map.
esri:ArcGISTiledMapServiceLayerurl="http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"/>
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
4/46
Coding diatas akan menampilkan empat layer yang akan ditambahkan kedalam peta
didalam apilkasi flex yang kita buat sebelumnya. Berikut adalah tampilan setelah project flex ini
dijalankan.
Gambar 2
Tampilan Hasil Gabungan beberapa Layer didalam Flex
Untuk Feature Layer dapat dilakukan dengan menambahkan beberapa parameter
seperti yang dapat dilihat pada code berikut ini.
Membuat marker symbol
Untuk membuat marker didalam ArcGIS untuk Flex juga dapat dilakukan dengan mudah.
Untuk membuat sebuah marker, diperlukan terlebih dahulu tampilan marker yang akan kita
buat. Untuk dapat melakukan setting symbol marker, dapat dilakukan sesuai dengan potongan
coding dibawah ini.
Dengan memberikan coding diatas, maka kita telah membuat sebuah tampilan marker
dengan Id "mySymbol". Kita dapat membuat berbagai macam bentuk symbol yang kita inginkan
untuk ditambahkan kedalam peta. Untuk menambahkan symbol kedalam peta dapat dilakukan
sesuai dengan potongan coding dibawah ini kedalam esri map.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
5/46
Dengan menggunakan potongan coding diatas maka akan ditampilkan empat symbol
yang tampilannya dibuat sesuai dengan potongan coding untuk membuat tampilan symbol.
Diasumsikan pada peta telah terdapat basemap layer yang sudah ditambahkan, maka apabila
ditambahkan kedua potongan coding diatas maka tampilan peta akan tampak seperti pada
gambar berikut ini.
Gambar 3
Tampilan Hasil Pembuatan Symbol Marker
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
6/46
KML layer
KML layer merupakan fitur yang sering digunakan didalam pembuatan GIS. Untuk dapat
membuat layer bedasarkan file KML pada ArcGIS API untuk Flex ini diperlukan KML Layer. KML
layer akan membuat layer bedasarkan file KML yang dibaca pada suatu URL. Proses pembacaanini harus dilakukan secara asynchronous. Untuk membuat aplikasi secara asynchronous pada
aplikasi flex yang kita buat perlu dilakukan dengan beberapa cara berikut ini.
1. Buatlah State aplikasi saat ini dan deklarasikan state awal untuk aplikasi yang kita buat.
2. Buat sebuah coding action script untuk menghandle apabila KML Layer telah selesaidimuat sesuai dengan coding dibawah ini.
importcom.esri.ags.events.LayerEvent;importmx.controls.Alert;
protectedfunctionlower48Reflectivity_loadHandler(event:LayerEvent):void{
currentState = 'mainState';}
protectedfunctionlower48Reflectivity_loadErrorHandler(event:LayerEvent):void{
if(event.fault){
Alert.show(event.fault.faultDetail + "\n"+event.fault.faultString);
}}
]]>
3. Buat sebuah layout dimana layout ini akan digunakan sebagai tampilan loading ketika
proses pemuatan file KML berlangsung. Berikut dapat dilihat coding pembuatan layout
tersebut.
@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
7/46
@namespace esri "http://www.esri.com/2008/ags";esri|Navigation{
left: null;right: 20;
}s|Panel{
backgroundColor: #3D78FF;chromeColor: #2B0D66;backgroundAlpha: 0.8;color: #FFFFFF;
}
4. Buat sebuah tampilan loading yang menggunakan layout yang telah dibuat sebelumnyaseperti dengan contoh kode dibawah ini.
5. Buat sebuah map yang memiliki basemap layer6. Tambahkan KML layer kedalam map dengan contoh seperti coding dibawah ini.
Potongan coding diatas adalah cara untuk menambahkan KML layer kedalam map. Ada
beberapa parameter yang diperlukan seperti yang dapat dilihat pada potongan coding
diatas. Parameter-parameter ini adalah Id dari KML Layer ini, load yang berisikan
function apabila KML layer telah sukses ditampilkan (Function yang telah dibuat pada
langkah ke 2), function apabila KML layer gagal untuk ditampilkan (Function yang
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
8/46
sebelumnya telah dibuat pada langkah ke 2), Nama KML Layer, dan URL tempat KML
layer berada.
7. Jalankan Project. Apabila dilakukan sesuai dengan langkah-langkah tadi, maka tampilanaplikasi akan tampak seperti gambar-gambar berikut ini.
Gambar 4
Tampilan Progress bar
Gambar 5
Tampilan KML Layer pada peta
Editting Feature tanpa Editor
ArcGIS API untuk flex dan javascript sama-sama memiliki kemampuan untuk melakukan
edit data geographic didalam web. Dikarenakan web browser adalah sebuah aplikasi yang
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
9/46
sudah sangat umum saat ini, maka aplikasi editing GIS berbasis web dapat digunakan oleh
banyak orang untuk melakukan edit dari data-data geography kita.
Untuk melakukan editing tanpa, ada beberapa komponen-komponen yang harus kita
ketahui sebelumnya. Komponen-komponen ini adalah :
Feature ServiceUntuk melakukan proses editting pasti diperlukan feature service yang
menyediakan gambar-gambar symbol beserta data geometry yang dimilikinya. Feature
Service adalah sebuah map service yang memiliki kemampuan fitur akses yang dapat
membuat map service tersebut untuk mengekspos fitur geometri dan simbol mereka
dengan cara yang mudah pada aplikasi Web untuk digunakan dan diupdate.
Sebelum melakukan edit, kita perlu membuat sebuah feature service terlebih
dahulu dimana didalamnya terdapat terdapat simbol-simbol dan atribut-atribut.
Apabila kita ingin menggunakan feature service yang telah dibuat sebelumnya, kitadapat melakukan publish kedalam ArcGIS server dengan option kemampuan Feature
Access disediakan. Selain membuat sendiri feature service, kita juga dapat mengakses
feature service dari template-template feature service yang sudah disediakan oleh
ArcGIS.
Setelah feature service dipublish dan dapat diakses dengan API web, maka
feature service tersebut dapat diakses dengan menggunakan feature layer. Feature
layer kemudian akan menampilkan data-data feature kedalam peta yang digunakan.
Geometry ServiceGeometry Service pada ArcGIS server dapat membantu kita untuk melakukan
operasi editing umum seperti membuat , memotong , dan membentuk kembali fitur
geography. Sebelum kita melakukan editting, kita perlu membuat sebuah Geometry
Service pada ArcGIS server kita. Service ini harus digunakan apabila kita menggunakan
Editor Component dalam proses editting. Apabila kita tidak menggunakan Editor
Component , service ini juga dapat membantu kita untuk membuat editing tools sesuai
dengan kebutuhan kita.
Edit ToolEdit Tool digunakan untuk melakukan pemindahan lokasi gambar feature atau juga
dapat melakukan perubahan terhadap attribute feature yang ingin diakses. Kita jugadapat menambahkan logika edit kita sendiri didalam tool ini.
Draw ToolDraw Tool digunakan untuk menggambar sebuah fitur baru. Feature yang dapat
ditambahkan, didapat dari Template Picker yang mendapat data dari Feature Template.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
10/46
Setelah kita mengetahui akan komponen-komponen yang dibutuhkan untuk melakukan
proses editing, kita dapat mulai untuk membuat sebuah aplikasi editing dengan menggunakan
ArcGIS untuk Flex. Agar mempermudah dokumentasi ini, proses pembuatan editting ini akan
dibagi menjadi dua bagian yaitu bagian code Flex dan bagian code ActionScript. Pada bagian
code flex akan dibagi menjadi 2 bagian yaitu bagian Inisialisasi dan bagian map. Sedangkanpada Bagian Actionscript akan berisi banyak coding mengenai function-function void (method)
yang diperlukan untuk melakukan insert, edit, dan delete symbol.
Editing (Flex : Inisialisasi)
Referensi Esri pada markup file MXML
......
Potongan coding diatas berfungsi untuk mereferensikan file yang kita buat
terhadap esri. Pada bagian ini juga akan di jalankan sebuah function ketika file telah
selesai untuk dibuat.
Inisialisasi Tool-tool dan query
Potongan coding diatas berfungsi membuat Drawtool dengan sebuah event dan
map yang akan dihandle, edit tool dengan event-event dan map yang akan dihandle,
dan query yang nantinya akan digunakan untuk melakukan proses query didalam peta .
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
11/46
Pembuatan Layout ControlBar
Potongan coding diatas berfungsi layout yang akan digunakan didalam control
bar.
Pembuatan ControlBar
Untuk memilih feature, tekan button Blok features dan blokfeature-feature yang diinginkan. Untuk menghapus feature
yang diinginkan, tekan button hapus setelah melakukanpemilihan.
Potongan coding diatas berfungsi untuk membuat Controlbar yang berfungsi
untuk menampilkan button-button yang dapat digunakan oleh user untuk melakukan
feature selection dan melakukan delete feature. Didalam control bar ini juga terdapat
deskripsi mengenai kegunaan dari masing-masing control tersebut.
Dalam pembuatan button didalam potongan coding diatas, perlu diperhatikan
juga dalam setiap pembuatan button perlu diberikan juga sebuah listener yang akan
memanggil sebuah method ketika button tersebut ditekan.
Editing (Flex : Map)
Dalam pembuatan aplikasi editing ini, bagian map akan dibagi menjadi dua bagian. Yaitu
sebuah panel sebagai tempat peta tersebut ditampilkan, dan panel berikutnya sebagai tempat
untuk tool-tool editor tersebut ditampilkan. Untuk dapat membagi tampilan tersebut menjadi
dua digunakanlah HDividedBox. Untuk lebih jelasnya, berikut adalah coding-coding yang
dibutuhkan untuk mewujudkan hal-hal diatas.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
12/46
Pembagian layout Map
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
13/46
Pembuatan Map
Potongan coding diatas berfungsi untuk membuat sebuah map yang hampir
mirip dengan prosedur pembuatan map sebelum-sebelumnya. Yang menjadi
perbedaan didalam coding diatas adalah didalam map ini diberikan listener untuk
menangani event click pada map.
Pembuatan Feature Layer
Potongan coding diatas berfungsi untuk menambahkan beberapa feature layer
kedalam map. Ada tiga feature layer yang digunakan dari feature server yang
disediakan oleh arcgis ini. Ada 3 feature layer didalam service ini dimana feature layer
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
14/46
yang pertama bertipe point, yang kedua bertipe polyline, dan yang ketiga bertipe
polygon. Masing-masing dari feature layer ini diberikan ID yang dimana feature service
ini kemudian akan ditambahkan kedalam peta dan juga template picker.
Didalam feature layer ini juga ditambahkan beberapa parameter. Parameter-
parameter ini adalah event ketika feature tersebut ditekan, event ketika melakukan
edit pada feature, event ketika terjadi error, dan mode untuk feature service tersebut.
Pembuatan Template Picker
Potongan coding diatas berfungsi untuk menambahkan sebuah template picker
yang dimana didalamnya terdapat feature-feature yang didapat dari feature service
agar user dapat menambahkan feature tersebut kedalam layer dan kedalam feature
service.
Didalam template picker terdapat parameter-parameter yang penting fungsinya.
Parameter selected template change adalah parameter yang harus diisi untuk
menggunakan template picker. Event didalam parameter ini akan menangani apabila
user telah memilih feature symbol didalam template picker entah itu berupa point,line, atau polygon.
Editing Action Script
Inisialisasi Variable dan referensi ActionScript
importcom.esri.ags.events.FeatureLayerEvent;importcom.esri.ags.events.TemplatePickerEvent;importcom.esri.ags.geometry.Geometry;importcom.esri.ags.layers.Layer;importcom.esri.ags.symbols.SimpleFillSymbol;importmx.controls.Alert;importmx.events.FlexEvent;importmx.rpc.events.FaultEvent;importmx.utils.ObjectUtil;[Bindable]privatevarselectedGraphic:Graphic = null;
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
15/46
privatevardrawingComplete:Boolean;privatevardoNotAddFeature:Boolean;
]]>
Potongan coding diatas berfungsi untuk memulai coding actionscript didalam
aplikasi flex yang akan kita buat. Perlu dibuat beberapa variable yang nantinya akan
digunakan oleh function-function yang ada didalam aplikasi ini. Variable pertama
adalah selectedGraphic yang berisi graphic yang dipilih oleh user dengan menekan
symbol tersebut. Variable drawingComplete adalah boolean yang akan menandai
apakah user melakukan proses pembuatan polyline atau polygon. Variable
doNotAddFeature juga berupa boolean yang berfungsi untuk menandai kondisi untuk
menambahkan fitur diperbolehkan atau tidak. Variable ini akan berisi true apabila user
ingin menambahkan feature pada point yang didalamnya sudah terdapat sebuah
feature.
Function application_creationCompleteHandlerprotectedfunctionapplication_creationCompleteHandler(event:FlexEvent):void{
myTemplatePicker.featureLayers = [ incidentsPointLayer,incidentsLineLayer, incidentsPolygonLayer ];
addEventListener(KeyboardEvent.KEY_DOWN, deleteKeyHandler);}
Function diatas dijalankan ketika apilkasi telah selesai dibuat. Didalam fungsi ini
myTemplatePicker akan diisi dengan feature layer yang didapat dari ketiga feature
service seperti yang dapat dilihat diatas. Didalam function ini juga terdapat keyboard
event listener yang akan menhandle event ketika keyboard ditekan dan akan
memanggil function deleteKeyHandler().
Function myTemplatePicker_selectedTemplateChangeHandlerprotectedfunctionmyTemplatePicker_selectedTemplateChangeHandler(event:TemplatePickerEvent):void{editTool.deactivate();if(event.selectedTemplate){switch (event.selectedTemplate.featureLayer.layerDetails.geometryType)
{case(Geometry.MAPPOINT):
{if(event.selectedTemplate.featureLayer.renderer){drawTool.markerSymbol =
event.selectedTemplate.featureLayer.renderer.getSymbol(event.selectedTemplate.featureTemplate.prototype);
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
16/46
}elseif(event.selectedTemplate.featureLayer.symbol){drawTool.markerSymbol =
event.selectedTemplate.featureLayer.symbol;}drawTool.activate(DrawTool.MAPPOINT);
break;}case(Geometry.POLYLINE):
{if(event.selectedTemplate.featureLayer.renderer != null){ drawTool.lineSymbol =
event.selectedTemplate.featureLayer.renderer.getSymbol(event.selectedTemplate.featureTemplate.prototype);
}elseif(event.selectedTemplate.featureLayer.symbol){ drawTool.lineSymbol =
event.selectedTemplate.featureLayer.symbol;}
drawTool.activate(DrawTool.POLYLINE);break;}case(Geometry.POLYGON):
{if(event.selectedTemplate.featureLayer.renderer != null){ drawTool.fillSymbol =
event.selectedTemplate.featureLayer.renderer.getSymbol(event.selectedTemplate.featureTemplate.prototype);
}
elseif(event.selectedTemplate.featureLayer.symbol)
{ drawTool.fillSymbol =event.selectedTemplate.featureLayer.symbol;}drawTool.activate(DrawTool.POLYGON);
break;}
}}else
{drawTool.deactivate();
}}
Function diatas dijalankan ketika user menekan sebuah feature didalam
template picker. Kemudian oleh function ini akan dideteksi jenis feature yang ditekan
oleh user. Apabila jenis function adalah point, maka drawtool akan diset dengan
marker symbol, hal yang sama untuk polyline dan polygon akan diset sesuai dengan
tipenya masing-masing. Setelah itu Drawtool akan diaktifkan. Apabila user menekan
sesuatu diluar feature yang ada didalam template picker, maka drawtool akan di
nonaktifkan.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
17/46
Function diatas juga akan melakukan pengecekan apabila feature yang ditekan
adalah feature yang didapat dari feature service atau feature yang dibuat oleh
developer secara manual. Apabila feature tersebut dari feature service, maka drawtool
akan inputkan dengan feature tersebut. Apabila feature tersebut merupakan hasil
pembuatan symbol yang ditambahkan kedalam template picker, maka data dari symboltersebut akan dimasukkan kedalam drawtool.
Function draw_drawEndHandlerprotectedfunctiondraw_drawEndHandler(event:DrawEvent):void{if(event.graphic.geometry.type == Geometry.EXTENT){for each(varlayer:Layer inmap.layers){
if(layer isFeatureLayer)
{selectionQuery.geometry = event.graphic.geometry;FeatureLayer(layer).selectFeatures(selectionQuery,
FeatureLayer.SELECTION_NEW);}
}drawTool.deactivate();
}else{drawingComplete = true;doNotAddFeature = false;callLater(addFeatureToFeatureLayer, [ event.graphic ]);}
}
Function diatas dijalankan ketika user telah selesai menggunakan drawtool.
Apabila dilihat pada potongan coding waktu penambahan drawtool, parameter
drawEnd diset dengan function ini. Dengan adanya function ini, feature yang telah
dibuat oleh user didalam peta kemudian akan ditambahkan kedalam feature layer
berdasarkan typenya.
Didalam function ini akan dilakukan pengecekan. Apabila type geometry adalah
extent, berarti user menggunakan drawtool untuk melakukan seleksi terhadap feature-
feature dengan menggunakan drawtool. Sedangkan apbila type geometrynya bukan
extent, maka diasumsikan user melakukan penambahan feature (point, polyline, ataupolygon) kedalam layer dan akan memanggil function addFeatureToLayer.
Function layer_clickHandlerprotectedfunctionlayer_clickHandler(event:MouseEvent):void
{drawTool.deactivate();
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
18/46
if(!drawingComplete {if(event.target isGraphic){selectedGraphic = Graphic(event.target);}elseif(event.target.parent isGraphic{
selectedGraphic = Graphic(event.target.parent);}editTool.activate(EditTool.EDIT_VERTICES | EditTool.MOVE, [selectedGraphic ]);
}else{drawingComplete = false;if(event.currentTarget == incidentsPointLayer){
doNotAddFeature = true}
}
}Function diatas dijalankan apabila user menekan sebuah Feature layer didalam
map. Apabila drawingComplete (variable yang menandakan user melakukan add
feature) adalah false, maka akan dilakukan proses untuk melakukan move feature.
Proses move feature ini dilakukan dengan edit tool yang dimana datanya akan didapat
berdasarkan data-data dari feature layer yang ditekan.
Apabila drawingComplete adalah true, maka menandakan user sedang dalam
proses melakukan penambahan feature. Apabila sampai memasuki function ini, hal ini
menandakan bahwa user ingin menambahkan fitur pada geometry yang hampir sama
dengan feature layer yang ditekan. Oleh karena itu variable doNotAddFeature akandibuat menjadi true sehingga user tidak dapat menambahkan feature dengan
geometry yang sama dengan feature layer ini.
Function addFeatureToFeatureLayerprivatefunctionaddFeatureToFeatureLayer(graphic:Graphic):void{if(!doNotAddFeature && myTemplatePicker.selectedTemplate){if(myTemplatePicker.selectedTemplate.featureTemplate){varnewAtttrs:* =ObjectUtil.copy(myTemplatePicker.selectedTemplate.featureTemplate.prototype.attributes);
varnewGraphic:Graphic = newGraphic(graphic.geometry, null,newAtttrs);
myTemplatePicker.selectedTemplate.featureLayer.applyEdits([newGraphic ], null, null);
}else
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
19/46
{myTemplatePicker.selectedTemplate.featureLayer.applyEdits([graphic], null, null);
}}
}
Function diatas akan dijalankan apabila user akan melakukan penambahanfeature kedalam feature layer. Sebelum melakukan penambahan, dilakukan
pengecekan terlebih dahulu apakah variabel doNotAddFeature adalah false. Seperti
yang dijelaskan pada function sebelumnya, apabila variabel ini adalah true, berarti user
mencoba menambahkan feature dengan geometry yang sudah digunakan oleh feature
yang lain dan tidak diperbolehkan. Lalu juga dilakukan pengecekan apabila user juga
telah melakukan pemilihan feature pada template picker.
Apabila Kondisi-kondisi tersebut dipenuhi, maka akan dilakukan proses
penambahan feature. Apabila feature yang akan ditambahkan adalah feature yang
didapat dari feature service, maka feature tersebut akan langsung ditambahkankedalam feature layer. Tetapi apabila feature yang akan ditambahkan dari template
picker merupakan sebuah symbol baru yang dibuat tanpa didapat dari feature service,
maka perlu dibuat sebuah graphic baru sesuai dengan yang dapat dilihat pada
potongan coding diatas.
Function deleteKeyHandlerprivatefunctiondeleteKeyHandler(event:KeyboardEvent):void{if(event.keyCode == Keyboard.DELETE){if(selectedGraphic != null){
(selectedGraphic.parent asFeatureLayer).applyEdits(null, null,[ selectedGraphic ]);
selectedGraphic = null;}else{for each(varlayer:Layer inmap.layers){
if(layer isFeatureLayer &&FeatureLayer(layer).selectedFeatures.length > 0)
{FeatureLayer(layer).applyEdits(null, null,FeatureLayer(layer).selectedFeatures);
}}
}}
}
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
20/46
Function diatas berfungsi untuk melakukan delete terhadap feature yang
diinginkan oleh user. Apabila variabel selectedGraphic ada isinya, berarti user
melakukan seleksi dengan menekan tombol tersebut. Apabila tidak, berarti user
melakukan selection dengan menggunakan extent. Oleh karena itu proses delete akan
dilakukan terhadap setiap feature layer yang dipilih oleh user dengan menggunakanseleksi blok.
Function map_clickHandlerprotectedfunctionmap_clickHandler(event:MouseEvent):void{if(!(event.target isGraphic || event.target.parent isGraphic)){editTool.deactivate();
}}
Function diatas dijalankan apabila user melakukan click terhadap map. Didalamfunction ini tujuannya adalah mematikan edittool apabila user menekan suatu graphic
didalam map.
Function flayer_faultHandlerprotectedfunctionflayer_faultHandler(event:FaultEvent):void{
Alert.show(event.fault.faultString + "\n\n"+event.fault.faultDetail, "FeatureLayer Fault "+event.fault.faultCode);
trace("f: "+ event.toString());}
Function diatas dijalankan apabila terjadi error didalam feature layer. Apabila
terjadi error ketika user melakukan proses editing terhadap feature layer, maka
function ini akan mengeluarkan dialog box untuk menunjukan code error.
Function selectFeatures_clickHandlerprotectedfunctionselectFeatures_clickHandler(event:MouseEvent):void{
myTemplatePicker.clearSelection();
drawTool.fillSymbol = newSimpleFillSymbol;drawTool.activate(DrawTool.EXTENT);
}
Function diatas dijalankan apabila user menekan tombol blok features. Function
ini kemudian akan menghilangkan semua selection yang dilakukan oleh user, dan
kemudian akan menjalankan drawtool dengan mode Drawtool.extent yang dimana
akan memilih semua feature didalam extent yang dibuat.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
21/46
Function clearSelection_clickHandlerprotectedfunctionclearSelection_clickHandler(event:MouseEvent):void{for(vari:Number = 0; i < map.layers.length; i++){
if(map.layers[i] isFeatureLayer &&FeatureLayer(map.layers[i]).selectedFeatures.length > 0)
{FeatureLayer(map.layers[i]).clearSelection();
}}
}
Function diatas dijalankan apabila user menekan tombol hialngkan blok.
Function ini kemudian mengecek terhadap semua layer didalam map untuk dicek
apakah fitur tersebut telah diseleksi sebelumnya. Setelah itu terhadap fitur-fitur yang
telah diseleksi akan dihilangkan seleksinya.
Function editTool_vertexAddDeleteHandlerprotectedfunctioneditTool_vertexAddDeleteHandler(event:EditEvent):void{
applyEdits(event.graphic);}
Function diatas akan menghandle event add dan event delete didalam edit tool.
Function ini kemudian akan memanggil function applyEdits. Dikarenakan untuk proses
add dan delete telah dihandle dengan function sebelumnya, function ini dibuat hanya
untuk menghandle event add dan delete yang diperlukan oleh edit tool.
Function editTool_graphicsMoveFirstHandlerprotectedfunctioneditTool_graphicsMoveFirstHandler(event:EditEvent):void{
editTool.addEventListener(EditEvent.GRAPHICS_MOVE_STOP,editTool_graphicsMoveStopHandler);
}
Function diatas akan memberikan event moveStop dengan function Stophandle
terhadap graphic yang sedang dipindah.
Function editTool_graphicsMoveStopHandlerprotectedfunctioneditTool_graphicsMoveStopHandler(event:EditEvent):void{
editTool.removeEventListener(EditEvent.GRAPHICS_MOVE_STOP,editTool_graphicsMoveStopHandler);
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
22/46
applyEdits(event.graphics[0]);}
Function diatas akan menghapus listener move stop pada graphic yang dipindah
kemudian akan memanggil function applyEdits untuk melakukan edit terhadap lokasi
graphic yang dipindah.
Function editTool_vertexMoveFirstHandlerprotectedfunctioneditTool_vertexMoveFirstHandler(event:EditEvent):void{
editTool.addEventListener(EditEvent.VERTEX_MOVE_STOP,editTool_vertexMoveStopHandler);
}
Function diatas akan memberikan event moveStop dengan function Stophandle
terhadap vertex yang sedang dipindah.
Function editTool_vertexMoveStopHandlerprotectedfunctioneditTool_vertexMoveStopHandler(event:EditEvent):void{
editTool.removeEventListener(EditEvent.VERTEX_MOVE_STOP,editTool_vertexMoveStopHandler);
applyEdits(event.graphic);}
Function diatas akan menghapus listener move stop pada vertex yang dipindah
kemudian akan memanggil function applyEdits untuk melakukan edit terhadap lokasi
vertex yang dipindah.
Function applyEditsprivatefunctionapplyEdits(graphic:Graphic):void{
FeatureLayer(graphic.graphicsLayer).applyEdits(null, [ graphic ],null);
}
Function diatas merupakan function applyEdits yang digunakan oleh function-
function editTool sebelumnya. Function ini berfungsi untuk melakukan edit terhadap
graphic layer oleh graphic yang diparsingkan.
Setelah ditambahkan coding-coding diatas, aplikasi editor tanpa menggunakan toolbar
siap dijalankan. Aplikasi editor ini jauh lebih kompleks apabila dibandingkan dengan aplikasi
editor dengan editor yang disediakan oleh ArcGIS. Mengenai aplikasi editing dengan
menggunakan editor akan dijelaskan pada bab berikutnya. Apabila aplikasi editing ini
dijalankan, dapat dilihat pada gambar dibawah ini.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
23/46
Gambar 7
Tampilan aplikasi editing tanpa edior
Editting Feature dengan Editor
ArcGIS API untuk Flex sebenarnya telah menyediakan fitur editor agar developer dapat
memberikan fitur edit secara mudah didalam aplikasi flex yang dibuatnya. Sebelum
menggunakan fitur editor ini, perlu dibuat sebuah geometry service yang akan dipanggil
nantinya oleh fitur editor yang dibuat.
Geometry service dapat membantu kita dalam proses editing seperti membuat,
memotong, mengubah data-data geograpic feature. Geometry yang sudah dibuat kemudian
dipublish kedalam ArcGIS server dan URLnya dipakai untuk proses pemanggilan editor.
Berikut adalah langkah-langkah untuk melakukan edit dengan menggunakan editor.
Inisialisasi referensi namespace arcgis dan buat sebuah handler ketika aplikasi diinisialisasi.
.......
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
24/46
Buat script action script seperti dibawah ini untuk menambahkan feature layer kedalameditor ketika aplikasi di inisialisasi.
importcom.esri.ags.tasks.GeometryService;importmx.events.FlexEvent;
protectedfunctionapplication_initializeHandler(event:FlexEvent):void{
myEditor.featureLayers = [ points, fireAreas ];}
]]>
Buat sebuah Hgroup dimana didalamnya nanti terdapat editor dan map.
Buat sebuah map beserta feature service seperti code dibawah ini.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
25/46
url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0"/>
Jalankan Project.
Gambar 8
Tampilan aplikasi editing dengan editor
Kelebihan ArcGIS API untuk Flex
Dengan menggunakan ArcGIS API untuk Flex, kita dapat memanfaatkan tool web designdari Adobe yang sangat bagus. Kita dapat membuat aplikasi web, yang mempunyai
banyak fitur, user friendly, dan dapat digunakan oleh semua browser yang didukung
oleh Adobe.
Developer dapat mengambil keuntungan dengan menggunakan aplikasi Flash Builderyang memiliki komponen-komponen flex yang sangat banyak yang dapat mempercepat
proses pembuatan aplikasi.
ArcGIS Server memiliki format output yang dioptimalkan untuk Flex disebut ActionMessage Format, yang mempercepat query ke server GIS.
ArcGIS API untuk Flex juga friendly terhadap developer yang mengetahui Java. Pengguna aplikasi dengan flex ini hanya membutuhkan flash player, yang merupakan
suatu aplikasi yang sudah tidak asing lagi bagi user.
Kekurangan ArcGIS API untuk Flex
Beberapa device tidak menyupport Flash Player didalamnya. Membutuhkan Tool-Tool yang cukup berat untuk membuat aplikasi Flex.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
26/46
ArcGIS API untuk Javascript
Arcgis API untuk javascript dapat memungkinkan kita untuk menambahkan map yang
ringan kedalam aplikasi web yang kita buat. Map ArcGIS akan dibuat berdasarkan javascript
sehingga dapat digunakan terhadap aplikasi-aplikasi berbasis web seperti php, asp, dan HTML5.
ArcGIS API ini juga dapat digunakan bersama framework-framework javascript lainnya seperti
Jquery dan ExtJs.
ArcGIS API untuk javascript dapat digunakan dengan mengakses API secara online
ataupun secara lokal. Arcgis telah menyediakan sebuah CDN (Content Delivery Network) yang
dapat digunakan untuk memuat API secara online. API ini sendiri juga dapat diakses secara lokal
didalam web server. Aplikasi yang dibuat dengan menggunakan ArcGIS untuk javascript ini
sebaiknya digunakan secara online (hosting / web server). Gambar dibawah ini dapat
menunjukan bahwa apabila html yang menggunakan ArcGIS API untuk javascript dijalankan
didalam file lokal, tidak semua fitur-fitur arcgis dapat dipanggil.
Gambar 9
Perbedaan KML.html dijalankan pada File dengan dijalankan pada webserver
Membuat peta dengan Javascript
Dengan menggunakan ArcGIS API untuk javascript kita dapat menambahkan sebuah
peta kedalam website yang kita buat. Untuk dapat melakukan ini diperlukan ArcGIS API untuk
Javascript yang dapat diakses secara lokal, atau juga dapat diakses pada CDN yang sudah
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
27/46
disediakan ArcGIS untuk mengakses API dengan mudah. Berikut adalah langkah-langkah untuk
menggunakan ArcGIS API pada sebuah halaman web sederhana.
1. Buatlah sebuah HTML sederhana yang didalam body mempunyai sebuah DIV tempatmap ArcGIS akan ditampilkan. Berikut adalah contoh isi dari HTML sederhana untukmenampilkan map ArcGIS.
First time learning ArcGIS for JS
2. Referensikan ArcGIS API untuk javascript kedalam HTML. Hal ini dapat dilakukan denganmenambah potongan coding dibawah ini kedalam tag .
3. Load module dari API dengan menggunakan coding dibawah ini.
require(["esri/map","dojo/domReady!"],function(Map){...........
});
4. Buatlah map dengan menggunakan API kedalam div didalam body. Berikut adalahcontoh cara pembuatan map.
varmap;require(["esri/map","dojo/domReady!"],function(Map){
map =newMap("mapDiv",{
center:[-56.049,38.485],zoom:3,basemap:"streets"});
});
5. Buat style tampilan untuk HTML. Berikut adalah contoh untuk pembuatan tampilanhtml.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
28/46
html,body,#mapDiv{padding:0;margin:0;height:100%;
}
6. Jalankan HTML tersebut pada WebServer.
Gambar 10Tampilan HTML dengan menggunakan ArcGIS API untuk Javascript
Layer
Pada umumnya, jenis-jenis layer didalam ArcGIS relatif sama didalam type dan
fungsionalitasnya. Yang menjadi perbedaan utama adalah cara memanggil layer tersebut
didalam setiap API nya. Didalam ArcGIS API untuk JavaScript, untuk menambahkan sebuah layer
kedalam peta dapat dilakukan dengan cara yang cukup mudah. Berikut adalah contoh untuk
cara menambahkan sebuah basemap layer kedalam peta.
varbasemap =newesri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");map.addLayer(basemap);
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
29/46
Sama dengan cara menambahkan layer kedalam peta pada API ArcGIS lainnya,
dibutuhkan url tempat layer tersebut dipublish. Pada contoh diatas, digunakanlah Map Server
Arcgis untuk tiled map service.
Didalam ArcGIS kita juga dapat menambahkan beberapa layer kedalam suatu peta. Peta
sebenarnya merupakan susunan dari satu atau beberapa layer yang dimana setiap layer
memiliki informasi-informasi sendiri-sendiri. Berikut adalah suatu contoh penggabungan
beberapa layer menjadi suatu kesatuan peta.
varbasemap =newesri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");map.addLayer(basemap);
varreferenceLayer =newesri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer" );
map.addLayer(referenceLayer);
varIndo1 =newesri.layers.ArcGISDynamicMapServiceLayer("http://nfms.dephut.go.id/ArcGIS/rest/services/IndonesiaNFMS/Batas_Province/MapServer");map.addLayer(Indo1);
varIndo2 =newesri.layers.ArcGISDynamicMapServiceLayer("http://nfms.dephut.go.id/ArcGIS/rest/services/IndonesiaNFMS/Batas_DistrictKabupatenKota/MapServer" );map.addLayer(Indo2);
Gambar 11
Tampilan HTML dengan gabungan beberapa layer
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
30/46
Membuat marker symbol
ArcGIS API untuk javascript menyediakan tool yaitu draw toolbar yang dapat membantu
developer untuk membuat sebuah marker symbol dengan mudah kedalam peta. Draw toolbar,
bukanlah sebuah interface yang ditampilkan didalam peta, tetapi draw toolbar adalah sebuahclass yang dapat membantu developer dalam proses pembuatan geometry didalam map. Kita
hanya mengaktifkan sebuah tipe geometry yang akan kita gunakan untuk membuat symbol
tersebut. Contoh :
Point
Dengan menekan button diatas, maka toolbar akan mengaktifkan point geometry.
Untuk lebih jelasnya berikut adalah dokumentasi pembuatan halaman web untuk
melakukan add symbol yang bertipe point, polyline dan juga polygon.
1. Buatlah sebuah halaman HTML yang dimana didalamnya terdapat dua buah DIV yangdimana div pertama berisi button-button type symbol dan div kedua adalah tempat peta
ditampilkan.
Shapes and Symbols
........................................................
Select a shape then draw on map to add graphicPointMultipointLinePolylineFreehand PolylineTriangleRectangleCircleEllipse
PolygonFreehand Polygon
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
31/46
Button-button diatas merupakan button yang digunakan untuk membuat
symbol. Id dari button tersebut merupakan tipe geometry symbol yang akan digunakan
saat button tersebut ditekan.
2.
Tambahkan Style css untuk Html yang dibuat.
#info{
top:20px;color:#444;height:auto;font-family:arial;right:20px;margin:5px;padding:10px;
position:absolute;width:115px;z-index:40;border:solid2px#666;border-radius:4px;background-color:#fff;}
html,body,#mapDiv{padding:0;margin:0;height:100%;}
button{display:block;
}
3. Referensikan ArcGIS API untuk javascript kedalam HTML.
4. Load modul-modul dari API seperti pada potongan coding dibawah ini. Yang diperlukanuntuk menambahkan symbol didalam peta ini adalah map, toolbar, jenis-jenis symbol,
graphic, dan beberapa modul dari Dojo.
varmap,tb;require([
"esri/map","esri/toolbars/draw","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/PictureFillSymbol","esri/symbols/CartographicLineSymbol","esri/graphic","dojo/_base/Color","dojo/dom","dojo/on","dojo/domReady!"
],function(Map,Draw,SimpleMarkerSymbol,SimpleLineSymbol,
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
32/46
PictureFillSymbol,CartographicLineSymbol,Graphic,Color,dom,on
){
................................
});
5. Mapmap =newMap("mapDiv",{
basemap:"streets",center:[-25.312,34.307],zoom:3
});map.on("load",initToolbar);
Map yang digunakan tidak perlu terlalu kompleks. Dengan menggunakan contohini layer yang digunakan adalah basemap street saja. Kemudian pada waktu map di
muat, maka function initToolbar akan dijalankan.
6. Inisialisasi symbol-symbol yang akan digunakan.varmarkerSymbol =newSimpleMarkerSymbol();markerSymbol.setPath("M 100 100 L 300 100 L 200 300 z");markerSymbol.setColor(newColor("#00FFFF"));
Potongan coding diatas merupakan inisialisasi symbol yang bertipe point dan multipoint.Dapat dilihat diatas bahwa untuk setPath memiliki susunan string yang cukup sulit untuk
dipahami. String ini merupakan SVG Path. Untuk penjelasan mengenai SVG Path dapat
dibuka dihttp://www.w3.org/TR/SVG/paths.html#PathElement.
varlineSymbol =newCartographicLineSymbol(CartographicLineSymbol.STYLE_SOLID,newColor([255,0,0]),10,CartographicLineSymbol.CAP_ROUND,CartographicLineSymbol.JOIN_MITER,5
);
Potongan coding diatas merupakan inisialisasi symbol yang bertipe line, polyline dan
multiline. Dapat dilihat parameter-parameter yang dapat diisi pada variabel ini sesuai
dengan coding diatas.
varfillSymbol =newPictureFillSymbol("images/mangrove.png",newSimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
http://www.w3.org/TR/SVG/paths.html#PathElementhttp://www.w3.org/TR/SVG/paths.html#PathElementhttp://www.w3.org/TR/SVG/paths.html#PathElementhttp://www.w3.org/TR/SVG/paths.html#PathElement5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
33/46
newColor('#000'),1
),42,42
);
Potongan coding diatas merupakan inisialisasi symbol yang extend, polygon danfreehand polygon. Dapat dilihat parameter-parameter yang dapat diisi pada variabel ini
sesuai dengan coding diatas. Variabel diatas digunakan untuk mengisi polygon dengan
gambar yang diambil dari server. Alamat gambar bisa disetting untuk ditampilkan
didalam polygon.
7. Function initToolbarfunctioninitToolbar(){
tb =newDraw(map);tb.on("draw-end",addGraphic);on(dom.byId("info"),"click",function(evt){
if(evt.target.id ==="info"){return;
}vartool =evt.target.id.toLowerCase();map.disableMapNavigation();tb.activate(tool);
});}
Function diatas akan dijalankan sesaat setelah map selesai dimuat. Function ini
berfungsi untuk memberikan listener kepada semua button yang ada didalam div "info"
dan akan mengaktifkan toolbar berdasarkan id dari button yang ditekan. Id ini kemudian
akan digunakan sebagai tipe dari symbol yang akan digunakan oleh toolbar.
8. Function addGraphicfunctionaddGraphic(evt){
tb.deactivate();map.enableMapNavigation();varsymbol;if(evt.geometry.type ==="point"||evt.geometry.type ==="multipoint"){
symbol =markerSymbol;}elseif(evt.geometry.type ==="line"||evt.geometry.type==="polyline"){
symbol =lineSymbol;}else{
symbol =fillSymbol;}map.graphics.add(newGraphic(evt.geometry,symbol));
}
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
34/46
Function diatas akan dipanggil secara otomatis ketika user membuat sebuah
symbol dengan menekan button, kemudian menekan sebuah/beberapa titik pada peta.
Function ini kemudian akan menambahkan symbol yang diinginkan kedalam peta
berdasarkan variabel-variabel symbol yang dibuat sebelumnya.
9. Jalankan halaman web ini kedalam web server.
Gambar 12
Tampilan HTML add marker symbol dengan Toolbar
KML Layer
KML layer merupakan fitur yang sering digunakan didalam pembuatan GIS. Untuk dapat
membuat layer bedasarkan file KML pada ArcGIS API untuk Javascript ini diperlukan KML Layer.
KML layer akan membuat layer bedasarkan file KML yang dibaca pada suatu URL. Untuk dapat
menggunakannya, file KML tersebut harus dipublikasikan. Untuk menambahkan KML Layer
kedalam halaman web yang kita buat, dapat mengikuti cara-cara berikut ini.
1.
Buat sebuah HTML seperti dengan potongan coding dibawah ini.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
35/46
Halaman web yang akan dibuat dengan KML layer ini memiliki beberapa
perbedaan dengan halaman web yang biasanya dibuat sebelumnya. Div yang digunakan
untuk menampilkan map ini memiliki beberapa attributes dojo yang digunakan. selain
itu terdapat sebuah span yang didalamnya dapat ditambahkan Gif Loader untuk
menunjukkan proses load file KML.
2. Buat Layout untuk halaman web tersebut.
html,body{height:100%;width:100%;margin:0;padding:0;}#map{height:100%;margin:0;padding:0;}#loading{
float:right;}
Pada settingan css, digunakan juga sebuah css external yaitu tundra.css. Pada settingan
layout juga ditambahkan settingan layout untuk loading.
3. Referensikan ArcGIS API untuk javascript kedalam HTML.
4. Load Modul-Modul pada API seperti potongan coding dibawah ini
varmap;require(["esri/map","esri/layers/KMLLayer","dojo/parser","dojo/dom-style",
"dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/domReady!"
],function(Map,KMLLayer,parser,domStyle
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
36/46
){
...................
});
Tambahkan esri/layers/KMLLayer pada saat load modul API untuk menggunakan KML
layer pada halaman web yang kita buat.5. Buat sebuah Map
map =newMap("map",{basemap:"topo",center:[-108.663,42.68],zoom:6
});
6. Tambahkan KML Layer kedalam mapparser.parse();varkmlUrl ="http://dl.dropbox.com/u/2654618/kml/Wyoming.kml";varkml =newKMLLayer(kmlUrl);map.addLayer(kml);
kml.on("load",function(){domStyle.set("loading","display","none");});
Potongan coding diatas dibutuhkan untuk menambahkan KML Layer yang
didapat dari file KML dari suatu URL. KML layer kemudian ditambahkan kedalam layer-
layer map. Dapat diperhatikan pada potongan coding diatas, dapat dibuat juga loader
untuk file kml tersebut.
7. Jalankan halaman web tersebut kedalam web server.
Gambar 13
Tampilan HTML dengan KML layer
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
37/46
Editing Feature tanpa editor
Berikut akan dijelaskan mengenai cara untuk melakukan editing feature pada javascript
tanpa menggunakan editor bawaan ArcGIS. Untuk dapat melakukan insert, update, delete
feature didalam javascript dibutuhkan sebuah toolbar. Untuk lebih jelasnya berikut adalahcoding-coding javascript untuk melakukan Editing feature tanpa editor.
Load Modul API
varmap;require(["esri/map","esri/toolbars/draw","esri/toolbars/edit","esri/graphic","esri/config","esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","esri/dijit/editing/TemplatePicker","dojo/_base/array","dojo/_base/event","dojo/_base/lang","dojo/parser","dijit/registry","dijit/layout/BorderContainer","dijit/layout/ContentPane","dijit/form/Button","dojo/domReady!"
],function(Map,Draw,Edit,Graphic,esriConfig,
FeatureLayer,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,TemplatePicker,arrayUtils,event,lang,parser,registry
){
...................
});
Potongan coding diatas adalah menjelaskan modul-modul yang dibutuhkan
untuk melakukan editing. Hal yang perlu diperhatikan mengenai modul-modul yang
diimport adalah modul esri/toolbars/draw dan edit. Toolbar ini akan digunakan untuk
melakukan editing terhadap feature layer. Kemudian selanjutnya adalah
esri/symbols/SimpleMarkerSymbol, SimpleLineSymbol dan SimpleFillSymbol yang
mewakili masing-masing jenis geometry dari feature layer yang dapat di lakukan editing.
Untuk setiap modul API yang diambil, perlu dideklarasikan juga variabel untuk
masing-masing modul. Hal ini dapat diperhatikan pada bagian function diatas. Urutan
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
38/46
pendeklarasian variabel dibuat berurutan sesuai dengan urutan pengambilan modul
pada API.
Konfigurasi dasarparser.parse();esriConfig.defaults.io.proxyUrl ="/proxy";esriConfig.defaults.geometryService =newesri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");map =newMap("map",{
basemap:"streets",center:[-83.244,42.581],zoom:15
});map.on("layers-add-result",initEditing);
Potongan coding diatas adalah coding untuk konfigurasi dasar untuk melakukan
editing terhadap feature layer. Sama dengan ArcGIS API untuk Flex, diperlukan juga
suatu geometry service didalam aplikasi untuk melakukan editing. Setelah itu dilakukan
pembuatan map dengan konfigurasi dasar seperti, basemap, center, dan tingkat zoom.
Setelah itu ditambahkan event ketika layer ditambahkan didalam map, untuk
menjalankan function initEditing.
Penambahan Feature LayervarlandusePointLayer =new
FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6",{mode:FeatureLayer.MODE_SNAPSHOT,outFields:["*"]
});varlanduseLineLayer =newFeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8",{
mode:FeatureLayer.MODE_SNAPSHOT,outFields:["*"]
});varlandusePolygonLayer =newFeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9",{
mode:FeatureLayer.MODE_SNAPSHOT,outFields:["*"]
});map.addLayers([landusePointLayer,landuseLineLayer,landusePolygonLayer]);
Coding diatas adalah coding yang diperlukan untuk memanggil feature layer
kedalam peta. Ada tiga jenis feature layer yang akan diambil yaitu, feature layer dengan
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
39/46
jenis Point, Polyline dan Polygon. Setelah itu ketiga peta akan ditambahkan kedalam
layer didalam peta.
Function initEditingDidalam function ini terdapat banyak potongan coding yang memiliki fungsi yang
berbeda-beda. Untuk itu didalam dokumentasi ini akan dijelaskan sendiri-sendiri untuk
masing-masing potongan coding didalam function ini.
console.log("initEditing",evt);varcurrentLayer =null;varlayers =arrayUtils.map(evt.layers,function(result){returnresult.layer;
});
Potongan coding diatas berfungsi membuat sebuah variabel layers yang dimana
didalamnya akan diisi semua layer-layer yang ada didalam peta. Potongan coding diatasjuga menginisialisasi variabel currentLayer.
console.log("layers",layers);vareditToolbar =newEdit(map);editToolbar.on("deactivate",function(evt){currentLayer.applyEdits(null,[evt.graphic],null);
});
Potongan coding diatas berfungsi untuk mendeklarasikan variabel editToolbar
yang merupakan sebuah toolbar edit untuk map. Didalam potongan coding diatas juga
ditambahkan sebuah listener terhadap editToolbar ketika terjadi event deactivate untuk
melakukan applyEdits terhadap graphic yang sedang diedit dengan menggunakan tool
ini.
arrayUtils.forEach(layers,function(layer){vareditingEnabled =false;layer.on("dbl-click",function(evt){event.stop(evt);if(editingEnabled ===false){
editingEnabled =true;editToolbar.activate(Edit.EDIT_VERTICES ,evt.graphic);
}else{currentLayer =this;
editToolbar.deactivate();editingEnabled =false;
}});
layer.on("click",function(evt){event.stop(evt);if(evt.ctrlKey ===true||evt.metaKey ===true){
layer.applyEdits(null,null,[evt.graphic]);currentLayer =this;editToolbar.deactivate();
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
40/46
editingEnabled=false;}});
});
Potongan coding diatas berfungsi unuk menambahkan sebuah variabel terhadap
semua layer didalam peta yaitu variabel editingEnabled yang di inisialisasi dengan value
false. Kemudian untuk setiap layernya, juga ditambahkan sebuah listener untuk event
double click yang dilakukan kedalam layer. Didalam listener ini akan dilakukan
pengecekan apakah status editing untuk layer tersebut adalah false. Apabila false
berarti proses editing belum dilakukan terhadap layer tersebut yang kemudian akan
melakukan edit terhadap vertex dari graphic yang dipilih. Apabila status editing adalah
true, maka user sedang melakukan editing dan melakukan double click lagi pada graphic
layer yang lain. Untuk itu proses editing akan dinon-aktifkan dan editToolbar akan
dimatikan.
Dalam potongan coding diatas juga ditambahkan sebuah listener untuk event
click terhadap layer. Listener ini berfungsi untuk melakukan delete terhadap layer yang
sedang dipilih. Apabila user menekan tombol ctrl dan mengeklik layer tersebut, maka
layer ini akan dihapus dari peta.
vartemplatePicker =newTemplatePicker({featureLayers:layers,rows:"auto",columns:2,grouping:true,style:"height: auto; overflow: auto;"
},"templatePickerDiv");templatePicker.startup();
Potongan coding diatas adalah untuk membuat template picker dimana
template picker ini akan berisi jenis-jenis feature-feature layer yang telah ditambahkan.
Template picker ini memiliki fungsi yang sama pada template picker untuk ArcGIS API
untuk flex. Dengan menggunakan template picker ini user dapat melakukan insert dari
feature yang dipilih dari template picker ini.
vardrawToolbar =newDraw(map);varselectedTemplate;templatePicker.on("selection-change",function(){
if(templatePicker.getSelected()){selectedTemplate =templatePicker.getSelected();
}switch(selectedTemplate.featureLayer.geometryType){
case"esriGeometryPoint":drawToolbar.activate(Draw.POINT);
break;case"esriGeometryPolyline":
drawToolbar.activate(Draw.POLYLINE);break;
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
41/46
case"esriGeometryPolygon":drawToolbar.activate(Draw.POLYGON);
break;}
});
Potongan coding diatas digunakan untuk melakukan proses insert terhadap
feature yang disedikan oleh template picker. Didalam template picker akan terdapat
jenis-jenis feature yang didapat dari tiga feature layer yang dimuat sebelumnya. Apabila
user melakukan klik terhadap suatu feature didalam template picker, maka sebuah
toolbar draw akan diaktifasi menurut jenis geometry dari feature yang dipilih tadi.
drawToolbar.on("draw-end",function(evt){drawToolbar.deactivate();editToolbar.deactivate();varnewAttributes =lang.mixin({},
selectedTemplate.template.prototype.attributes);varnewGraphic =newGraphic(evt.geometry,null,newAttributes);selectedTemplate.featureLayer.applyEdits([newGraphic],null,
null);});
Potongan coding diatas akan dijalankan ketika user selesai menggunakan draw
tool. Setelah selesai menggunkan tool, maka tool akan di non-aktifkan. Setelah itu
dibuat sebuah attributes yang didapat dari attributes dari feature yang dipilih oleh user
didalam feature picker. Setelah itu dibuat sebuah graphic dengan attributes yang
didapat dari template picker dan data geometry. Kemudian graphic tersebut akan
ditambahkan kedalam feature layer.
Gambar 14
Tampilan Aplikasi Editing tanpa menggunakan Editor
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
42/46
Editing Feature dengan editor
Berikut akan dijelaskan mengenai cara untuk melakukan editing feature pada javascript
dengan menggunakan editor bawaan ArcGIS. Untuk dapat melakukan insert, update, delete
feature didalam javascript dapat dilakukan dengan mudah dengan menggunakan editor yangdisediakan oleh ArcGIS. Untuk lebih jelasnya berikut adalah coding-coding javascript untuk
melakukan Editing feature dengan editor.
Load Modul API
varmap;require(["esri/map","esri/tasks/GeometryService","esri/toolbars/edit",
"esri/layers/ArcGISTiledMapServiceLayer","esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor","esri/dijit/editing/TemplatePicker",
"esri/config","dojo/i18n!esri/nls/jsapi",
"dojo/_base/array","dojo/parser","dojo/keys",
"dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/domReady!"
],function(Map,GeometryService,Edit,ArcGISTiledMapServiceLayer,FeatureLayer,SimpleMarkerSymbol,SimpleLineSymbol,Editor,TemplatePicker,esriConfig,jsapiBundle,arrayUtils,parser,keys
){....................});
Modul yang diload dalam aplikasi ini ada sedikit perbedaan apabila dibandingkan
dengan Editing tanpa menggunakan editor. Dengan menggunakan editor, kita tidak lagi
memerlukan sebuah draw toolbar. Tetapi didalam aplikasi ini kita perlu menambahkan
sebuah modul yaitu esri/dijit/editing/editor. Modul ini yang kemudian akan digunakan
untuk editor.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
43/46
Konfigurasi Dasarparser.parse();
jsapiBundle.toolbars.draw.start =jsapiBundle.toolbars.draw.start
+"
Press ALT to enable snapping";
esriConfig.defaults.io.proxyUrl ="/proxy";esriConfig.defaults.geometryService =newGeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");map =newMap("map",{
basemap:"satellite",center:[-96.541,38.351],zoom:14,slider:false
});map.on("layers-add-result",initEditor);
Potongan coding diatas adalah coding untuk konfigurasi dasar untuk melakukan
editing terhadap feature layer. Konfigurasi dasar untuk editing dengan menggunakan
editor ini memiliki konsep yang sama dengan konfigurasi dasar untuk editing tanpa
menggunakan editor.
Penambahan Layervarlabels =newArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");map.addLayer(labels);
varrivers =new
FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{
mode:FeatureLayer.MODE_ONDEMAND,outFields:['*']
});
varwaterbodies =newFeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{
mode:FeatureLayer.MODE_ONDEMAND,outFields:['*']
});map.addLayers([waterbodies,rivers]);
Didalam aplikasi ini kemudian akan digunakan dua buah feature layer yang
dimana memiliki tipe polyline dan polygon. Digunakan juga sebuah map server. Setelah
itu layer-layer tersebut akan ditambahkan kedalam peta.
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
44/46
Function initEditorDidalam function ini terdapat banyak potongan coding yang memiliki fungsi yang
berbeda-beda. Untuk itu didalam dokumentasi ini akan dijelaskan sendiri-sendiri untuk
masing-masing potongan coding didalam function ini.
vartemplateLayers =arrayUtils.map(evt.layers,function(result){returnresult.layer;
});vartemplatePicker =newTemplatePicker({
featureLayers:templateLayers,grouping:true,rows:"auto",columns:3
},"templateDiv");templatePicker.startup();
Potongan coding diatas digunakan untuk melakukan pembuatan template picker
yang data-datanya diisi dari layer-layer yang ada didalam peta. Didalam properties
didalam template picker ini dapat dilihat ada banyak attributes yang bisa disetting
didalam template picker ini.
varlayers =arrayUtils.map(evt.layers,function(result){return{featureLayer:result.layer };
});varsettings ={
map:map,templatePicker:templatePicker,layerInfos:layers,toolbarVisible:true,createOptions:{polylineDrawTools:[Editor.CREATE_TOOL_FREEHAND_POLYLINE ],polygonDrawTools:[Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.CREATE_TOOL_CIRCLE,Editor.CREATE_TOOL_TRIANGLE,Editor.CREATE_TOOL_RECTANGLE
]},toolbarOptions:{reshapeVisible:true
}};
Setelah template picker ditambahkan kedalam aplikasi, berikutnya yang harus
dilakukan adalah membuat settings untuk parameter editor. Langkah pertamanya
adalah untuk mendapatkan semua feature layer didalam peta. Kemudian dibuat setting
untuk editor dimana untuk parameter yang dapat diisikan dapat dilihat pada potongan
coding diatas.
varparams ={settings:settings};varmyEditor =newEditor(params,'editorDiv');
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
45/46
varsymbol =newSimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 15,newSimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,newColor([255,0,0,0.5]),5),null
);map.enableSnapping({
snapPointSymbol:symbol,tolerance:20,snapKey:keys.ALT
});
myEditor.startup();
Setelah settingan untuk editor telah selesai dibuat maka berikut nya kita dapat
mulai menambahkan sebuah editor kedalam map. Setelah editor ditambahkan, kita juga
dapat menambahkan snapping. Yang diperlukan untuk membuat sebuah snapping
adalah snap symbol yang dideklarasikan seperti potongan coding diatas, dan key yang
digunakan untuk melakukan snapping.
Dengan menggunakan potongan-potongan coding diatas, aplikasi editing dengan
menggunakan editor sudah dapat digunakan. Berikut adalah tampilan untuk aplikasi
dengan menggunakan editor ini.
Gambar 15
Tampilan Aplikasi Editing dengan menggunakan Editor
5/24/2018 [Arcgis] Riset ArcGIS JS & Flex
46/46
Kelebihan ArcGIS API untuk JavaScript
ArcGIS API untuk javascript dapat digunakan bersama framework dan library javascriptlainnya. Sehingga dapat mempermudah developer untuk membuat website yang
menggunakan ArcGIS. ArcGIS API untuk javascript dapat dikatakan API yang paling simpel untuk meng-embed
map kedalam website. Tidak diperlukan tool-tool berat untuk menambahkan ArcGIS API
kedalam website. Hanya diperlukan text editor untuk melakukannya.
API dibuat berdasarkan murni HTML dan javascript saja sehingga tidak diperlukan add-ins untuk browser jika menggunakan API ini. Website yang dibuat dengan
menggunakan API ini memiliki performa yang bagus dan cukup cepat untuk dimuat.
Tidak diperlukan Tool yang mahal-mahal untuk menggunakan API ini. Denganmenggunakan tool gratis kita dapat mulai mendevelop sebuah aplikasi dengan
menggunakan ArcGIS API ini. Powerful tetapi ringan untuk digunakan.
Kekurangan ArcGIS API untuk JavaScript
Harus dijalankan pada webserver / dihosting. User dapat memblock javascript pada browsernya sehingga tidak dapat mengakses
aplikasi dengan API ini.
Perlu dilakukan pengecekan terhadap semua browser yang dapat memakan waktudibandingkan dengan ArcGIS untuk flex yang hanya memerlukan flash player. Terutama
untuk internet explorer dengan pengamanan javascript yang ketat.
Performa untuk melakukan render graphic tergantung pada browser yang digunakan.
Top Related