Rotate Feature

กรกฎาคม 26, 2008

   วันนี้เอาเทคนิคการหมุนฟีเจอร์ใน postgis มาฝากครับ ผมนำข้อมูลแปลงที่ดินจำนวนหนึ่งเข้ามาเก็บในฐานข้อมูล แต่แล้วก็เจอปัญหากรณีที่ ผู้ใช้หรือผู้นำเข้าข้อมูลต้องการ edit การวางตัวของแปลงที่ดิน ประมาณว่าหมุนซ้ายขวา ดังนั้นจึงต้องอาศัยฟังก์ชั่น rotate ของ postgis เพื่อช่วยในการจัดการข้อมูลแต่ก็ไม่ง่ายอย่างนั้นครับ Rotate() ดันเป็นการหมุนรอบจุด origin ไปดังนั้นก็เลยต้องมีการออกแรงหาวิธีการแก้ไข สุดท้ายก็ไปเจอใน mail group โดยมีแนวคิดง่ายๆคือ tranlate มันไปตำแหน่งบน quter ตรงข้าม -x,-y แล้วก็ rotate จากนั้นจึง tranlate กลับมาที่เดิม ผลลัพธ์ก็จะได้ geometry ใหม่ที่หมุนรอบแกน centroid แล้วครับ ลองทดสอบดูนะครับ

  1. ข้อมูลตัวอย่าง เพื่อเป็นการสาธิตผมสร้างตารางที่เก็บข้อมูล polygon ของแปลงที่ดินเอาไว้ แต่เพื่อความเข้าใจง่าย ผมใช้พิกัดสมมติในการยกตัวอย่าง

CREATE TABLE parcel (gid serial PRIMARY KEY,  name varchar);
SELECT AddGeometryColumn('', 'parcel', 'the_geom', -1, 'POLYGON', 2);
INSERT INTO "parcel" ("the_geom", "name") VALUES (
       'POLYGON((2 2, 2 7, 12 7, 12 2, 2 2))', 'first_parcel');

 จากนั้นทำการหมุน โดยหมุนรอบ centroid ของ polygon มี step ดังนี้

 - tranlate จุดหมุน(centroid) ไป quater ตรงข้าม(- , -)

- rotate รอบจุดหมุนใหม่

- tranlate ผลลัพธ์ geometry data กลับมาที่ centroid เดิม

SELECT
translate(
  rotate(
    translate( the_geom, -x(centroid(the_geom)), -y(centroid(the_geom)) ),
    radians(45)
  ),
  x(centroid(the_geom)), y(centroid(the_geom))
)
FROM parcel;
------------------
เพื่อให้ใช้งานง่ายก็เขียน pl/sql เป็นฟังก์ชั่นเลยครับ RotateAtCentroid(geom,x_centroid,y_centroid)
CREATE OR REPLACE FUNCTION RotateAtCentroid(geometry, double precision, double precision, double precision)
RETURNS geometry AS 'SELECT translate( rotate( translate( $1, -1*$2, -1*$3), $4), $2, $3)'
LANGUAGE 'sql';


มาเขียน python กันเถอะ

กรกฎาคม 22, 2008

 

          มีคำถามเกี่ยวกับการหัดเขียนโปรแกรม หลายท่านมักอยากจะหัดเขียนโปรแกรมที่สามารถใช้ในการประมวลผลหรือวิเคราะห์ข้อมูลในงาน GIS หรือ Remote Sensing ได้ บางครั้งก็เลือกไม่ถูกเพราะภาษาที่ใช้มีมากมาย ทั้ง C#.net, VB.net , java, C++ และอื่นๆ จนบางท่านเริ่มทอแท้ที่จะหัดเรียนรู้ เวลาไปเรียนหรืออบรมสิ่งที่ได้มาก็มักจะการเขียน interface ง่ายๆแต่พอจะเอามาใช้งานจริงๆก็เริ่มต้นได้ยาก

         ปัญหาเหล่านี้จะหมดไปถ้าเราเริ่มเรียนจากพื้นฐานของการเขียนโปรแกรมจริงๆ เรียนรู้ math ที่ใช้ในการพัฒนา algorithm พอเข้าใจแนวคิดพื้นฐานจะ implement ด้วยภาษาอะไรก็คล้ายๆกัน แต่ข้อจำกัดคือการเรียนรู้แบบนี้ช้าและใช้เวลามาก ประกอบกับบางสิ่งบางอย่างต้องเรียนรู้จากการลงมือทำ เช่นเรื่อง OOP ต่อให้ท่านอ่านหนังสือกี่เล่ม ฟังบรรยายกี่ชั่วโมงถ้าไม่ลงมือเขียนโปรแกรมยังไงก็ไม่เข้าใจอยู่ดี วันนี้ผมเอาภาษาหนึ่งมาแนะนำ ภาษานี้คือ python (ไอ้งูใหญ่)

        หลายคนอาจจะไม่รู้จักไพทรอน แต่อาจจะเคยเห็นมาบ้างเพราะท่านที่ใช้ ARCGIS จะต้องมีการติดตั้ง Python ในเครื่องโดยชุด install จะติดตั้งให้โดยอัตโนมัติ python เป็นภาษากาว ที่ใช้เชื่อมกับไลบารี่อื่นๆได้ดีและก็ยืดหยุ่นมาก ที่สำคัญมันเป็นภาษาที่ค่อนข้างจะมีกฏระเบียบไม่จุกจิก ทำให้การเขียนโปรแกรมขนาดเล็กๆทำได้ง่ายราบรื่น แต่ก็มีข้อเสียในการเขียนโปรแกรมขนาดใหญ่ เหตุผลสุดท้ายที่ผมชอบไพทรอนคือ มีโมดูลในด้านๆต่างๆให้เลือกใช้เยอะ ครอบคลุมด้าน Stat, Math, GIS, Remote Sensing, DIP, GPS และทำงานได้ทั้งบน window และ Linux  สำหรับท่านที่จะเริ่มต้นนะครับมีขั้นตอนง่ายๆดังนี้

  1. ติดตั้งโปรแกรมดาวน์โหลดจาก http://www.python.org/ โดยเลือกเอาชุด install มาติดตั้งได้เลย

      สำหรับ linux ก็ใช้คำสั่ง $ sudo aptitude install python

  2. หัดอ่าน คู่มือโครงสร้างและไวยากรณ์ภาษา python จาก http://docs.python.org/ (แหล่งคู่มือที่ดีที่สุดแล้ว)

  3. เมื่อคล่องแล้ว มีพื้นฐานดีแล้วก็เริ่มพัฒนา application โดยหา package ที่จำเป็นต่างๆจาก http://cheeseshop.python.org

        เอาเป็นว่าวันนี้ผมขอแค่แนะนำก่อนเดี่ยวโอกาสหน้าจะค่อยๆแนะนำการเขียนโปรแกรม python กับ package ต่างๆเพื่อใช้ในงาน Geoinfomatic ต่อไป


Snap point

