PEMBUATAN PETA POTENSI CURAH HUJAN DENGAN MENGGUNAKAN CITRA SATELIT MTSAT DI PULAU JAWA - Diponegoro University | Institutional Repository (UNDIP-IR)
LAMPIRAN
LAMPIRAN I
(Lembar Asistensi)
LAMPIRAN II
(Peta Curah Hujan)
Gambar : Citra Satelit MTSAT sebelum dilakukan pengolahan
Gambar : Citra Satelit MTSAT setelah dilakukan klasifikasi BT
LAMPIRAN III
(Script Website)
SCRIPT WEBSITE
1. Script CSS (emx_nav_left.css)
/***********************************************/
/* emx_nav_left.css
*/
/* Use with template Halo_leftNav.html
*/
/***********************************************/
/***********************************************/
/* HTML tag styles
*/
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(bg_grad.jpg) fixed;
}
#pagecell1 #pageName img {
}
/******* hyperlink and anchor tag styles *******/
a:link, a:visited{
color: #005FA9;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
/************** header tag styles **************/
h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}
h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
/*************** list tag styles ***************/
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
/********* form and related tag styles *********/
form {
margin: 0;
padding: 0;
}
label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}
input{
font-family: Arial,sans-serif;
}
/***********************************************/
/* Layout Divs
*/
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #F5f7f7;
}
#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
#content{
padding: 10px 10px 10px 10px;
margin:0px 0px 0px 178px;
border-left: 1px solid #ccd2d2;
background-color: #FFFFFF;
}
/***********************************************/
/* Component Divs
*/
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
font-weight: normal;
font-weight:bolder;
background-image: url(images/bg_menu-atas-hover.gif);
background-repeat: repeat;
text-indent: 10px;
}
/************** utility styles *****************/
#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}
#utility a{
color: #ffffff;
}
#utility a:hover{
text-decoration: underline;
}
/************** pageName styles ****************/
#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
background: #F3FF66;
}
#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}
#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
width: 74px;
height: 78px;
overflow: visible;
}
/************* globalNav styles ****************/
#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(glbnav_background.gif);
}
#globalNav img{
margin-bottom: -4px;
}
#gnl {
position: absolute;
top: 0px;
left:0px;
}
#gnr {
position: absolute;
top: 0px;
right:0px;
}
#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
width: 472px;
}
a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}
a.glink:hover{
background-image: url(glblnav_selected.gif);
text-decoration: none;
}
.skipLinks {display: none;}
/************ subglobalNav styles **************/
.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}
.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}
.subglobalNav a:hover{
color: #cccccc;
}
/*************** search styles *****************/
#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}
#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}
#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;
}
#search a:hover{
margin: 0px;
}
/************* breadCrumb styles ***************/
#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
background: #F3FF66;
}
#breadCrumb a{
color: #AAAAAA;
}
#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}
/************** feature styles *****************/
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
margin: 4;
}
html>body .feature {
height: auto;
margin-right: 30px}
.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}
.feature img{
float: left;
padding: 0px 10px 0px 0px;
}
/*************** story styles ******************/
.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
margin-right: 50px;
text-align:justify;
text-indent:40px;
line-height: 2;
}
.contactus {
padding: 10px 0px 0px 10px;
font-size: 80%;
margin-right: 150px;
text-align:justify;
}
.story h3{
font: bold 175% Arial,sans-serif;
color: #000000;
}
.story p {
padding: 0px 0px 10px 0px;
line-height: 2;
}
.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display: block;
padding-bottom: 5px;
}
.story a.capsule:hover{
text-decoration: underline;
}
td.storyLeft{
padding-right: 12px;
}
/************** siteInfo styles ****************/
#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}
#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}
/************ sectionLinks styles **************/
#sectionLinks{
margin: 0px;
padding: 0px;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}
#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}
#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}
/************* relatedLinks styles **************/
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
.relatedLinks a{
display: block;
}
/**************** half styles *******************/
.half { width: 400px }
.h20 { height: 20px }
.h40 { height: 40px }
img { margin: 0; padding: 0; border: none }
.img_border { background: #525252; padding: 4px; border: 1px solid #282828 }
.img_nom { display: block; margin-bottom: 15px }
.img_fl { float: left; margin: 3px 15px 5px 0 }
.img_fr { float: left; margin: 3px 0 5px 15px }
.left { float: left }
.right { float: right }
/********************* end **********************/
#pagecell1 #content .tutorial {
font: normal 12px "Times New Roman", Times, serif;
}
#capsule.content {
font: normal 14px/normal "Times New Roman", Times, serif;
letter-spacing: normal;
text-align: justify;
word-spacing: normal;
padding: 30px;
height: auto;
width: auto;
border: 3px dotted #99CC00;
}
#time {
font-family: Garamond;
font-size: 16px;
color:black;
padding:3px;
width:170px;
text-align:center;
position:relative;
margin:40px 0px -75px 1000px;
}
2. Script Beranda (index.html)
Home - SIG Curah Hujan
107)){
for (var i=1; i
skip to: page content | links on
this page | site navigation | footer (site
information)
Informasi Peta Curah Hujan
Beranda
Tutorial
Peta Hubungi Kami
subglobal1 link | subglobal1 link | subglobal1 link | subglobal1 link | subglobal1 link | subglobal1 link | subglobal1 link
subglobal2 link | subglobal2 link | subglobal2 link | subglobal2 link | subglobal2 link | subglobal2 link | subglobal2 link
Konversi PGM ke ERS
| Koreksi Geometrik | Penggabungan Data | Konversi Nilai DN
ke BT | Klasifikasi nilai BT | Layout-ing Peta | Membuat Animasi
Peta
Bulan Mei 2013 | Bulan Juni 2013 | Bulan Juli 2013 | Bulan Agustus 2013 |
subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link
subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link
subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link
subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link
Beranda /
Informasi Peta Curah Hujan
tday =new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
tmonth=new
Array("January","February","Maret","April","Mei","Juni","July","Agustus","September","Oktober","No
vember","Desember");
function GetClock(){
d = new Date();
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
nsec = d.getSeconds();
if(nyear
3. Script Tutorial (tutorial.html)
Tutorial
Bagaimana cara untuk membuat Peta Curah Hujan ?? Apa saja data yang perlu
disiapkan ?? Software pendukung apa saja yang diperlukan ?? Tenang tenang.. Satu persatu kita akan
mengupas dan menjelaskannya semuanya disini. Bagi yang belum mempunyai software-software
pendukungnya, disini tersedia juga link-link untuk mengunduh software tersebut.
Oke, pertama kita mulai untuk menyiapkan bahan (data) dan peralatannya
(software).
Data - data yang dibutuhkan untuk membuat Peta Curah Hujan ini adalah :
1. Peta Administrasi Indonesia
2. Data Citra MTSAT - 1R.
untuk Data Citra MTSAT-1R dapat diunduh secara gratis di website resmi Kochi - Jepang, untuk
mengunduh silahkan klik disini.
Data yang berhasil diunduh formatnya berupa file kompresan berformat .gz , ini bisa diekstrak
dengan menggunakan .7zip atau winrar.
Kemudian untuk software - software pengolahan data adalah sebagai berikut : (klik untuk mendownload)
1. ENVI
4.3 ,
2. ER
Mapper 7.0 ,
3. ArcGIS 9.3 ,
4. XAMPP
,
5. Notepad
++ ,
6. Macromedia Flash MX ,
7. Macromedia
Dreamweaver 8 ,
Langkah - langkah dalam pembuatan Peta Curah Hujan dapat dilihat pada link
- link tutorial dibawah ini. Agar saudara tidak salah dalam langkah - langkah pembuatan peta nya,
berikut adalah diagram alir nya :
Gambar. Diagram Alir
Selamat mencoba, semoga berhasil dan bermanfaat. Terima Kasih.
1. Konversi PGM ke ERS
Covert file dilakukan untuk mengubah format file dari format .pgm kedalam format
.ers agar bisa dibuka dan dilakukan pengolahan data di software Er-Mapper 7.01. Pengconvert-an file dilakukan dengan menggunakan software ENVI 4.3. Langkahlangkah konversi adalah sebagai berikut :
2. Koreksi Geometrik dengan
GCP Point Koreksi Geometrik pada dasarnya adalah meningkatkan ketelitian geometrik dengan
menggunakan titik kendali / kontrol tanah (Ground Control Point biasa disingkat GCP).
GCP dimaksud adalah titik yang diketahui koordinatnya secara tepat dan dapat terlihat pada citra
inderaja satelit seperti perempatan jalan dan lain-lain. Adapun langkah-langkah untuk melakukan
koreksi geometrik adalah sebagai berikut :
3. Penggabungan Data Tiap
Jam menjadi Data Harian Untuk melakukan penggabungan data diperlukan langkah-langkahnya
sebagai berikut:
4. Konversi Nilai DN ke
Brightness Temperature (BT) Data Citra MTSAT-1R itu berupa data
raster yang cell value -nya masih berupa nilai warna pixel belum berupa nilai
brightness temperature yang sebenarnya. Oleh karena itu, untuk membuat Peta
Curah Hujan diperlukan nilai Brightness Temperature yang sebenarnya untuk
melakukan klasifikasi sehingga bisa dilakukan identifikasi terhadap peta tersebut.
Berikut adalah langkah - langkah untuk melakukan konversi
nilai Digital Number (DN) ke Brightness Temperature
(BT) :
5. Klasifikasi nilai BT
(Brightness Temperature)Klasikasi nilai Brightness Temperature (BT) ini dilakukan
untuk melakukan pengkelompokan agar bisa diidentifikasi area-area yang terindikasi terjadi Hujan
Lebat, Hujan Sedang, Hujan Ringan ataupun malah Tidak Hujan (Cerah).
Adapun klasifikasi nilai Brightness Temperature yaitu :
6. Layout-ing Peta via Arc
GIS Dalam penelitian ini, proses layouting peta
dilakukan dengan software ArcGIS. Data yang digunakan adalah citra hasil klasifikasi,
yaitu data citra MTSAT-1R yang sudah diolah di Er Mapper dan Peta Administrasi Indonesia 2010.
Pembuatan peta curah hujan dilakukan dengan menggabungkan data spasial Peta Administrasi
Indonesia dengan hasil pengolahan citra MTSAT-1R yang telah di klasifikasi sebelumnya.
7. Membuat Animasi Peta
via Macromedia Flash Macromedia Flash adalah software yang salah satunya digunakan untuk
membuat animasi bergerak yang terdiri dari gambar - gambar. Berikut ini adalah langkah - langkah
untuk membuat animasinya :
4. Script Peta Curah Hujan (peta.html)
Peta Curah Hujan
Berikut adalah Peta Curah Hujan yang merupakan hasil dari
pengolahan data citra MTSAT-1R yang digabungkan dengan
data Administrasi Pulau Jawa Tahun 2010 :
Peta Bulan Mei 2013
Peta Bulan Juni 2013
Peta Bulan Juli 2013
Peta Bulan Agustus 2013
Anda juga dapat membuat Peta Curah Hujan sendiri dengan mengikuti step-step
yang telah saya posting di Menu Tutorial.
Terima Kasih
a. Script Peta Bulan Mei 2013 (peta_mei.html)
Peta Curah Hujan Bulan Mei 2013
Berikut adalah Peta Curah Hujan Bulan Mei 2013 :
Anda juga dapat melihat peta curah hujan harian (per
tanggal) sesuai dengan pilihan anda.
beikut adalah Kalender Bulan Mei 2013 :
Minggu
Senin
Selasa
Rabu
Kamis
Jum'at
Sabtu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
About Us | Site Map | Contact Us | © 2013 Dian Ika
Aryani - Teknik Geodesi UNDIP
b. Script Peta Bulan Juni 2013 (peta_juni.html)
Peta Curah Hujan Bulan Juni 2013
Berikut adalah Peta Curah Hujan Bulan Juni 2013 :
Anda juga dapat melihat peta curah hujan harian (per
tanggal) sesuai dengan pilihan anda.
beikut adalah Kalender Bulan Juni 2013 :
Minggu
Senin
Selasa
Rabu
Kamis
Jum'at
Sabtu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
About Us | Site Map | Contact Us | © 2013 Dian Ika
Aryani - Teknik Geodesi UNDIP
c. Script Peta Bulan Juli 2013 (peta_juli.html)
Peta Curah Hujan Bulan Juli 2013
Berikut adalah Peta Curah Hujan Bulan Juli 2013 :
Anda juga dapat melihat peta curah hujan harian (per
tanggal) sesuai dengan pilihan anda.
beikut adalah Kalender Bulan Juli 2013 :
Minggu
Senin
Selasa
Rabu
Kamis
Jum'at
Sabtu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
About Us | Site Map | Contact Us | © 2013 Dian Ika
Aryani - Teknik Geodesi UNDIP
d. Script Peta Bulan Agustus 2013 (peta_agust.html)
Peta Curah Hujan Bulan Agustus 2013
Berikut adalah Peta Curah Hujan Bulan Agustus 2013 :
Anda juga dapat melihat peta curah hujan harian (per
tanggal) sesuai dengan pilihan anda.
berikut adalah Kalender Bulan Agustus 2013 :
Minggu
Senin
Selasa
Rabu
Kamis
Jum'at
Sabtu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
LAMPIRAN I
(Lembar Asistensi)
LAMPIRAN II
(Peta Curah Hujan)
Gambar : Citra Satelit MTSAT sebelum dilakukan pengolahan
Gambar : Citra Satelit MTSAT setelah dilakukan klasifikasi BT
LAMPIRAN III
(Script Website)
SCRIPT WEBSITE
1. Script CSS (emx_nav_left.css)
/***********************************************/
/* emx_nav_left.css
*/
/* Use with template Halo_leftNav.html
*/
/***********************************************/
/***********************************************/
/* HTML tag styles
*/
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(bg_grad.jpg) fixed;
}
#pagecell1 #pageName img {
}
/******* hyperlink and anchor tag styles *******/
a:link, a:visited{
color: #005FA9;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
/************** header tag styles **************/
h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}
h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
/*************** list tag styles ***************/
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
/********* form and related tag styles *********/
form {
margin: 0;
padding: 0;
}
label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}
input{
font-family: Arial,sans-serif;
}
/***********************************************/
/* Layout Divs
*/
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #F5f7f7;
}
#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
#content{
padding: 10px 10px 10px 10px;
margin:0px 0px 0px 178px;
border-left: 1px solid #ccd2d2;
background-color: #FFFFFF;
}
/***********************************************/
/* Component Divs
*/
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
font-weight: normal;
font-weight:bolder;
background-image: url(images/bg_menu-atas-hover.gif);
background-repeat: repeat;
text-indent: 10px;
}
/************** utility styles *****************/
#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}
#utility a{
color: #ffffff;
}
#utility a:hover{
text-decoration: underline;
}
/************** pageName styles ****************/
#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
background: #F3FF66;
}
#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}
#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
width: 74px;
height: 78px;
overflow: visible;
}
/************* globalNav styles ****************/
#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(glbnav_background.gif);
}
#globalNav img{
margin-bottom: -4px;
}
#gnl {
position: absolute;
top: 0px;
left:0px;
}
#gnr {
position: absolute;
top: 0px;
right:0px;
}
#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
width: 472px;
}
a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}
a.glink:hover{
background-image: url(glblnav_selected.gif);
text-decoration: none;
}
.skipLinks {display: none;}
/************ subglobalNav styles **************/
.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}
.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}
.subglobalNav a:hover{
color: #cccccc;
}
/*************** search styles *****************/
#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}
#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}
#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;
}
#search a:hover{
margin: 0px;
}
/************* breadCrumb styles ***************/
#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
background: #F3FF66;
}
#breadCrumb a{
color: #AAAAAA;
}
#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}
/************** feature styles *****************/
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
margin: 4;
}
html>body .feature {
height: auto;
margin-right: 30px}
.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}
.feature img{
float: left;
padding: 0px 10px 0px 0px;
}
/*************** story styles ******************/
.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
margin-right: 50px;
text-align:justify;
text-indent:40px;
line-height: 2;
}
.contactus {
padding: 10px 0px 0px 10px;
font-size: 80%;
margin-right: 150px;
text-align:justify;
}
.story h3{
font: bold 175% Arial,sans-serif;
color: #000000;
}
.story p {
padding: 0px 0px 10px 0px;
line-height: 2;
}
.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display: block;
padding-bottom: 5px;
}
.story a.capsule:hover{
text-decoration: underline;
}
td.storyLeft{
padding-right: 12px;
}
/************** siteInfo styles ****************/
#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}
#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}
/************ sectionLinks styles **************/
#sectionLinks{
margin: 0px;
padding: 0px;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}
#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}
#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}
/************* relatedLinks styles **************/
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
.relatedLinks a{
display: block;
}
/**************** half styles *******************/
.half { width: 400px }
.h20 { height: 20px }
.h40 { height: 40px }
img { margin: 0; padding: 0; border: none }
.img_border { background: #525252; padding: 4px; border: 1px solid #282828 }
.img_nom { display: block; margin-bottom: 15px }
.img_fl { float: left; margin: 3px 15px 5px 0 }
.img_fr { float: left; margin: 3px 0 5px 15px }
.left { float: left }
.right { float: right }
/********************* end **********************/
#pagecell1 #content .tutorial {
font: normal 12px "Times New Roman", Times, serif;
}
#capsule.content {
font: normal 14px/normal "Times New Roman", Times, serif;
letter-spacing: normal;
text-align: justify;
word-spacing: normal;
padding: 30px;
height: auto;
width: auto;
border: 3px dotted #99CC00;
}
#time {
font-family: Garamond;
font-size: 16px;
color:black;
padding:3px;
width:170px;
text-align:center;
position:relative;
margin:40px 0px -75px 1000px;
}
2. Script Beranda (index.html)
Home - SIG Curah Hujan
107)){
for (var i=1; i
skip to: page content | links on
this page | site navigation | footer (site
information)
Informasi Peta Curah Hujan
Beranda
Tutorial
Peta Hubungi Kami
subglobal1 link | subglobal1 link | subglobal1 link | subglobal1 link | subglobal1 link | subglobal1 link | subglobal1 link
subglobal2 link | subglobal2 link | subglobal2 link | subglobal2 link | subglobal2 link | subglobal2 link | subglobal2 link
Konversi PGM ke ERS
| Koreksi Geometrik | Penggabungan Data | Konversi Nilai DN
ke BT | Klasifikasi nilai BT | Layout-ing Peta | Membuat Animasi
Peta
Bulan Mei 2013 | Bulan Juni 2013 | Bulan Juli 2013 | Bulan Agustus 2013 |
subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link | subglobal5 link
subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link | subglobal6 link
subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link | subglobal7 link
subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link | subglobal8 link
Beranda /
Informasi Peta Curah Hujan
tday =new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
tmonth=new
Array("January","February","Maret","April","Mei","Juni","July","Agustus","September","Oktober","No
vember","Desember");
function GetClock(){
d = new Date();
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
nsec = d.getSeconds();
if(nyear
3. Script Tutorial (tutorial.html)
Tutorial
Bagaimana cara untuk membuat Peta Curah Hujan ?? Apa saja data yang perlu
disiapkan ?? Software pendukung apa saja yang diperlukan ?? Tenang tenang.. Satu persatu kita akan
mengupas dan menjelaskannya semuanya disini. Bagi yang belum mempunyai software-software
pendukungnya, disini tersedia juga link-link untuk mengunduh software tersebut.
Oke, pertama kita mulai untuk menyiapkan bahan (data) dan peralatannya
(software).
Data - data yang dibutuhkan untuk membuat Peta Curah Hujan ini adalah :
1. Peta Administrasi Indonesia
2. Data Citra MTSAT - 1R.
untuk Data Citra MTSAT-1R dapat diunduh secara gratis di website resmi Kochi - Jepang, untuk
mengunduh silahkan klik disini.
Data yang berhasil diunduh formatnya berupa file kompresan berformat .gz , ini bisa diekstrak
dengan menggunakan .7zip atau winrar.
Kemudian untuk software - software pengolahan data adalah sebagai berikut : (klik untuk mendownload)
1. ENVI
4.3 ,
2. ER
Mapper 7.0 ,
3. ArcGIS 9.3 ,
4. XAMPP
,
5. Notepad
++ ,
6. Macromedia Flash MX ,
7. Macromedia
Dreamweaver 8 ,
Langkah - langkah dalam pembuatan Peta Curah Hujan dapat dilihat pada link
- link tutorial dibawah ini. Agar saudara tidak salah dalam langkah - langkah pembuatan peta nya,
berikut adalah diagram alir nya :
Gambar. Diagram Alir
Selamat mencoba, semoga berhasil dan bermanfaat. Terima Kasih.
1. Konversi PGM ke ERS
Covert file dilakukan untuk mengubah format file dari format .pgm kedalam format
.ers agar bisa dibuka dan dilakukan pengolahan data di software Er-Mapper 7.01. Pengconvert-an file dilakukan dengan menggunakan software ENVI 4.3. Langkahlangkah konversi adalah sebagai berikut :
2. Koreksi Geometrik dengan
GCP Point Koreksi Geometrik pada dasarnya adalah meningkatkan ketelitian geometrik dengan
menggunakan titik kendali / kontrol tanah (Ground Control Point biasa disingkat GCP).
GCP dimaksud adalah titik yang diketahui koordinatnya secara tepat dan dapat terlihat pada citra
inderaja satelit seperti perempatan jalan dan lain-lain. Adapun langkah-langkah untuk melakukan
koreksi geometrik adalah sebagai berikut :
3. Penggabungan Data Tiap
Jam menjadi Data Harian Untuk melakukan penggabungan data diperlukan langkah-langkahnya
sebagai berikut:
4. Konversi Nilai DN ke
Brightness Temperature (BT) Data Citra MTSAT-1R itu berupa data
raster yang cell value -nya masih berupa nilai warna pixel belum berupa nilai
brightness temperature yang sebenarnya. Oleh karena itu, untuk membuat Peta
Curah Hujan diperlukan nilai Brightness Temperature yang sebenarnya untuk
melakukan klasifikasi sehingga bisa dilakukan identifikasi terhadap peta tersebut.
Berikut adalah langkah - langkah untuk melakukan konversi
nilai Digital Number (DN) ke Brightness Temperature
(BT) :
5. Klasifikasi nilai BT
(Brightness Temperature)Klasikasi nilai Brightness Temperature (BT) ini dilakukan
untuk melakukan pengkelompokan agar bisa diidentifikasi area-area yang terindikasi terjadi Hujan
Lebat, Hujan Sedang, Hujan Ringan ataupun malah Tidak Hujan (Cerah).
Adapun klasifikasi nilai Brightness Temperature yaitu :
6. Layout-ing Peta via Arc
GIS Dalam penelitian ini, proses layouting peta
dilakukan dengan software ArcGIS. Data yang digunakan adalah citra hasil klasifikasi,
yaitu data citra MTSAT-1R yang sudah diolah di Er Mapper dan Peta Administrasi Indonesia 2010.
Pembuatan peta curah hujan dilakukan dengan menggabungkan data spasial Peta Administrasi
Indonesia dengan hasil pengolahan citra MTSAT-1R yang telah di klasifikasi sebelumnya.
7. Membuat Animasi Peta
via Macromedia Flash Macromedia Flash adalah software yang salah satunya digunakan untuk
membuat animasi bergerak yang terdiri dari gambar - gambar. Berikut ini adalah langkah - langkah
untuk membuat animasinya :
4. Script Peta Curah Hujan (peta.html)
Peta Curah Hujan
Berikut adalah Peta Curah Hujan yang merupakan hasil dari
pengolahan data citra MTSAT-1R yang digabungkan dengan
data Administrasi Pulau Jawa Tahun 2010 :
Peta Bulan Mei 2013
Peta Bulan Juni 2013
Peta Bulan Juli 2013
Peta Bulan Agustus 2013
Anda juga dapat membuat Peta Curah Hujan sendiri dengan mengikuti step-step
yang telah saya posting di Menu Tutorial.
Terima Kasih
a. Script Peta Bulan Mei 2013 (peta_mei.html)
Peta Curah Hujan Bulan Mei 2013
Berikut adalah Peta Curah Hujan Bulan Mei 2013 :
Anda juga dapat melihat peta curah hujan harian (per
tanggal) sesuai dengan pilihan anda.
beikut adalah Kalender Bulan Mei 2013 :
Minggu
Senin
Selasa
Rabu
Kamis
Jum'at
Sabtu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
About Us | Site Map | Contact Us | © 2013 Dian Ika
Aryani - Teknik Geodesi UNDIP
b. Script Peta Bulan Juni 2013 (peta_juni.html)
Peta Curah Hujan Bulan Juni 2013
Berikut adalah Peta Curah Hujan Bulan Juni 2013 :
Anda juga dapat melihat peta curah hujan harian (per
tanggal) sesuai dengan pilihan anda.
beikut adalah Kalender Bulan Juni 2013 :
Minggu
Senin
Selasa
Rabu
Kamis
Jum'at
Sabtu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
About Us | Site Map | Contact Us | © 2013 Dian Ika
Aryani - Teknik Geodesi UNDIP
c. Script Peta Bulan Juli 2013 (peta_juli.html)
Peta Curah Hujan Bulan Juli 2013
Berikut adalah Peta Curah Hujan Bulan Juli 2013 :
Anda juga dapat melihat peta curah hujan harian (per
tanggal) sesuai dengan pilihan anda.
beikut adalah Kalender Bulan Juli 2013 :
Minggu
Senin
Selasa
Rabu
Kamis
Jum'at
Sabtu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
About Us | Site Map | Contact Us | © 2013 Dian Ika
Aryani - Teknik Geodesi UNDIP
d. Script Peta Bulan Agustus 2013 (peta_agust.html)
Peta Curah Hujan Bulan Agustus 2013
Berikut adalah Peta Curah Hujan Bulan Agustus 2013 :
Anda juga dapat melihat peta curah hujan harian (per
tanggal) sesuai dengan pilihan anda.
berikut adalah Kalender Bulan Agustus 2013 :
Minggu
Senin
Selasa
Rabu
Kamis
Jum'at
Sabtu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19