Mengenal Controls Pada Openlayers
kali ini saya akan membahasa tentang Controls di Opanlayers turorial ini adalah lanjutan dari tutorial sebelumnya yang membahas tentang Cara menampilkan peta dengan library openlayers.
jika anda belum membaca tutorial sebelumnya sara sarankan untuk membacanya terlebih dahulu, karena dalam tutorial sebelumnya ada library yang harus anda download terlebih dahulu.
Ok, langsung saja seperti dalam tutorial sebelum sebelunya buatlah projek terlebih dahulu dangan nama terserah anda dan simpan file dengan nama index.php kemudian salin kode berikut
<!DOCTYPE html>Attribution adalah menonaktifkan drag di peta dengan cursor, sekarang buka projek yang sudah anda buat dengan browser dan lihat hasilnya.
<html>
<head>
<title>MENAMPILKAN CONTROL OPENLAYER</title>
<script type="text/javascript" src="openlayers-2.12/OpenLayers.js"></script>
<script type="text/javascript">
window.onload = function() {
// peta osm
var osm = new OpenLayers.Layer.OSM('Map OSM');
var map = new OpenLayers.Map({
// div element
'div': 'map',
// set center
'center': new OpenLayers.LonLat(0, 0),
// set zoom
'zoom': 2,
// set controls
'controls': [new OpenLayers.Control.Attribution()],
// set layer
'layers': [osm]
});
}
</script>
</head>
<body>
<div id="map" style="width: 900px; height: 600px;"></div>
</body>
</html>
Zoom berfungsi untuk menampilkan zoom in dan zoom out pada peta
// salin barissekarang refresh browser anda dan lihat hasilnya
'controls': [new OpenLayers.Control.Attribution()],
// dan ganti dengan
'controls': [new OpenLayers.Control.Zoom()],
PanZoomBar fungsinya sama seperti control Zoom hanya saja kalau di control PanZoomBar menampilkan zoom in dan zoom out dalam bentuk bar dan menampilkan arah untuk menggeser peta ke atas, kanan, bawah dan kiri
// salin barissekarang refresh browser anda dan lihat hasilnya
'controls': [new OpenLayers.Control.Attribution()],
// dan ganti dengan
'controls': [new OpenLayers.Control.PanZoomBar()],
ScaleLine berfungsi untuk menampilkan ketingiian permukaan pada saat anda zoom in atau zoom out
// salin barissekarang refresh browser anda dan lihat hasilnya
'controls': [new OpenLayers.Control.Attribution()],
// dan ganti dengan
'controls': [new OpenLayers.Control.ScaleLine()],
Navigation adalah kebalikan dari Attribution yaitu mengaktifkan drag di peta dengan cursor
// salin barissekarang refresh browser anda dan lihat hasilnya
'controls': [new OpenLayers.Control.Attribution()],
// dan ganti dengan
'controls': [new OpenLayers.Control.Navigation()],
MousePosition berfungsi untuk menampilkan posisi Latitude dan Longitude pada saat mouse kita gerakan di area peta
// salin barissekarang refresh browser anda dan lihat hasilnya
'controls': [new OpenLayers.Control.Attribution()],
// dan ganti dengan
'controls': [new OpenLayers.Control.MousePosition()],
Permalink berfungsi untuk menentukan posisi center pada peta, jika anda klik Permalink yang ada di peta, anda akan mendapatkan perameter di url dengan Latitude dan Longutide sesuai pada saat anda klik Permalink
// salin barissekarang refresh browser anda dan lihat hasilnya
'controls': [new OpenLayers.Control.Attribution()],
// dan ganti dengan
'controls': [new OpenLayers.Control.Permalink()],
OverviewMap berfungsi untuk melihat peta dengan versi mini
// salin barissekarang refresh browser anda dan lihat hasilnya
'controls': [new OpenLayers.Control.Attribution()],
// dan ganti dengan
'controls': [new OpenLayers.Control.OverviewMap()],
LayerSwitcher berfungsi untuk merubah jenis peta, sesuai layer yang kita pilih, buat file dengan nama index2.php dan simpan file di dalam projek yang sudah anda buat kemudian salin kode berikut
<!DOCTYPE html>sekarang arahkan url ke index2.php dan lihat hasilnya
<html>
<head>
<title>MENAMPILKAN CONTROL OPENLAYER</title>
<script src="http://maps.google.com/maps/api/js?v=3.7&sensor=false"></script>
<script type="text/javascript" src="openlayers-2.12/OpenLayers.js"></script>
<script type="text/javascript">
window.onload = function() {
// peta osm
var osm = new OpenLayers.Layer.OSM('Map OSM');
// peta google
var gs = new OpenLayers.Layer.Google('Google Street');
var gp = new OpenLayers.Layer.Google('Google Terain', {type: google.maps.MapTypeId.TERRAIN});
var gg = new OpenLayers.Layer.Google('Google Satellite', {type: google.maps.MapTypeId.SATELLITE});
var gh = new OpenLayers.Layer.Google('Google Hibrid', {type: google.maps.MapTypeId.HYBRID});
var map = new OpenLayers.Map({
// div element
'div': 'map',
// set center
'center': new OpenLayers.LonLat(0, 0),
// set zoom
'zoom': 2,
// set control
'controls': [new OpenLayers.Control.LayerSwitcher()],
// set layers
'layers': [osm, gs, gp, gg, gh]
});
}
</script>
</head>
<body>
<div id="map" style="width: 900px; height: 600px;"></div>
</body>
</html>
untuk control anda bisa menggunakannya lebih dari 1 control, untuk menggunakan lebih dari 1 control gunakan tanda koma di dalam array control
// tambahkan pada barissekarang refresh index2.php dan lihat hasilnya
'controls': [new OpenLayers.Control.LayerSwitcher()],
// menjadi
'controls': [new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.PanZoomBar()],
Ok, sampai disini dulu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat.
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.
Postingan Lebih Baru
Postingan Lebih Baru
Postingan Lama
Postingan Lama
Komentar