กรกฎาคม 14, 2008

        ไปพบแนวคิดการ snap point กับ line ด้วยฟังก์ชั่นกลุ่ม LRS(Linear referencing system) จาก mailing list น่าสนใจดีเลยนำมาเขียนเก็บไว้ โดยปกติใน postgis จะไม่มีฟังก์ชั่น snapping พอดีผมกำลังทำ network analysis application เวลาให้ผูใช้กำหนดตำแหน่ง ต้นทาง ปลายทาง จำเป็นที่จะต้อง snap เข้าหาถนน หาไปหามาก็เลยได้ทางออก

        วิธีการก็ไม่มีอะไรซับซ้อนครับ ใช้ฟังก์ชั่น ST_Line_Locate_Point(line, point) และ ST_Line_Interpolate_Point(line, %location) ตัวอย่างแสดงการ snap point ที่อยู่ในระยะห่าง 10 เมตร ให้เข้าหา line โดยใช้ Dwithin เป็นตัวกรอง point dataset จากนั้นก็ใช้ ST_line_interpolate_point หาตำแหน่ง x,y ใหม่บนเส้น เขียน PL ได้ดังนี้

 SELECT
   DISTINCT ON (pt_id)
   pt_id,
   ln_id,
   ST_AsText(
     ST_line_interpolate_point(
       ln_geom,
       ST_line_locate_point(ln_geom, vgeom)
     )
   )
 FROM
   (
   SELECT
     ln.the_geom AS ln_geom,
     pt.the_geom AS pt_geom,
     ln.id AS ln_id,
     pt.id AS pt_id,
     ST_Distance(ln.the_geom, pt.the_geom) AS d
   FROM
     point_table pt,
     line_table ln
   WHERE
     ST_DWithin(pt.the_geom, ln.the_geom, 10.0)
   ORDER BY
     pt_id,d
   ) AS subquery;

ไม่มีอะไรยุ่งยากมากนัก แต่ความถูกต้องก็อยู่ที่ระดับหนึ่งพอรับได้โดยเป็นวิธีแก้ขัดนะครับ ที่ผมเลือกใช้เพราะค่อนข้างเร็ว ที่สำคัญถ้า point อยู่ห่างจากเส้นมากๆ อาจจะใช้ไม่ได้ ถ้าจะเอาให้ถูกต้องมากๆอาจจะต้องใช้ algorithm ที่ซับซ้อนมากกว่านี้

Popular in GIS Programming Languages?

มิถุนายน 27, 2008

       ช่วงนี้ความถี่ในการเขียน blog ลดลงจนหลายคนเริ่มทัก ว่าหายไปไหนจริงๆแล้วก็ไม่ได้ไปไหนครับ ยังคงอยู่ที่เดิมไม่ได้ออกเดินสายต่างจังหวัด แต่ติดตรงที่ว่าช่วงนี้เป็นเทศกาลฟุตบอลยูโร เลยต้องเชียร์ทีมรักทีมโปรด ปีนี้โชคดีทีมที่เชียร์เล่นดีเข้ารอบลึกก็เลยต้องลุ้นต่อไป การดูบอลก็เป็นกิจกรรมที่เพลิดเพลินจำเริญใจดีโดยเฉพาะทัวร์นาเมนต์ใหญ่ที่หลายปีมีหนอย่างนี้

       วันนี้อยากเขียนเรื่องประเด็นการเขียนโปรแกรมกับงาน GIS จริงๆแล้วเดี่ยวนี้หลายท่านที่ใช้งาน GIS หรือรวมไปถึงมหาวิทยาลัยที่มีการเรียนการสอนทางด้าน GIS ก็มีการสอนการเขียนโปรแกรมเข้าไปด้วย เรียกโก้ๆว่า GIS Programming เคยสงสัยไหมครับว่าโดยทั่วไปแล้ว โปรแกรมเมอร์ด้าน GIS นิยมใช้ภาษาอะไรในหารพัฒนาระบบ?

       ผมไปเจอการสำรวจเรื่องนี้ทาง mailgroup ภายใต้หัวข้อ “Popular in GIS Programming Languages?” โดยคุณ Dave Bouwman ผลออกมาค่อนข้างชัดเจนครับว่า GIS โปรแกรมเมอร์ นิยมใช้ภาษา VB6/VBA มากที่สุดประมาณ 60% และใช้ภาษา Python ประมาณ 11.6% , C# อยู่ที่ 35.4% ที่เหลือก็คือภาษาอื่นๆ ผลการสำรวจก็เป็นการออกแบบสอบถามเบื้องต้น ซึ่งไม่ได้แสดงรายละเอียดของจำนวนประชากรหรือค่าทางสถิติต่างๆ จริงๆแล้วถ้าเมืองไทยจะมีการสำรวจกันบ้างก็จะดีนะครับ :D

 


GDAL With .Net

มิถุนายน 13, 2008

          มี email มาถามถึงการใช้งานไลบารีในการประมวลผลภาพ (Digital image processing) รวมไปถึงการทำงานด้าน Remote sensing โดยต้องการสร้าง Application จากภาษา .Net จริงๆแล้วถ้าเป็นไลบารี่ opensource คงหนีไม่พ้น GDAL โปรเจคชื่อดังคุณภาพดี วันนี้เลยจะขอมาสาธิตวิธีการใช้งาน GDAL ไลบารีเบื้องต้นนะครับ

         1 วิธีการ Build GDAL

             - เปิด DOS

             - Run VCVARS32.bat อยู่ใน Microsoft Visual Studio 8/VC/bin

             - ดาวน์โหลด sourcecode ของ GDAL จาก http://www.gdal.org/ 

             - เข้าไปที่ Root directory แล้ว Run คำสั่ง nmake /f makefile.vc

             - install ด้วยคำสั่ง nmake /f makefile.vc install

              กรณีติดปัญหาลองเข้าไปอ่านเพิ่มเติมได้ที่ http://www.gdal.org/gdal_building.html หรือ http://www.vterrain.org/Distrib/gdal.html

           *** หรือไม่ก็ใช้ FWtools ก็ได้นะครับ

        2 . เตรียมตัวเขียนโปรแกรมกัน โดยผมใช้ภาษา C#.net ในการเขียน

            - copy ไลบารี่ต่างๆที่เกี่ยวข้อง ซึ่ง build ไว้มาเก็บไว้ในที่ต้องการ จากนั้นก็ add เข้ามาใน .net นะครับ

            - ลองเริ่ม basic step กับ gdal โดยจะเขียนโปรแกรม gdal เพื่อเรียกดู infomation และ header ของภาพถ่ายดาวเทียมหรือภาพถ่ายทางอากาศ โดยจะใช้ฟังกชั่น Gdal.Open() เพื่อเข้าถึงภาพ Raster แล้วจึงเข้าถึงรายละเอียดของคุณสมบัติต่างๆของภาพ Raster เช่น Map Projection, pixel value , Meatadata header เป็นต้น

