Open Layers เป็น Opensource Mapping Client อีกตัวที่น่าสนใจและก็มีคนนำไปใช้งานมาก เนื่องจากตัว client มีการพัฒนาอย่างต่อเนื่อง ประกอบกับการออกแบบที่ดีและยืดหยุ่นทำให้สามารถนำไปใช้พัฒนาระบบของตัวเองได้ง่าย ข้อเด่นของ openlayers คือเป็น ajax base(Prototype , Rico library) และมีส่วนเชื่อมต่อกับ API ต่างๆ เช่น GoogleMap, VE, Mutimap นอกจากนี้ตัว client ยังเป็น Tile caching เหมาะกับระบบบริการแผนที่ขนาดใหญ่ ที่มีการออกแบบช่องทางการบริการข้อมูลในลักษณะ Tile-Caching นอกจากนี้ยังรองรับ WMS และ WFS อีกด้วยครับ รายละเอียดคงจะได้กล่าวถึงในโอกาสต่อไป ตัวผมเองเล่น openlayers เกือบปี แล้วจึงรู้สึกว่าเหมาะแก่การแนะนำ ท่านที่สนใจลองเข้าไปอ่านรายละเอียดที่   http://openlayers.org/ 

        ที่ไม่อยากบรรยายสรรพคุณไปมาเพราะกลัวจะมีเนื้อที่เขียนไม่พอ แต่เดี่ยวมาลองพิสูจน์กันดูดีกว่าว่าใช้งานง่ายจริงหรือไม่ การพิสูจน์ก็คือการลงมือทำ ท่านสามารถเขียน code เพียงไม่กี่บรรทัดก็สามารถนำแผนที่แบบ mapservice ไปวางบนหน้า webpage ได้แล้ว โดยผมจะเขียน Mapservice Application โดยไปเรียกข้อมูล WMS จาก Metacara

เขียน code ดังนี้นะครับ

<html xmlns=”http://www.w3.org/1999/xhtml“>
  <head>
    <link rel=”stylesheet” href=”http://openlayers.org/dev/theme/default/style.css” type=”text/css” />
    <style type=”text/css”>
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid black;
        }
    </style>
    <script src=”http://www.openlayers.org/api/OpenLayers.js”></script>
    <script type=”text/javascript”>
        var lon = 100.652;
        var lat = 13.737;
        var zoom = 5;
        var map, layer;

        function init(){
            map = new OpenLayers.Map( ‘map’ );
            layer = new OpenLayers.Layer.WMS( “OpenLayers WMS”,
                    “http://labs.metacarta.com/wms/vmap0“, {layers: ‘basic’} );
            map.addLayer(layer);
            map.setCenter(new OpenLayers.LonLat(lon,lat), 5);
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
        }
    </script>
  </head>
  <body onload=”init()”>
    <h1 id=”title”>Open layers Demo</h1>
 <div id=”map”></div>
  </body>
</html>