Script Code Panggil File .osm bisa di sebut openstreetmap

Malam ini program satu district (ermera) di East Timor sudah hampir selesai baru 90% setelah 2 hari tidak tidur untuk memahami Mapserver dan script codenya, sungguh menggiurkan untuk menjadi master script geo soalnya kenapa ? banyak script dan code yang belum banyak orang tahu :D.

Ini adalah tentang script panggil untuk file bertype OSM atau Openstreetmap yang di unduh dari Quantum GIS, nah saya menggunakan file dari openstreetmap ini untuk layer raster yang saya download dengan mudah map tersebut melalui Quantum GIS, saya belajar otodidak :D hanya dalam hitungan minggu dan Alhamdullilah saya paham, karena dasar sudah mengenal CSS, Php, Mysql, Postgresql, Phyton, pearl, dan masih banyak lagi pokoknya tentang code :D nyombong dikit gpp kan :D .. maklum walaupun keahlian seabreg atau sebanyak itu, tetap saja saya masih pengangguran :( walaupun sudah mempunyai Istri dan sekarang Istriku yang tercinta sedang mengandung 3 bulan jalan :D .. Doakan ya supaya sehat ... lho kok malah curhat ya hahahaha

ok ini adalah script panggilnya :

1. ini file kecil hanya menampilkan map saja :


1:  <!DOCTYPE HTML>  
2:  <title>OpenLayers Simplest Example</title>  
3:  <div id="demoMap" style="height:250px"></div>  
4:  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>  
5:  <script>  
6:    map = new OpenLayers.Map("demoMap");  
7:    map.addLayer(new OpenLayers.Layer.OSM());  
8:    map.zoomToMaxExtent();  
9:  </script>  

silahkan demomap Isi dengan file yang kalian punya. dan lanjut ke script panggil osm yang kedua di bawah ini


1:  <!DOCTYPE HTML>  
2:  <html>  
3:   <head>  
4:    <title>OpenLayers Demo</title>  
5:    <style type="text/css">  
6:     html, body, #basicMap {  
7:       width: 100%;  
8:       height: 100%;  
9:       margin: 0;  
10:     }  
11:    </style>  
12:    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>  
13:    <script>  
14:     function init() {  
15:      map = new OpenLayers.Map("basicMap");  
16:      var mapnik     = new OpenLayers.Layer.OSM();  
17:      var fromProjection = new OpenLayers.Projection("EPSG:4326");  // Transform from WGS 1984  
18:      var toProjection  = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection  
19:      var position    = new OpenLayers.LonLat(13.41,52.52).transform( fromProjection, toProjection);  
20:      var zoom      = 15;   
21:      map.addLayer(mapnik);  
22:      map.setCenter(position, zoom );  
23:     }  
24:    </script>  
25:   </head>  
26:   <body onload="init();">  
27:    <div id="basicMap"></div>  
28:   </body>  
29:  </html>  

Jika anda menggunakan png atau jpg pada layer dasar gunakan code ini


1:   var newLayer = new OpenLayers.Layer.OSM("New Layer", "URL_TO_TILES/${z}/${x}/${y}.png", {numZoomLevels: 19});  
2:   map.addLayer(newLayer);  

yang di kasih warna merah silahkan masukan URL gambar anda. lanjut ke script Zoom in dan Zoom Out, ini scriptnya :


1:   var fromProjection = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984  
2:     var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection  
3:     var extent = new OpenLayers.Bounds(-1.32,51.71,-1.18,51.80).transform(fromProjection,toProjection);  
4:     function init() {  
5:      var options = {  
6:       restrictedExtent : extent,  
7:       controls: [  
8:        new OpenLayers.Control.Navigation(),  
9:        new OpenLayers.Control.PanZoomBar(),  
10:        new OpenLayers.Control.Attribution()  
11:       ]  
12:      };  
13:      map = new OpenLayers.Map("Map", options);  
14:      var newLayer = new OpenLayers.Layer.OSM(  
15:       "New Layer",   
16:       "URL_TO_TILES/${z}/${x}/${y}.png",   
17:       {zoomOffset: 13, resolutions: [19.1092570678711,9.55462853393555,4.77731426696777,2.38865713348389]}  
18:      );  
19:      map.addLayer(newLayer);  
20:      map.setCenter(new OpenLayers.LonLat(-1.25,51.75).transform(fromProjection,toProjection), 0); // 0=relative zoom level  
21:     }  