public static void Main(string[] args)
    {

        if (args.Length != 1) usage();

        Console.WriteLine(”");

        try
        {
            /* ——————————————————————– */
            /*      Register driver ทั้งหมด                                            */
            /* ——————————————————————– */
            Gdal.AllRegister();

            /* ——————————————————————– */
            /*      เปิดไฟล์ Raster                                                   */
            /* ——————————————————————– */
            Dataset ds = Gdal.Open( args[0], Access.GA_ReadOnly );
  
            if (ds == null)
            {
                Console.WriteLine(”Can’t open ” + args[0]);
                System.Environment.Exit(-1);
            }

            Console.WriteLine(”Raster dataset parameters:”);
            Console.WriteLine(”  Projection: ” + ds.GetProjectionRef());
            Console.WriteLine(”  RasterCount: ” + ds.RasterCount);
            Console.WriteLine(”  RasterSize (” + ds.RasterXSize + “,” + ds.RasterYSize + “)”);
           
            /* ——————————————————————– */
            /*      Get driver สำหรับ Raster                                                      */
            /* ——————————————————————– */ 
            Driver drv = ds.GetDriver();

            if (drv == null)
            {
                Console.WriteLine(”Can’t get driver.”);
                System.Environment.Exit(-1);
            }
           
            Console.WriteLine(”Using driver ” + drv.LongName);

            /* ——————————————————————– */
            /*      Get metadata หรือ Header ของภาพ Raster                                                   */
            /* ——————————————————————– */
            string[] metadata = ds.GetMetadata(”");
            if (metadata.Length > 0)
            {
                Console.WriteLine(”  Metadata:”);
                for (int iMeta = 0; iMeta < metadata.Length; iMeta++)
                {
                    Console.WriteLine(”    ” + iMeta + “:  ” + metadata[iMeta]);
                }
                Console.WriteLine(”");
            }

            /* ——————————————————————– */
            /*      แสดง “IMAGE_STRUCTURE”                           */
            /* ——————————————————————– */
            metadata = ds.GetMetadata(”IMAGE_STRUCTURE”);
            if (metadata.Length > 0)
            {
                Console.WriteLine(”  Image Structure Metadata:”);
                for (int iMeta = 0; iMeta < metadata.Length; iMeta++)
                {
                    Console.WriteLine(”    ” + iMeta + “:  ” + metadata[iMeta]);
                }
                Console.WriteLine(”");
            }

            /* ——————————————————————– */
            /*     แสดงส่วนของ subdatasets.                                             */
            /* ——————————————————————– */
            metadata = ds.GetMetadata(”SUBDATASETS”);
            if (metadata.Length > 0)
            {
                Console.WriteLine(”  Subdatasets:”);
                for (int iMeta = 0; iMeta < metadata.Length; iMeta++)
                {
                    Console.WriteLine(”    ” + iMeta + “:  ” + metadata[iMeta]);
                }
                Console.WriteLine(”");
            }

            /* ——————————————————————– */
            /*      แสดงรายละเอียด geolocation.                                             */
            /* ——————————————————————– */
            metadata = ds.GetMetadata(”GEOLOCATION”);
            if (metadata.Length > 0)
            {
                Console.WriteLine(”  Geolocation:”);
                for (int iMeta = 0; iMeta < metadata.Length; iMeta++)
                {
                    Console.WriteLine(”    ” + iMeta + “:  ” + metadata[iMeta]);
                }
                Console.WriteLine(”");
            }

            /* ——————————————————————– */
            /*      แสดง image boundary                                                 */
            /* ——————————————————————– */
            Console.WriteLine( “Corner Coordinates:” );
            Console.WriteLine(”  Upper Left (” + GDALInfoGetPosition( ds, 0.0, 0.0) + “)”);
            Console.WriteLine(”  Lower Left (” + GDALInfoGetPosition( ds, 0.0, ds.RasterYSize) + “)”);
            Console.WriteLine(”  Upper Right (” + GDALInfoGetPosition( ds, ds.RasterXSize, 0.0) + “)”);
            Console.WriteLine(”  Lower Right (” + GDALInfoGetPosition( ds, ds.RasterXSize, ds.RasterYSize) + “)”);
            Console.WriteLine(”  Center (” + GDALInfoGetPosition( ds, ds.RasterXSize / 2, ds.RasterYSize / 2) + “)”);
            Console.WriteLine(”");

            /* ——————————————————————– */
            /*      Get raster band                                                 */
            /* ——————————————————————– */
            for (int iBand = 1; iBand <= ds.RasterCount; iBand++)
            {
                Band band = ds.GetRasterBand(iBand);
                Console.WriteLine(”Band ” + iBand + ” :”);
                Console.WriteLine(”   DataType: ” + Gdal.GetDataTypeName(band.DataType));
                Console.WriteLine(”   ColorInterpretation: ” + Gdal.GetColorInterpretationName(band.GetRasterColorInterpretation()));
                ColorTable ct = band.GetRasterColorTable();
    if (ct != null)
     Console.WriteLine(”   Band has a color table with ” + ct.GetCount() + ” entries.”);
               
    Console.WriteLine(”   Description: ” + band.GetDescription());
                Console.WriteLine(”   Size (” + band.XSize + “,” + band.YSize + “)”);
                int BlockXSize, BlockYSize;
                band.GetBlockSize(out BlockXSize, out BlockYSize);
                Console.WriteLine(”   BlockSize (” + BlockXSize + “,” + BlockYSize + “)”);
                double val;
                int hasval;
                band.GetMinimum(out val, out hasval);
                if (hasval != 0) Console.WriteLine(”   Minimum: ” + val.ToString());
                band.GetMaximum(out val, out hasval);
                if (hasval != 0) Console.WriteLine(”   Maximum: ” + val.ToString());
                band.GetNoDataValue(out val, out hasval);
                if (hasval != 0) Console.WriteLine(”   NoDataValue: ” + val.ToString());
                band.GetOffset(out val, out hasval);
                if (hasval != 0) Console.WriteLine(”   Offset: ” + val.ToString());
                band.GetScale(out val, out hasval);
                if (hasval != 0) Console.WriteLine(”   Scale: ” + val.ToString());
            }
        }
        catch (Exception e)
        {
            Console.WriteLine(”Application error: ” + e.Message);
        }
    }

 private static string GDALInfoGetPosition(Dataset ds, double x, double y)
    {
        double[] adfGeoTransform = new double[6];
        double dfGeoX, dfGeoY;
        ds.GetGeoTransform(adfGeoTransform);

        dfGeoX = adfGeoTransform[0] + adfGeoTransform[1] * x + adfGeoTransform[2] * y;
        dfGeoY = adfGeoTransform[3] + adfGeoTransform[4] * x + adfGeoTransform[5] * y;

        return dfGeoX.ToString() + “, ” + dfGeoY.ToString();
    }
}

———————————————————————————

code ตัวอย่างจาก GDAL developer group โดย Tamas Szekeres

         สรุปอีกที GDAL &OGR เป็นไลบารีที่มีประสิทธิภาพ และใช้งานได้สารพัดประโยชน์จริงๆครับ ท่านที่เริ่มศึกษาการเขียนโปรแกรมทาง GIS หรือ Remote Sensing ก็สามารถนไปประยุกต์ใช้ได้ ซึ่งจะช่วยลดภาระเรื่องการจัดการไฟล์ไปได้มากเลยทีเดียว อ่านรายละเอียดเพิ่มเติมและดูตัวอย่างอื่นๆที่ http://trac.osgeo.org/gdal/wiki/GdalOgrInCsharp

 

 


npgsql Connect To Postgresql

พฤษภาคม 27, 2008

      เป็นคำถามติดค้างนะครับ เนื่องจากมีพี่ท่านหนึ่งได้ถามเกี่ยวกับการใช้ .Net ต่อเข้าสู่ Postgresql โดยต้องการจะนำเข้าหรืออัพเดตข้อมูล spatial data การทำงานก็ไม่ยากครับสามารถเขียนโปรแกรมผ่านช่องทาง Npgsql ซึ่งสามารถทำการติดตั้งได้จาก Postgresql (รับรองว่าเร็วกว่าผ่าน ODBC ครับ) โดยมีแนวทางง่ายๆดังนี้นะครับ

      1. เริ่มต้นจากสร้าง connector ก่อน

-NpgsqlConnection myconn = new NpgsqlConnection(”Server=localhost;Port=5432;User Id=username;Password=password;Database=myGisDB;”)
- NpgsqlCommand mycommand = new NpgsqlCommand();
- mycommand.Connection = myconn;

       2. อย่าลืม Add GeometryColum

-mycommand.CommandText = “SELECT AddGeometryColumn(”,’myTable’,'the_geom’,'4326′,’GEOMETRY’,2);”;
-mycommand.ExecuteNonQuery();

      3. insert ข้อมูล Attribute และ Geometry Data ครับ โดยตัวอย่างผม Add ข้อมูลเส้นตรงเข้าไป

- myconn.Open();

 - mycommand.CommandText = “INSERT INTO \”myTable\” (\”the_geom\”) VALUES (st_setsrid(GeomFromText(:the_geom),:srid));”;

- mycommand.Parameters.Add(”:the_geom”, NpgsqlTypes.NpgsqlDbType.string);

- mycommand.Parameters[":the_geom"].Value = ‘LINESTRING(100.0 14.0,100.0 15.0, 101.0 15.0)’; 

- mycommand.Parameters.Add(”:srid”, NpgsqlTypes.NpgsqlDbType.Integer);

- mycommand.Parameters[":srid"].Value = 4326; // ระบุระบบพิกัด

- mycommand.ExecuteNonQuery();

      4. ปิดการเชื่อมต่อ

- myconn.Close();

      ทดลองนำไปประยุกต์ใช้ดูนะครับ โดยกรณีที่มี Geometry มากกว่า 1 หรือนำมาจาก shapfile ก็สามารถกำหนด Type เป็น Binary ได้โดยใช้ NpgsqlTypes.NpgsqlDbType.Bytea ส่วนการเข้าถึงข้อมูล feature ในshapefile ก็ใช้ shapelib หรือ OGR ก็ได้ครับ
      ปล.อย่าลืมติดตั้ง Npgsql ให้ postgres ก่อนใช้งานนะครับ ติดขัดประการใด email มาถามได้ครับ
     

 

 


Basic Google Map II

เมษายน 4, 2008

            หัวข้อนี้เขียนถึง Event Listeners สำหรับติดตามการโต้ตอบระหว่างผู้ใช้ โดยเป็นกลไกในการตอบสนอง event จากผู้ใช้ ซึ่ง API ได้กำหนดช่องทางการลงทะเบียน Event Listeners  ผ่าน GEvent.addListener() method

1. click event

           ทดลองกำหนด event ประเภท click() ให้กับ Gmap Object โดยจะทำการสร้างโค้ดประมวลผลโต้ตอบกับผู้ใช้เมื่อทำการ click บนแผนที่

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Gmap Simple Events</title>
 <!– กำหนด API Key–>
    <script src=”http://maps.google.com/maps?file=api&v=2&key=yourkey”
            type=”text/javascript”></script>

   <script type=”text/javascript”>
    function initialize() {
 // ตรวจสอบความสามารถของ Browser
      if (GBrowserIsCompatible()) {
        // สร้าง Gmap Object
        var map = new GMap2(document.getElementById(”map_canvas”));
       // กำหนดค่าพิกัดจุดกลางแผนที่สำหรับเริ่มต้น
        map.setCenter(new GLatLng(13.75, 100.65), 13);
      // ลงทะเบียน click event พร้อมระบุการประมวลผล
        GEvent.addListener(map, “click”, function() {
          alert(”Hello , คุณกำลังคลิ๊กแผนที่”);
         });
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  </body>
</html>

        ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

14.jpg

2. moveend

      ทดลองกำหนด event ประเภท moveend() ให้กับ Gmap Object โดยจะทำการสร้างโค้ดประมวลผลโต้ตอบกับผู้ใช้เมื่อสิ้นสุดการ move แผนที่ด้วยการเลื่อนแผนที่(Pan)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Gmap Simple Events</title>
 <!– กำหนด API Key–>
    <script src=”http://maps.google.com/maps?file=api&v=2&key=yourkey”
            type=”text/javascript”></script>
    <script type=”text/javascript”>
    function initialize() {
 // ตรวจสอบความสามารถของ Browser
      if (GBrowserIsCompatible()) {
        // สร้าง Gmap Object
        var map = new GMap2(document.getElementById(”map_canvas”));
       // กำหนดค่าพิกัดจุดกลางแผนที่สำหรับเริ่มต้น
        map.setCenter(new GLatLng(13.75, 100.65), 13);
       // ลงทะเบียน click event พร้อมระบุการประมวลผล
        GEvent.addListener(map, “moveend”, function() {
          var center = map.getCenter();
          document.getElementById(”message”).innerHTML = “ค่าพิกัด “+center.toString();
         });
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  <div id=”message”></div>
  </body>
</html>

ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

15.jpg

 3. Passed Arguments in Events

               Gmap API ในส่วนของ event handle จะมี Arguments ที่อยู่ใน event ต่างๆ เช่น click ก็จะมีสอง Arguments ได้แก่ (overlay,point) โปรแกรมเมอร์สามารถเข้าถึงค่า Arguments ที่เกิดขึ้นพร้อมกับ event มาประมวลผลต่อได้ โดยในตัวอย่างจะทำการเรียกดูค่าพิกัดภาพ ณ ตำแหน่งที่ผู้ใช้ทำการ click mouse บนแผนที่ โดยเขียนโค้ดโปรแกรมได้ดังนี้

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”
http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Gmap Simple Events</title>
 
<!– กำหนด API Key–>
    <script src=”
http://maps.google.com/maps?file=api&amp;v=2&amp;key=yourkey
            type=”text/javascript”></script>
    <script type=”text/javascript”>
    function initialize() {
      // ตรวจสอบความสามารถของ Browser
      if (GBrowserIsCompatible()) {
       // สร้าง Gmap Object
        var map = new GMap2(document.getElementById(”map_canvas”));
       // กำหนดค่าพิกัดจุดกลางแผนที่สำหรับเริ่มต้น
        map.setCenter(new GLatLng(13.75, 100.65), 13);
       // ลงทะเบียน click event และค่า agruments พร้อมระบุการประมวลผล
        GEvent.addListener(map,”click”, function(overlay,latlng) {    
        var myHtml = “ค่าพิกัดภาพ = : ” + map.fromLatLngToDivPixel(latlng) + ” Zoom level =” + map.getZoom();
        map.openInfoWindow(latlng, myHtml);
      });
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  </body>
</html>

ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

 อ้างอิงจาก

- http://code.google.com/apis/maps/documentation/events.html


Basic Google Map I

เมษายน 2, 2008

       ได้รับ email ฉบับหนึ่งที่ถามถึงการพัฒนา Internet GIS Application ด้วย Google Map โดยมีประเด็นที่น่าสนใจตรงที่ท่านนี้อยากให้เปรียบเทียบข้อดี ข้อเสียเกี่ยวกับการพัฒนาแบบที่ใช้ MapServer ของตัวเอง กับการใช้ API Service เช่น Google Map ผมตอบไปทาง email ค่อนข้างยาว แต่ผมอยากของสรุปแนวคิดการเลือกใช้ว่าขึ้นอยู่กับความต้องการของระบบ ผมเองก็ใช้ทั้งสองประเภท บางงานก็ใช้ผสมกัน แต่สิ่งหนึ่งที่ Google Map มีคือข้อมูลเชิงพื้นที่ ทั้งถนน , ภาพถ่ายดาวเทียม ซึ่งค่อนข้างละเอียด สามารถลดภาระการบำรุงรักษาข้อมูลของเราได้ นอกจากนี้ google map ยังใช้งานได้ง่ายและมีแนวโน้มที่จะพัฒนาต่อไปอีก เช่น ฟังก์ชั่นการวิเคราะห์เส้นทาง เป็นต้น แต่ก็มีข้อจำกัดอยู่บ้าง Application ที่ไม่ซับซ้อนมากนักผมมักจะใช้ Google Map เป็นหลัก

         เนื่องจากหลายๆท่านสนใจแต่อาจจะไม่ทราบว่าจะเริ่มต้นยังไง ดังนั้นในหัวข้อ basic google map I จะสอนการสร้าง application อย่างง่ายเพื่อใช้เป็นแนวทางสำหรับเริ่มต้นครับ

1. บทนำ

        Google Map API เป็นระบบบริการข้อมูลแผนที่ผ่านอินเตอร์เน็ต ที่นักพัฒนาสามารถนำข้อมูลมาใช้ในการพัฒนา application ในรูปแบบ Web based ต่อได้ โดยอาศัยความรู้พื้นฐานหลักได้แก่ JavaScript OOP, AJAX, XML(DOM), HTML และที่สำคัญที่สุดคือเรื่องของ ระบบพิกัดภูมิศาสตร์นิดหน่อย การทำงานเริ่มจากการขอรับบริการ โดยไปลงทะเบียนเพื่อสร้าง API Key ก่อนที่ http://code.google.com/apis/maps/signup.html การลงทะเบียนต้องใช้ web site URL

ตัวอย่าง Key

key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA

2. Basic Google Map

     ทดลองเริ่มเขียน code ง่ายเพื่อเรียกข้อมูลแผนที่มาแสดง โดยมี code ดังต่อไปนี้ครับ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

  <head>

    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

    <title>Google Maps JavaScript API Example</title>

<!– Embed API Key–>

    <script src=”http://maps.google.com/maps?file=api&amp;v=2″

            type=”text/javascript”></script>

    <script type=”text/javascript”>

    //<![CDATA[

    function load() {

      if (GBrowserIsCompatible()) {

       // กำหนด DIV tag สำหรับ Map โดยเข้าถึงแบบ DOM

        var map = new GMap2(document.getElementById("map"));

      // Add Map Control และ Map Type

        map.addControl(new GSmallMapControl());

        map.addControl(new GMapTypeControl());

    // กำหนด ค่าพิกัดของตำแหน่งเริ่มต้นบนแผนที่ 

        map.setCenter(new GLatLng(37.4419, -122.1419), 13);

      }

    }

    //]]>

    </script>

  </head>

  <body onload=”load()” onunload=”GUnload()”>

    <div id=”map” style=”width: 500px; height: 300px”></div>

  </body>

</html>

Upload ไฟล์ Html ที่เขียนขึ้นบน Server แล้วทดลองทำการ Run ผลลัพธ์

9.jpg


python CSV

เมษายน 2, 2008

        หลายครั้งที่การพัฒนาระบบ GIS ต้องมีการเชื่อมต่อและทำการดึงข้อมูลจากระบบ MIS ไฟล์ข้อมูลต่างๆที่พบมักจะอยู่ในรูปแบบ excel กรณีที่มีแค่ไม่กี่ไฟล์ ก็สามารถใช้โปรแกรม GIS ทั่วไปแปลงได้ แต่พอมีไฟล์จำนวนมากๆหลายร้อยไฟล์เริ่มไม่สนุกแล้ว วันนี้ผมมีโค้ดภาษา python (script อเนกประสงค์) สำหรับแปลงไฟล์มาแนะนำกัน โดยจะแปลงจาก excel ให้เป็น CSV แล้วนำเข้าในระบบ GIS

         ภาษา python เป็นภาษาที่เข้าใจง่าย เขียนคล่อง รองรับ OOP ผมชอบใช้ในการจัดการข้อมูลหรือไดเรกทอรี่ หรือพัฒนาโปรแกรมขนาดเล็กๆแบบ console จำได้ว่าเคยใช้ python ในงานต่างๆหลายครั้ง แล้วก็ค่อนข้างสะดวก โดยเฉพาะเรื่องการจัดการไฟล์ ผมหัด python มาประมาณปีหนึ่งโดยได้รับการแนะนำจากอาจารย์ไพศาล ตอนนั้นใช้ในเรื่องจัดการไฟล์ภาพ (จำนวนเกือบห้าแสนไฟล์) ก็รู้สึกสะดวกดี นอกจากนี้ python ก็มี package สำหรับงาน GIS ขั้นสูงหลายๆตัวที่สามารถทำงานได้ดีไม่แพ้ซอฟท์แวร์ GIS อื่นๆ

       มาลองดูโค้ด Python กัน

def XLS2CSV(File): 
    ”’converts a MS Excel file to csv ”’
 
     print “—— Start Process ——”

     try:
          import win32com.client, os
          excel = win32com.client.Dispatch(’Excel.Application’)
         fileDir, fileName = os.path.split(aFile)
         getname = os.path.splitext(fileName)
         newName = getname[0] + “.csv”
         myCSV = os.path.join(fileDir, newName)
         workbook = excel.Workbooks.Open(aFile)
         workbook.SaveAs(myCSV, FileFormat=24)

        workbook.Close(False)
         excel.Quit()
         del excel
  
         print “…Converted ” + nameOnly + ” to CSV”
    except:
         print “>>>>>>> Operation Faile !”

# Run Command

 convertXLS2CSV(r”D:\temp\popstat.xls”)

อ่านคู่มือ Python กับ CSV ได้ที่ http://docs.python.org/lib/csv-examples.html


google code กับ libkml

มีนาคม 29, 2008

              google code เป็นโปรเจคที่ทำให้เกิดการพัฒนาในด้าน IT และ computer software ค่อนข้างมากจริงๆ ดังจะเห็นได้จากรายชื่อโปรเจคที่เข้าร่วมหรืออยู่ในกลุ่มที่ได้รับการสนับสนุน บางโปรเจคก็น่าสนใจและเป็นประโยชน์ในเชิงการนำไปพัฒนาต่อยอดค่อนข้างมาก ซึ่งใน google code ก็มีโปรเจคที่เกี่ยวข้องกับ GIS และ Mapping ที่น่าสนใจอยู่หลายอันทีเดียว วันนี้ผมนำโปรเจคใหม่ที่น่าสนใจมาแนะนำ โปรเจคนี้มีชื่อว่า libkml 

             libkml เป็นไลบารี่ที่ใช้ในการ parse, generate และ operate ข้อมูล KML โดยพัฒนาจากภาษา C++ ซึ่งสามารถ bind เข้ากับระบบการพัฒนาด้วย  Java, Python, Ruby, Perl and PHP สำหรับ libkml ทำงานบน OGC KML 2.2 standard ท่านที่สนใจสามารถเข้าไปดาวน์โหลดมาใช้งานได้ที่ http://code.google.com/p/libkml/ 

 


Mapstraction รวมฮิต Online Map

มีนาคม 17, 2008

        บางคนเริ่มออกอาการรักพี่เสียดายน้อง อยากใช้งาน Google Map แต่ก็รู้สึกชอบ Yahoo Map และ LocalLive วันนี้ผมมี Mapstraction API มานำเสนอ เป็น JavaScript API ที่รวมฮิตเอาหลายๆ API เช่น OpenStreetMap
Yahoo,Google,Microsoft,Map24,MultiMap, MapQuest เข้าไว้ในตัวเดียว ผู้ใช้สามารถเขียนโปรแกรมผ่าน Mapstraction API เพื่อเรียกใช้งาน map service ต่างๆได้ นอกจากนี้  Mapstraction ยังสนับสนุน KML และ GeoRSS อีกด้วยครับ สนใจไปดาวน์โหลดและดูตัวอย่างได้ที่ http://mapstraction.com/  

4.jpg

ตัวอย่าง Map Application ของสำนักข่าวรอยเตอร์ที่ใช้ Mapstraction API

 


OpenMap

กุมภาพันธ์ 23, 2008

        สำหรับสาวก Java ที่กำลังมองหา package ที่เกี่ยวข้องกับแผนที่ วันนี้มีอีกหนึ่งโปรเจคมาแนะนำครับ

         OpenMap เป็น package บน JavaBeans โดยเป็น Opensource นักพัฒนาสามารถไปดาวโหลดซอสโค้ดและ Toolkit ต่างๆมาใช้พัฒนา Application ได้ โดยรองรับการทำงานเบื้องต้นที่เกี่ยวข้องกับ GIS ปัจจุบันอยู่ที่เวอร์ชั่น 4.6.3 (ค่อนข้างนิ่ง แต่ยังใช้ประโยชน์ได้) ลองเข้าไปอ่านรายละเอียดและดาวโหลดได้ที่ http://openmap.bbn.com/ 

 


PyS60 Find Your location

กุมภาพันธ์ 15, 2008

        จำได้ว่าเมื่อประมาณ เดือนที่แล้วผมเคยพูดถึง PyS60 SDK ชุดพัฒนาภาษา python ที่ออกมาให้สามารถพัฒนา Application ต่างๆบนมือถือ S60 Platform ที่ทำงานบน Symbian OS (รายนามมือถือกลุ่ม S60)

        จริงๆเรื่องของ PyS60 และ S60 platform มีเรื่องราวที่น่าสนใจอยู่เยอะครับ โดยเฉพาะการสร้างสรรค์ Application บนมือถือกลุ่มนี้ แต่วันนี้ที่นำมา Post แปะไว้เพราะว่า เมื่อตอนเย็นน้องคนหนึ่งที่รู้จัก mail มาถามว่าเราสามารถหาค่าพิกัดแบบ GMM (Google Map Mobile) ได้ไหม? จริงๆแน่นอนว่าได้ ผมเคยอ่านเรื่องเกี่ยวกับ GSM location มาบ้างแล้ว แต่ยังไม่รู้ว่าทำอย่างไร แต่แล้วก็เหมือนโชคชะตา พระเจ้า Google ชักนำ ทำให้ได้ไปพบ email จาก mailing list group ที่เขียนว่าการหาค่าพิกัดจาก Cell สัญญาณมือถือทำได้ง่ายมาก(นายคนนี้โม้ไว้ ว่าเค้าทำได้) โดยเค้าใช้ Pys60 SDK เป็นชุดพัฒนา เขียนโค้ด python 3 บรรทัด

      import location
      loc = location.gsm_location()
      print loc

       เท่านี้ก็ได้แล้ว โดยฟอร์แมทของ loc จาก Cell ID อยู่ในรูป myl:MCC:MNC:LAC:CID **myl คือ ค่าพิกัด

       สำหรับผมยังไม่ได้ลอง เพราะว่าช่วงนี้ติดภารกิจ เขียน paper อยู่แต่เอามาเผยแพร่เพราะเชื่อว่าหลายๆท่านที่ใช้ GMM คงอยากจะหาคำตอบ ยังไงก็ลองพิสูจน์ดูนะครับ(อย่างเพิ่งเชื่อจนกว่าได้ลอง) แต่ที่น่าแปลกคือ เรื่องนี้ไม่มีการเผยแพร่หรืออธิบายใน API ของ Google มาก่อน

** บทความเกี่ยวข้อง

http://emap.wordpress.com/2008/01/11/my-location-beta/


GeoServer 1.6.0 ออกแล้วครับ

กุมภาพันธ์ 14, 2008

        GeoServer 1.6.0 ออกแล้วครับ ผมเป็นอีกคนที่รอคอยเวอร์ชั่น 1.6 stable อยู่ แน่นอนว่าหลายๆอย่างมีการพัฒนาขึ้นให้ดีกว่าในเวอร์ชั่นเก่า เช่น fix Bug , WFS 1.1 , ปรับปรุงส่วน WFS,WMS Cascading เป็นต้น

        สำหรับผมรู้สึกว่าเวอร์ชั่น 1.6 สามารถทำงานกับ Google Map และ Google Earth ได้ดีกว่า GeoServer เป็น Map Service Engine ที่ทำงานกับข้อมูลประเภท Feature ได้ดีและมีประสิทธิภาพมากครับ ตัวผมเคยมีโอกาสทำระบบ Edit/Update ข้อมูล online ผ่านอินเตอร์เน็ตโดยใช้ GeoServer ร่วมกับ PostGreSQL ผลออกมาก็ใช้การได้ดีทีเดียว(ไม่ค่อยมีปัญหานัก) แต่ในเรื่อง Image และ Raster Data ยังสู้ UMN MapServer ไม่ได้ ถึงผู้พัฒนาจะทำ Coverage Extensions สำหรับจัดการ Image Data แต่ประสิทธิภาพและฟังก์ชั่นการจัดการข้อมูลก็ยังทำได้ไม่ครบถ้วน(UMN MapServer ใช้ GDAL เป็นไลบารี่หลักในการจัดการ Image) สำหรับท่านที่สนใจสามารถไปดาวโหลดได้ที่ http://geoserver.org/ ครับ


Android and GeoInfomatic Technology

กุมภาพันธ์ 4, 2008

      ชั่วโมงนี้หัวข้อหนึ่งที่กำลังเป็นที่กล่าวถึงคงจะหนีไม่พ้น Android โปรเจคยักษ์ของ Google Android คือ platform สำหรับระบบปฏิบัติการบนโทรศัพท์มือถือ ซึ่งเป็นระบบปฏิบัติการที่พัฒนาตามแบบ Linux (ใช้ Linux Kernel 2.6 สำหรับส่วนติดต่อ hardware) โดยมี Google และ 30 บริษัทที่พัฒนาเทคโนโลยีบนมือถือชั้นนำเป็นสนับสนุนการดำเนินงาน ปัจจุบันมีอาสาสมัครเข้าร่วมเป็นนักพัฒนาโปรแกรมประยุกต์บน Android จำนวน 4300 คนทั่วโลก

       Google ได้ส่ง Android SDK ออกมาสำหรับนักพัฒนาซอฟท์แวร์นำไปใช้ในการพัฒนาโปรแกรมประยุกต์สำหรับ Android โดยได้มีการจัดโครงการ Android Developer Challenge ชิงเงินรางวัลรวม $10,000,000 สำหรับการแข่งขันมีขึ้นในช่วง 2 มค.-3 มีค 2008 โดยจะคัดผลงานผู้เข้ารอบ 50 ผลงาน โดยผู้ที่ผ่านรอบนี้จะได้เงินรางวัลเบื้องต้น $25000(875000 บาท) เพื่อเป็นทุนในการพัฒนา หลังจากนั้นคัดให้เหลือ 10 ผลงาน จนหาผู้ชนะ โดยผู้ชนะจะได้เงินรางวัล $275000 (9625000 บาท)หรือ $100000(3500000 บาท) ซึ่งยังไม่ได้กำหนดตายตัว

      สิ่งหนึ่งที่ Android มาเกี่ยวข้องกับเทคโนโลยีเชิงตำแหน่ง คือเรื่อง location-based services ซึ่งจัดเป็นหัวข้อหนึ่งในการประกวด และ LBS component เป็นหนึ่งในเทคโนโลยีพื้นฐานที่รองรับและสนับสนุนการทำงานของระบบงานอื่นๆ

2.jpg

      Android รองรับการทำงานกับ GPS และอุปกรณ์ระบุตำแหน่ง (WIFI Location, GSM Location) โดยมี Location Manager สำหรับจัดการข้อมูลเชิงตำแหน่ง โดยนักพัฒนาสามารถเชื่อมต่อกับส่วนนี้ได้ผ่านทาง Android SDK

      Android SDK ได้มี API สำหรับการพัฒนาโปรแกรมประยุกต์ที่เกี่ยวข้องกับข้อมูลเชิงตำแหน่งสองส่วนได้แก่

                1. Location-based Service APIs                      

                สำหรับการสร้างฟังก์ชั่นการทำงาน LBS บน Android ซึ่งประกอบด้วยสอง packages คือ android.location (Query, จัดการเรื่องพิกัดภูมิศาสตร์, KML, ทิศทาง, tracking, GPS Data) และ com.google.android.maps (Google Map Service)               

              2. Google APIs and Services                       

              สำหรับนักพัฒนาที่ต้องการนำ Google API ไปใช้สร้างโปรแกรมประยุกต์ โดยรวมไปถึงส่วนของ Google Map API ที่ให้บริการข้อมูลแผนที่ สำหรับฝั่งลงในโปรแกรมประยุกต์อื่นๆ ในกลุ่มนี้แบ่งออกเป็นสองประเภทคือ Map View และ Map Activity  อ่านรายละเอียด Android SDK ได้ที่ http://code.google.com/android/

            แนวคิดของ Android จะมีบทบาทและสามารถนำเทคโนโลยีด้าน Geoinfomatic ไปสู่ผู้ใช้ทั่วไปได้อย่างแพร่หลายและเป็นการนำเทคโนโลยีไปใช้สนับสนุนการดำรงชีวิตให้สะดวกสบายขึ้นต่อไป สำหรับท่านที่สนใจพัฒนาโปรแกรมประยุกต์บน Android โอกาสหน้าผมจะลองมา review ให้ชมครับ

google-dont-be-evil.jpg


longdo map API

มกราคม 28, 2008

         สืบเนื่องจากในหัวข้อก่อนหน้าที่ผมพูดถึง longdo map โดยได้สาธิตตัวอย่างของการนำ API มาใช้ในการทำ web application ของตัวเอง หลายๆท่านให้ความสนใจ วันนี้ผมจึงขอนำ code ตัวอย่างมาอธิบาย

        ตัวอย่างนี้ก็เป็นการใช้งาน API อย่างง่ายที่ผมนำมาจาก web site ของ longdo โดยนำมาเพิ่มเติม marker ของตัวเองลงไป รายละเอียดมีดังนี้นะครับ

<html>
<head>
<title>Test Longdo Map API </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<meta http-equiv=”imagetoolbar” content=”no”>
<script type=”text/javascript” src=”http://mmmap15.longdo.com/mmmap/mmmap.php” > </script>
<script>
// เริ่มต้น JavaScript
var mmmap; // ประกาศ Global Varriable
function mmmap_client_init() { 
 // Get DIV Element  กำหนด object ค่าให้ mmmap_div
 var mmmap_div = document.getElementById(”mmmap_div”); 
 // กำหนดการทำงานฟังก์ชั่น myRepaint สำหรับ event OnResize ของ window
 window.onresize = myRepaint;
 // กำหนดตัวแปร mmmap เป็น MMMap Object มีพารามิเตอร์คือ div_object,lat,lon,zoom_level,type
 mmmap = new MMMap(mmmap_div,13.73783,100.5332,5, “normal”); 
 // Run ฟังก์ชั่น myRepaint();
 myRepaint(); 
 // สร้าง DIV Object
 var testdiv = document.createElement(”div”); 
 // กำหนดลักษณะของกรอบนอก DIV
 testdiv.style.border = “1px solid red”; 
 // สร้างข้อความใน DIV
 testdiv.innerHTML = “click me”;
 // กำหนด function testclick สำหรับ Event Onclick
 testdiv.onclick =  testclick; 
 // กำหนดค่าตำแหน่งเริ่มต้น
 testdiv.latitude = 13.73783; 
 testdiv.longitude = 100.5332;
 // สั่งให้ MMMap Object สร้าง DIV บนแผนที่
 mmmap.drawCustomDiv(testdiv, 13.73783, 100.5332, “HELLO PK”); 
 // สร้าง Marker บนแผนที่มีพารามิเตอร์คือ lat,lon,title,html content,
 var marker1 = mmmap.createMarker(13.73783,100.5332,”Chula”, “<font face=tahoma>จุฬาลงกรณ์มหาวิทยาลัย</font>”); 
 //กำหนดรายละเอียดสำหรับ Marker ที่สร้าง
 document.getElementById(”marker_” + marker1).detail += “<br><br><span style=’cursor:pointer;text-decoration:underline’ onclick=’mmmap.deleteMarker(”+marker1+”)’>Delete</span>”; 
 // กำหนดค่า zoom level ให้แสดงบนหน้าเว็บ
 document.getElementById(’currentzoomlevel’).innerHTML = mmmap.getZoom();
}
function testclick(){
 // Function testclick สำหรับกำหนด การทำงานหลักจากคลิ๊กที่ DIV
 // กำหนดให้เปิด หน้าต่าง popup เพื่อแสดงรายละเอียดที่กำหนด
 mmmap.showPopUp(this.latitude, this.longitude, “My Office “, “Chula University”);
}
function myRepaint() {
 // Function myRepaint สำหรับการประมวลผลเพื่อวาดหรือ refresh แผนที่ใหม่
 chkWinSize(); 
 var newwidth = parseInt(ww) - 5 - 5; 
 var newheight = parseInt(wh) - 85 - 5; 
 mmmap.setSize(newwidth,newheight); 
 mmmap.rePaint();
}
</script>
</head>
<body onLoad=”mmmap_client_init()” scroll=”no” style=”overflow:hidden;margin: 0px 0px 0px 5px;” marginwidth=0 marginheight=0><a href=’/'>
<IMG HEIGHT=75 SRC=http://map.longdo.com/themes/longdo/logo.png BORDER=0 ALT=”Longdo Map Logo”></a>Start zoom level:
<span id=”currentzoomlevel”></span>
<!– div mmmap_div สำหรับ draw แผนที่จากแม่ข่าย –>
<div id=”mmmap_div” style=”position: absolute; left: 5px; top: 85px; width: 800px; height: 500px; border: 0px solid red”></div>
</body>
</html>


AJAX&Web GIS

มกราคม 24, 2008

          ปัจจุบันนี้แนวคิดภายใต้กรอบของ web 2.0 เป็นที่นิยมและยอมรับกันอย่างกว้างขวางในกลุ่มนักพัฒนา web application ล่าสุดผมได้ไปอ่านบทความหนึ่งเกี่ยวกับการพัฒนา web application ในยุค web 2.0 รู้สึกว่าดีมีประโยชน์ ถ้ามีโอกาสจะนำมาสรุปและเล่าสู่กันฟังต่อไป

          เทคโนโลยีหนึ่งที่มีบทบาทสำคัญในการช่วยผลักดันให้เกิดการเปลี่ยนแปลงก็คือ AJAX (Asynchronous JavaScript and XML)  หลายๆท่านอาจจะคุ้นหูกันมาบ้างแล้ว ตัวอย่างหนึ่งที่สามารถเห็นได้ชัดก็คือ Google Map โดยมีการนำ Ajax ไปใช้เป็นส่วนหนึ่งสำหรับเป็นช่องทางในการรับส่งข้อมูลจากแม่ข่ายและลูกข่าย

12.jpg

ภาพที่ 1 แสดงตัวอย่าง Google Map Application

         AJAX คือเทคโนโลยีที่รวมเอาความสามารถของ JavaScriptและ XML เข้าไว้ด้วยกัน เพื่อเพิ่มประสิทธิภาพในการทำงานของ Client ลดระยะเวลาในการรับส่งข้อมูลจากแม่ข่าย ซึ่งไม่ต้องทำการโหลดเว็บเพจใหม่ทั้งหมดโดยการนำแนวคิดของการรับส่งข้อมูลด้วย XML มาใช้ กล่าวคือการทำงานของ web ในปัจจุบันลูกข่าย (Client) ร้องขอข้อมูลไปยังแม่ข่าย (Server) ผลลัพธ์ที่ได้กลับมาคือข้อมูลที่อยู่บนหน้าเวปเพจใหม่ (Data+html) ทำให้ต้องเกิดการรับส่งข้อมูลในส่วนของการแสดงผลเพิ่มขึ้นจากข้อมูลที่ผู้ใช้ต้องการ

              เทคโนโลยีของ AJAX จะมีการทำงานในรูปแบบการรับส่งเฉพาะข้อมูล(xml) เมื่อแม่ข่ายรับคำร้องจากลูกข่ายและทำการประมวลผลแล้วจะจัดส่งเฉพาะผลลัพธ์ที่ได้ในรูปแบบ xml มายังลูกข่ายและ JavaScript ที่ฝั่งลูกข่ายจะทำหน้าที่จัดการในการแสดงผล ทำให้ลดขนาด bandwidth และเวลาในการรับข้อมูลจากแม่ข่าย เนื่องจากมีการรับ-ส่งเฉพาะข้อมูล ไม่รวมส่วนประกอบในการแสดงผลอื่นๆ

10.jpg

ภาพที่ 2 แสดงตัวอย่าง Application ที่ใช้ ajax

            จากภาพที่ 2 ผู้ใช้กรอกข้อมูลพารามิเตอร์ในการประมวลผล เพื่อเรียกดูภาพเคลื่อนไหวบริเวณสองข้างทาง เมื่อกดปุ่ม submit ข้อมูลจะถูกเข้ารหัสแบบ xml แล้วส่งผ่านช่องทางของ XMLHttpRequest เมื่อระบบประมวผลเสร็จก็จะแสดงภาพเคลื่อนไหว

11.jpg

ภาพที่ 3 แสดงการระบุตำแหน่งของภาพเคลื่อนไหวบนถนนด้วยเทคนิค AJAX

 


Python GIS

มกราคม 20, 2008

        Python เป็นภาษาหนึ่งที่มีการนำมาใช้พัฒนาโปรแกรมทางด้าน GIS อย่างแพร่หลายและนำมาใช้เป็นภาษาเชื่อม ในโปรแกรมต่างๆ วันนี้ผมมีแหล่งข้อมูลที่เกี่ยวข้องกับการนำภาษาไพทรอนไปใช้ในการพัฒนาโปรแกรมด้าน GIS ทั้งในรูปแบบ Stand alone และแบบ Mobile GIS มาแนะนำ

        โปรเจคนี้ชื่อว่า Python GIS โดยในโปรเจคนี้ประกอบด้วย

  • Pygps : python ที่ใช้ในการติดต่อกับ GPS สามารถ tracking ,บันทึกข้อมูลได้ และสามารถแสดงผลข้อมูลบนแผนที่จาก Terra Server ได้
  • Mapview : Python map viewer
  • LatLongUTMconversion : Python library สำหรับจัดการเรื่องระบบพิกัดภูมิศาสตร์ โดยสามารถแปลงพิกัดภูมิศาสตร์จาก LatLong เป็น UTM ได้

          ท่านที่สนใจสามารถไปดาวโหลดไลบารี่และซอสโค้ดตัวอย่างได้ที่ http://pygps.org/ 

 


NetTopologySuite Solution สำหรับนักพัฒนา .NET

ธันวาคม 27, 2007

       ผมก็เป็นอีกคนหนึ่งครับที่ชื่นชอบการพัฒนาโปรแกรมด้วย .NET เนื่องจากความสะดวกสบายในการทำงาน ประกอบกับสามารถใช้งานกับเครื่องที่เป็น Windows ได้ง่ายไม่ค่อยเกิดปัญหา วันนี้มีอีกหนึ่งตัวเลือกสำหรับนักพัฒนาโปรแกรมด้วย .NET ที่ต้องการหา Class สำหรับระบบงานทางด้าน GIS ตัวเลือกที่ว่าก็คือ NetTopologySuite เป็น C#/.NET ที่พอร์ตมาจาก JTS Topology Suite ซึ่งเป็น Java library

       NetTopologySuite ช่วยให้เราสามารถพัฒนาโปรแกรมทางด้าน GIS บน .NET platform ได้ท่านที่สนใจสามารถดาว์โหลดมาใช้ได้ที่ http://code.google.com/p/nettopologysuite/