Contoh Sistem Informasi Geografis dengan Menggunakan Polyline Encoder Utility
Sistem Informasi Geografis Jalur Angkot dengan Menggunakan Polyline Encoder Utility
- Masuk kepartisi C dan pilih httdocs
- Klik program yang sudah dibuat dengan php
- Maka akan tampil Kota Padang
- Belum ada polyline karena titik koordinat belum diinputkan
- Mencari Titik Koordinat Balai Baru – Pasar Raya
- Dan juga mencari ruas jalan tercepat dari Baru – Pasar Raya
- Mengganti Script dari license Google MAP API
- Mengganti Titik Koordinat dengan Titik Koordinat Kota Padang
- Mengganti Titik Koordinat dengan Titik Koordinat Balai Baru
- Mengganti Titik Koordinat dengan Titik Koordinat Pasar Raya
- Stelah diganti Titik Koordinat descript Maka Akan tampil seperti Gambar diatas Koordinat Balai Baru – Pasar Raya
- Mencari Titik Koordinat Tiap-Tiap Ruas jalan
- Guna nya untuk membuat jalan yg berkelok agar dapt terbaca oleh Polyline
- Gambar diatas merupakan Titik Koordinat tiap-tiap ruas jalan yang berkelok
- Google sudah menyediakan tool bernama Polyline Encoded Utility
- Masukan Nama Kota yg ingin dibuat Polyline
- inputkan Titik Koordinat ruas jalan yg sudah didapat pada Lattitude dan Longitude
- Inputkan semua Titik Koordinat dengan cara ADD Location
- Maka akan tampi garis/Polyline tiap2 ruas jalan
- Copy ke Notepad Code pada Bagian Encoded Polyline dan Encode Levels
- Masukan Code yang sudah di Copy tadi Ke dalam Coding php
- Ganti Code yang sebelum nya dengan kode yang udah di Copy dari Encoded Polyline
- Masuk kedalam httdocs
- Buka Program yang sudah dibuat menggunakan php
LAMPIRAN SCRIPTT PHP :
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=4&key=AIzaSyC1SRRz1Qt3f28l5UYnerYU1SO4Rvhv81A&libraries=geometry"></script>
<script type="text/javascript">
/* tentukan lokasi tengah peta, titik awal tugu dan titik akhir ugm */
var tengahpeta = new google.maps.LatLng(-0.9038203,100.4688471);
var balaibaru = new google.maps.LatLng(-0.9026067,100.3971573);
var pasarraya = new google.maps.LatLng(-0.9497051,100.360306);
var marker;
var map;
// Functi untuk decoding level encoding polyline
function decodeLevels(encodedLevelsString) {
var decodedLevels = [];
for (var i = 0; i < encodedLevelsString.length; ++i) {
var level = encodedLevelsString.charCodeAt(i) - 63;
decodedLevels.push(level);
}
return decodedLevels;
}
/* fungsi inisialisasi peta, dipanggil di body onload*/
function initialize() {
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: tengahpeta
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
/*maker di balai baru */
marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
position: balaibaru
});
/* marker di pasar raya */
marker1 = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
position: pasarraya
});
/* ini adalah data polyline yang kita buat dengan polyline encoder utility */
var str="hhoDgywcRmJrJjoEoUpLnx@lj@ffAd@~M|`@neBlEg@";
var array = google.maps.geometry.encoding.decodePath(str);
var levels = decodeLevels("BBBBBBBBBBB");
/* buat parameter dari polyline seperti warna dan ketebalan garis */
var Poly = new google.maps.Polyline({
path: array,
levels: levels,
strokeColor: 'F21111',
strokeOpacity: 1.0,
strokeWeight: 3
});
/* gambarkan polyline di peta */
Poly.setMap(map);
}
</script>
</head>
<!-- panggil javascript saat halaman dibuka -->
<body onload="initialize()">
<!-- ukuran lebar peta 100 dan tinggi 400px-->
<div id="map_canvas" style="width:100%; height: 600px;">map div</div>
0 Response to "Contoh Sistem Informasi Geografis dengan Menggunakan Polyline Encoder Utility"
Post a Comment