bagaimana sampai disini sudah paham belum mas, gan, bro, brad :D , lanjut ini adalah script Mengubah lokasi garis atribusi teks dan skala. Anda dapat mengganti lokasi dari teks atribusi dan garis skala, dan font yang digunakan, dengan menambahkan baris berikut di bagian gaya.



1:  div.olControlAttribution, div.olControlScaleLine {  
2:       font-family: Verdana;  
3:       font-size: 0.7em;  
4:       bottom: 3px;  
5:     }  

Anda dapat melayani script OpenLayers.js dari server Anda sendiri, download saja misalnya script :


1:  $wget http://www.openlayers.org/api/OpenLayers.js  

dan kemudian memberikan referensi file relatif di tempat url untuk script dalam HTML Anda
 

Tambahkan Spidol,,,, hahaha
maksudnya script untuk menandai, ini dia scriptnya

1:  <!DOCTYPE HTML>  
2:  <html>  
3:  <head>  
4:  <title>OpenLayers Simplest Example</title>  
5:  </head>  
6:  <body>  
7:  <div id="Map" style="height:250px"></div>  
8:  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>  
9:  <script>  
10:    var lat      = 47.35387;  
11:    var lon      = 8.43609;  
12:    var zoom      = 18;  
13:    var fromProjection = new OpenLayers.Projection("EPSG:4326");  // Transform from WGS 1984  
14:    var toProjection  = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection  
15:    var position    = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);  
16:    map = new OpenLayers.Map("Map");  
17:    var mapnik     = new OpenLayers.Layer.OSM();  
18:    map.addLayer(mapnik);  
19:    var markers = new OpenLayers.Layer.Markers( "Markers" );  
20:    map.addLayer(markers);  
21:    markers.addMarker(new OpenLayers.Marker(position));  
22:    map.setCenter(position, zoom);  
23:  </script>  
24:  </body>  
25:  </html>  

Disini hampir selesai tips untuk menampilkan map osm, gunakan Proj4js untuk transformasi lainnya

Contoh memungkinkan Anda menggunakan koordinat WGS84 untuk menavigasi dalam sphericalMercator diproyeksikan peta OSM. Jika Anda berada di koordinat proyeksi yang berbeda, Anda dapat menambahkan Proj4js untuk melakukan reprojections.

Tambahkan script proj4js.js dari http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-combined.js ke halaman Anda (setelah lib OpenLayers!)

Tambahkan Defintion proyeksi Anda (ini dapat diperoleh dari proyek PROJ4, Anda perlu catatan dari \ proj \ nad \ EPSG

Lihat http://svn.osgeo.org/metacrs/proj4js/trunk/lib/defs untuk contoh

Contoh untuk EPSG: 28.992 (new RD)

Proj4js.defs ["EPSG: 28.992"] = "+ title = Amersfoort / RD New + proj = Sterea + lat_0 = 52,15616055555555 + lon_0 = 5,38763888888889 + k = 0,9999079 + x_0 = 155000 + y_0 = 463000 + ellps = Bessel + unit = m + no_defs ";

Kemudian, Anda dapat menggunakan EPSG: 28.992 koordinat dan kode EPSG di transformfunction bukannya WGS84, script panggilnya ini


1:  map.setCenter(  
2:    new OpenLayers.LonLat(155000,465000) // Center of the map  
3:      .transform(  
4:        new OpenLayers.Projection("EPSG:28992"), // transform from new RD   
5:        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection  
6:      ),  
7:    15); // Zoom level  

dan selesai :D
semoga bermanfaat, buat yang bingung, jangan malu-malu tanya aja... kalo ada waktu pasti saya akan segera jawab.

Previous
Next Post »
0 Komentar

Terimakasih telah berkomentar