KUNJUNGI WEB SAYA

KUNJUNGI WEB SAYA
Tutorial Mapserver Chapter 1 By 4zh4rc0d

Tutorial Mapserver Chapter 1 By 4zh4rc0d

setelah lama meninggalkan shell gw pengen aktif di webmaster, tapi tidak jago dalam seo :( gk paham bgt dgn code igniter.. ok sore ini, pokoknya gw anggap sore pagi itu karena belum nono hahaha sebelum memulai semuanya w akan share apa yang gw alami ..

Tutorial ini menjelaskan bagaimana membangun aplikasi berbasis web pemetaan menggunakan Fusion dan MapServer .Ini mengasumsikan Anda sudah familiar dengan MapServer ekstensi PHP dan.

1. Konsep Esensial 

Hal ini sangat penting bahwa Anda memahami bagaimana MapServer bekerja. Jika Anda tidak akrab dengan MapServer dan menciptakan file peta, silakan tinjau dokumentasi MapServer (   http://mapserver.gis.umn.edu/docs ).

Fusion adalah menciptakan tentang sebuah aplikasi web. Anda akan membutuhkan beberapa keakraban dengan HTML, JavaScript dan CSS no code igniter :D >_< .

Bahasa pengembangan utama untuk membangun aplikasi Fusion adalah JavaScript, tetapi jika Anda perlu menambahkan server-side fungsi menggunakan ekstensi PHP / MapScript dari MapServer, maka pengetahuan tentang PHP juga diperlukan dan sangat di perlukan dalam hal Java.

Fusion membuat ekstensif menggunakan HTML statis dan dinamis yang dihasilkan. Anda perlu akrab dengan Document Object Model (DOM) yang lebih penting shell DOM dalam windows harus sedikit paham semua itu akan dilaksanakan oleh berbagai browser, dan perbedaan halus antara browser dalam bagaimana scripting dengan karya DOM. Meskipun dimungkinkan untuk menggunakan Fusion tanpa scripting DOM, ada kemungkinan bahwa sebagian besar aplikasi akan perlu menggunakan beberapa scripting untuk mencapai fungsi yang diinginkan.

Fusion membuat ekstensif menggunakan CSS untuk mencapai tampilan dan nuansa dalam cara yang minimal. Prinsip desain belakang banyak struktur komponen user interface dari Fusion adalah membiarkan browser melakukan sebanyak pekerjaan mungkin dengan layout engine asli. Ini adalah desain yang paling efisien dan alami untuk halaman web, dan mengurangi jumlah kode JavaScript yang perlu dijalankan oleh browser klien. Anda akan perlu untuk benar-benar memahami desain CSS dan konsep pelaksanaan dalam rangka untuk sepenuhnya menyesuaikan antarmuka Fusion, tetapi untuk menggunakan tampilan default dan nuansa Fusion dengan kustomisasi moderat tidak memerlukan pengetahuan yang lebih tentang CSS.


2. Tutorial Prasyarat 

3. Instalasi 

Instalasi Fusion sangat sederhana. Tentu saja, hal ini mengasumsikan Anda memiliki sebuah server web functionnal dengan MapServer diinstal disana. Setelah Anda download dan Fusion GMap-ms46, langkah berikutnya adalah untuk mengekstrak mereka. Dalam contoh ini, / opt / FGS / www / htdocs / adalah akar dokumen server Web.


$ Unzip fusion-1.0.4.zip-d / opt / FGS / www / htdocs /
 $ Unzip GMap-ms46.zip-d / opt / FGS / www / htdocs /


Sekarang Fusion dan data MapServer dipasang untuk tutorial pertama.


4. Konfigurasi 

 Kita sekarang akan mengkonfigurasi Fusion. Hanya ada satu file untuk konfigurasi umum Fusion: config.json. Dalam file ini, Anda dapat memodifikasi penggunaan skrip bahasa dengan Fusion (bahasa pemograman PHP yang di gunakan pada saat ini) dan beberapa jalur web akan tergantung pada konfigurasi server. Untuk tutorial ini, kita tidak akan mengubah mereka karena default sudah benar. Namun, Anda harus memverifikasi apakah jalur web untuk MapServer dan direktori sementara sudah benar. Direktori default untuk file sementara diatur ke "/ tmp". Pastikan bahwa Anda memiliki konfigurasi php jalan yang sama. (Php5.ini harus memiliki baris seperti: = "tmp /" session.save_path)

 ...
  "MapServer": {
      / * URL dari CGI MapServer yang ingin Anda gunakan.  * /
      "Cgi": "/ cgi-bin/mapserv",

Catatan: pada jendela, Anda perlu menentukan ekstensi exe pada mapserv, yaitu / cgi-bin/mapserv.exe.

5. Aplikasi Fusion

Cara paling sederhana untuk menunjukkan konsep inti dari Fusion adalah untuk membangun sebuah aplikasi kecil yang bisa bekerja. Untuk demo ini, kita akan menggunakan GMap-ms46 data sampel. Berikut adalah daftar fungsi (widget) yang digunakan oleh aplikasi ini, yaitu :
Widget ini harus dijelaskan dalam sebuah file xml bernama ApplicationDefinition . File ini menggambarkan konfigurasi aplikasi Fusion: peta file, sumber daya, dan widget . File ini akan berisi tag MAPFILE untuk MapServer dan semua widget yang diinginkan (Widget tag) di dalam tagwidgetset .
Pertama, buat direktori untuk aplikasi dan ekstrak ikon download dalam direktori ini. Ikon ini akan digunakan oleh widget.
  $ Mkdir / opt / FGS / www / htdocs / demo
 $ Unzip ikon-demo.zip-d / opt / FGS / www / htdocs / demo
Masih dalam direktori ini, membuat file baru bernama ApplicationDefinition.xml dan menyalin konten berikut di dalamnya:


<?xml version="1.0" encoding="UTF-8"?>
<ApplicationDefinition xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xsi:noNamespaceSchemaLocation="ApplicationDefinition-1.0.0.xsd">
  <MapSet xsi:type="MapSetType">x
    <MapGroup id="mapserver" xsi:type="MapType">    
      
      <Map xsi:type="MapLayerType">
        <Type>MapServer</Type>
        <SingleTile>true</SingleTile>
        <Extension>
          <MapFile>/opt/fgs/www/htdocs/gmap-ms46/htdocs/gmap75.map</MapFile>
        </Extension>
      </Map>
    
    </MapGroup>
  </MapSet>

  <WidgetSet xsi:type="WidgetSetType">
 
     <MapWidget xsi:type="WidgetType">
      <Name>Map</Name>
      <Type>Map</Type>
      <StatusItem>The map.</StatusItem>
      <MapId>mapserver</MapId>
    </MapWidget>

  <Widget xsi:type="UiWidgetType">
      <Name>Pan</Name>
      <Type>Pan</Type>
      <Description>Drag the map to view areas out of range.</Description>
      <ImageUrl>icons/pan.png</ImageUrl>
      <ImageClass/>
      <Tooltip>Pan mode</Tooltip>
      <Label/>
      <Disabled/>
  </Widget>
  
  <Widget xsi:type="UiWidgetType">
    <Name>ZoomIn</Name>
    <Type>Zoom</Type>
    <Description>Zoom</Description>
    <ImageUrl>icons/zoom-in.png</ImageUrl>
    <ImageClass/>
    <Tooltip>ZoomIn Mode</Tooltip>
    <Label/>
    <Disabled/>
    <Extension xsi:type="CustomContentType">
        <Tolerance>5</Tolerance>
        <Factor>2</Factor>
 </Extension>
  </Widget>

 <Widget xsi:type="UiWidgetType">
    <Name>ZoomOut</Name>
    <Type>Zoom</Type>
    <Description>Zoom</Description>
    <ImageUrl>icons/zoom-out.png</ImageUrl>
    <ImageClass/>
    <Tooltip>ZoomOut Mode</Tooltip>
    <Label/>
    <Disabled/>
    <Extension xsi:type="CustomContentType">
        <Tolerance>5</Tolerance>
        <Factor>2</Factor>
        <Direction>out</Direction>
      </Extension>
  </Widget>
 
  <Widget xsi:type="WidgetType">
    <Name>Legend</Name>
    <Type>Legend</Type>
    <StatusItem/>
  </Widget>
  
  </WidgetSet> 
  <Extension/>
</ApplicationDefinition>
Jangan lupa untuk mengubah jalur MAPFILE (MAPFILE tag). Jika Anda memeriksa file, Anda akan melihat ada tag Widget untuk semua fungsi dengan pilihan nya, yang sebagian besar tidak diperlukan untuk tutorial ini. Buat sekarang halaman template HTML bernama index.html untuk Fusion.S


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Fusion MapServer Tutorial</title>
    <script type="text/javascript" src="../fusion/lib/fusion.js"></script>
    <style type="text/css">
      @import url(../fusion/jx/css/jxskin-graphic.css);
      #bodyContent { position:relative; background-color:#dfe9f5; border: thin solid #000000; height:411px; width:760px; margin-top:25px;}
      #Map { position:absolute; top:35px; right:5px; width:439px; height:349px; border: thin solid #000000; float: right; visibility: visible; display:block; }
      #Legend { position:absolute; top:35px; left:5px; width:300px; height:349px; background-color:#ffffff; border: thin solid #000000; overflow-y: auto; overflow-x:hidden; }
      #toolbar { position:absolute; left: 310px; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
         Fusion.initialize();
      }
    </script>
  </head>
  <body>
    <center>
      <div id="bodyContent">
        <div id="toolbar">
          <div id="Pan" ></div>
          <div id="ZoomIn"></div>
          <div id="ZoomOut"></div>
        </div>
        <div id="Legend" align="left"></div>
        <div id="Map"></div> 
      </div>
    </center>
  </body>
</html>
Sekarang Anda harus dapat menguji aplikasi melalui alamat web. Dalam kasus saya:   http://localhost:8080/demo/index.html


Sudah sampai disini saja ya, chapter 1 mudah-mudahan dapat di pahami
Share on Facebook
Share on Twitter
Share on Google+
Share on LinkedIn
forwarderodeng

Next
« Prev Post
Previous
Next Post »
0 Komentar

Terimakasih telah berkomentar

Subscribe to: Post Comments (Atom)