Tag: Web Map Services

  • การสร้างแผนที่ออนไลน์ (Web Map) ด้วยลิงค์ KML/KMZ

    นักพัฒนาเว็บหลายคนคงจะคุ้นเคยกับการสร้าง web map ด้วย google map api กันนะคับ (เป็นที่นิยมเลยล่ะ) แต่ในยุคปัจจุบันที่มีการเผยแพร่ข้อมูลที่เป็น near real time กันมากยิ่งขึ้น จะเห็นได้จากหลายหน่วยงานมีการเผยแพร่ Web Map Services กันเยอะมากยิ่งขึ้น และแย่งชิงความเป็นผู้นำในการนำเสนอข้อมูลที่เป็นปัจจุบันทันด่วนที่สุด

    แต่ด้วยปัจจัยในการต้องติดตั้งโปรแกรมบน Web Map Server เพื่อให้สามารถใช้งาน web map ผ่าน server ได้ (เสียงบประมาณเพิ่ม)
    ***ใครมี ArcGIS Server จะลองทำ การสร้างเว็บแผนที่จุดความร้อน(Hotspot) โดยใช้ WMS บน ArcGIS Server ดูได้นะคับ

     

    วันนี้เลยจะขอนำเสนอโค้ดง่ายๆ ในการนำลิงค์ KML/KMZ จากเว็บที่ให้บริการฟรี! มาสร้างเป็นหน้าเว็บเพจของเราโดยที่ไม่ต้องติดตั้ง map server กันคับ ^^ ที่สำคัญ ต้นทางข้อมูลอัพเดทข้อมูล หน้าเว็บเราก็อัพเดทไปด้วย อิอิ

    ขั้นตอนการสร้าง

    1. เปิดหน้าเว็บที่ให้บริการลิงค์ ***ตัวอย่างเว็บ http://slb-gis.envi.psu.ac.th

    2. เลือกชั้นข้อมูลที่ต้องการ แล้วคลิกขวา > copy link address

    00

    3. สร้างไฟล์ gmap.html แล้วเปิด edit ด้วยโปรแกรม notepad หรือ text editor

    4. copy โค้ดนี้ไปวาง

    <!DOCTYPE html>
    <html>
    <head>
    <meta name=”viewport” content=”initial-scale=1.0″>
    <meta charset=”utf-8″>
    <title>การสร้างแผนที่ออนไลน์ (Web Map) ด้วยลิงค์ KML/KMZ</title>
    <style>
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    #map {
    height: 100%;
    }
    </style>
    </head>
    <body>
    <div id=”map”></div>
    <script>

    function initMap() {
    var map = new google.maps.Map(document.getElementById(‘map’), {
    zoom: 11,
    center: {lat: 100.756297, lng: 14.790059}
    });

    var ctaLayer = new google.maps.KmlLayer({
    url: ‘ที่อยู่ kml/kmz ลิงค์‘,
    map: map
    });
    }

    </script>
    <script async defer
    src=”https://maps.googleapis.com/maps/api/js?key=google map api key“>
    </script>
    </body>
    </html>

    4. วางลิงค์ที่ copy มาจากเว็บตรงurl: ‘http://slb-gis.envi.psu.ac.th/home1/images/download/kmz/gcs_slbforu.kmz‘,

    และใส่ google map api key ***ถ้าไม่มีให้ไปที่ https://developers.google.com/maps/documentation/javascript/get-api-key

    01

    5. ลองเปิดผ่าน http://localhost/gmap.html จะได้ตามรูป

    02

    6. หากคลิกที่ข้อมูล จะมี pop-up แสดงข้อมูลขึ้นมา

    03

    7. เว็บไซต์ของท่านก็จะมีหน้าเว็บแมพไว้ใช้งานได้แบบง่ายๆ โดยไม่ต้องติดตั้ง web map server ^^

     

    ****บริการฟรี! ชั้นข้อมูลลุ่มน้ำทะเลสาบสงขลาเพิ่มเติมได้ที่ โครงการการพัฒนาฐานข้อมูลสารสนเทศภูมิศาสตร์ลุ่มน้ำทะเลสาบสงขลา โดย สถานวิจัยสารสนเทศภูมิศาสตร์ทรัพยากรธรรมชาติและสิ่งแวดล้อม คณะการจัดการสิ่งแวดล้อม มหาวิทยาลัยสงขลานครินทร์

  • การนำเข้า Web Map Services บนโปรแกรม ArcGIS

    จากคราวก่อนเคยพูดถึง การนำเข้า Web Map Service บน Google Earth มาแล้ว วันนี้จะขอนำเสนอ การนำเข้า Web Map Services (WMS) บนโปรแกรม ArcGIS กันบ้าง

    ปัจจุบันนี้ กระแส Web Map Service (WMS) กำลังมาแรงทีเดียวเชียว ซึ่งจะเห็นได้จากหลายๆหน่วยงานของรัฐที่จะมีการเผยแพร่ลิงค์ WMS ให้ผู้ใช้สามารถนำไปใช้ต่อยอดกับงานด้าน GIS ได้ อีกทั้งยังเป็นการเผยแพร่ข้อมูลที่เป็นประโยชน์และเป็นปัจจุบันทันเหตุการณ์ เข้ากับยุคข้อมูลข่าวสารไร้พรหมแดนไร้ขอบเขตกันอีกด้วยนะครับ

    ข้อดีของ WMS ที่เห็นได้ชัดคือ

    1. เจ้าของข้อมูลไม่ต้องเผยแพร่ shape file (ซึ่งหลายๆท่านอาจจะได้มาซึ่งความยากลำบากในกระบวนการทำงานกว่าจะได้ข้อมูลนั้นมา) แต่สามารถเผยแพร่ให้สาธารณะทราบได้ว่า เรามีข้อมูลนี้อยู่นะ ถ้าอยากได้ข้อมูลดิบ ก็ติดต่อหรือเจรจาเรื่องค่าเหนื่อยกันหลังไมค์ >*<
    2. ผู้นำไปใช้ ก็ไม่ต้องคอยอัพเดทข้อมูล เพราะทุกครั้งที่ต้นทางเจ้าของข้อมูลอัพเดทข้อมูล ข้อมูลเราก็จะอัพไปด้วย สบายยยยย

     

    *** หากยังไม่มีโปรแกรม ArcGIS for Desktop ก็สามารถดาวน์โหลดมาติดตั้งใช้งานได้ฟรี 60 วัน นะคับ ดูวิธีการติดตั้งได้ที่ การติดตั้งโปรแกรม ArcGIS 10.4 for Desktop (Trial)

    วิธีการนำ WMS ไปใช้กับโปรแกรม ArcGIS for Desktop

    1. Copy WMS ลิงค์ที่ได้จากเว็บไซต์ **ตัวอย่างจากเว็บ http://slb-gis.envi.psu.ac.th01.1

    2. เปิดโปรแกรม ArcMap > เปิด ArcCatalog > ดับเบิ้ลคลิก Add WMS Server

    01

    3. past ลิงค์ที่ copy มาจากเว็บที่ URL > คลิกปุ่ม Get Layers ระบบจะแสดงชั้นข้อมูลขึ้นมา > คลิกปุ่ม OK

    02

    4. ที่ Catalog จะปรากฏข้อมูล WMS ที่ได้เพิ่มไปเมื่อสักครู่นี้

    04

    5. คลิกเม้าส์ค้าง (drag mouse) ลากชั้นข้อมูลมาวางที่พื้นที่งาน จะปรากฏการแสดงผลของชั้นข้อมูล ซึ่งจะเป็น Layer หนึ่งของโปรเจ็คงาน

    05

    6. เสร็จ ^^

     

    ****บริการฟรี! ชั้นข้อมูลลุ่มน้ำทะเลสาบสงขลาเพิ่มเติมได้ที่ โครงการการพัฒนาฐานข้อมูลสารสนเทศภูมิศาสตร์ลุ่มน้ำทะเลสาบสงขลา โดย สถานวิจัยสารสนเทศภูมิศาสตร์ทรัพยากรธรรมชาติและสิ่งแวดล้อม คณะการจัดการสิ่งแวดล้อม มหาวิทยาลัยสงขลานครินทร์

  • การสร้างเว็บแผนที่จุดความร้อน(Hotspot) โดยใช้ WMS บน ArcGIS Server

    จากกระแสไฟไหม้พื้นที่ทางการเกษตรทางภาคเหนือของไทย ซึ่งเป็นช่วงฤดูกาลในการเตรียมพื้นดินสำหรับการเพาะปลูกทั้งของประเทศไทยและประเทศเพื่อนบ้าน ทำให้เกิดวิกฤตหมอกควันไฟครอบคลุมพื้นที่ทางภาคเหนือของประเทศ ทำให้เกิดฝุ่นละอองขนาดเล็กที่เป็นอันตรายต่อสุขภาพ โดยสามารถติดตามสถานการณ์ค่าฝุ่นละอองได้ที่เว็บไซต์กรมควบคุมมลพิษ ผู้เขียนจึงได้จัดทำแผนที่ออนไลน์แสดงจุดความร้อน (Hotspot) แบบ Real Time (มีการอัพเดทข้อมูลจุดความร้อนทุกๆชั่วโมง) โดยใช้การนำเข้าข้อมูล WMS (Web Map Service) จากเว็บไซต์ NASA

    มาดูวิธีการสร้างเว็บแผนที่(Web Map Application) ด้วยการนำเข้า WMS บน ArcGIS Server 10 กันนะคับ

    2016-02-14_17-51-55

    ขั้นตอนหลักๆ จะมี 3 ส่วนคือ

    1. การสร้างไฟล์นำเข้า WMS ด้วยโปรแกรม ArcGIS Desktop
    2. การสร้าง Services บน ArcGIS Server
    3. การสร้าง Web Map Application บน ArcGIS Server

    โดยมีขั้นตอนดังนี้

    1. เข้าไปที่เว็บไซต์ https://firms.modaps.eosdis.nasa.gov/web-services/
    2. คลิกขวาที่ลิงค์ MODIS 1km > Copy link address

    00

    3. เปิดโปรแกรม ArcGIS Desktop > เปิด Catalog > คลิก GIS Server > Add WMS Server

    01

    4. วางลิงค์ที่ได้จากเว็บ ที่ช่อง URL แล้วคลิกปุ่ม Get Layer

    http://firms.modaps.eosdis.nasa.gov/wms/c6/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=fires24&width=1024&height=512&BBOX=-180,-90,180,90&&SRS=EPSG:4326

    02

    5. จะปรากฏชั้นข้อมูล > คลิกปุ่ม OK

    03

    6. Catalog จะแสดง WMS จากนั้นลากข้อมูลวางไว้ตรงพื้นที่งาน

    04

    7. แสดงจุดความร้อน โดยมีชั้นข้อมูลแบบ 24 ชม. และ 48 ชม.

    05

    8. เปลี่ยนชื่อชั้นข้อมูล เพื่อเข้าใจง่ายต่อการแสดงผ่านเว็บ

    06

    9. เพิ่มข้อความในแผนที่เพื่อให้เครดิตเจ้าของข้อมูล โดยคลิกที่เมนู Insert > Text

    07

    10. พิมพ์ Power by Firms Group of NASA แล้วปรับแต่งขนาดและตำแหน่งของข้อความ

    08

    11. จากนั้นทำการ Save ไฟล์ชื่อ hotspot2016.mxd

    12. ต่อไปเป็นขั้นตอนการสร้าง web map application โดยเปิด ArcGIS Server Manager

    13. ทำการสร้าง Services โดยคลิกที่ Services > Manager Services > Publish a GIS Resource

    09

    14. แท็บ General ใส่ชื่อ service ตรงช่อง Name :  ในที่นี้ใช้ชื่อ hotspot2016

    10

    15. แท็บ Parameters ตรง Map Document: ให้คลิกเลือกไฟล์ที่ได้จัดทำไว้ก่อนหน้านี้ในโปรแกรม ArcGIS ในที่นี้ไฟล์ชื่อ hotspot2016.mxd

    11

    16. แท็บ Capabilities กำหนดค่าตาม default

    12

    17. แท็บ Pooling ปรับตัวเลขให้เป็น 10 ตรงช่อง Maximum number of instances > คลิกปุ่ม Save and Restart

    13

    18. เมื่อได้สร้าง Services แล้ว ต่อไปทำการสร้างเว็บ ด้วยการคลิกที่ Applications >
    Create Web Application

    14

    19. ตั้งชื่อเว็บเป็น Fire ซึ่งจะเป็นชื่อเว็บสำหรับการเผยแพร่

    15

    20. แท็บ Layer เพื่อเลือก Services ที่ได้สร้างไว้ก่อนหน้านี้ คือ hotspot2016 > คลิกปุ่ม Add

    16

    21. เพิ่ม Layer แผนที่ฐาน (Basemap) เพื่อเป็นพื้นหลังของแผนที่ โดยมี 2 Layers ที่แสดงเป็นแบบ Roads และ Aerial with labels > จากนั้นคลิกปุ่ม Add

    17

    22. จะปรากฏชั้นข้อมูล (Layers) ตามที่ได้เลือกไว้ โดยทำการเปลี่ยนชื่อ Layer เพื่อให้เข้าใจง่ายในการแสดงผล

    18

    23. ทำการตั้งค่าการแสดง scale ของแผนที่ด้วยการคลิกปุ่ม Define… ตามรูป

    19

    24. ปรับขนาดการแสดงผลหน้าจอตามต้องการ ในที่นี้ปรับให้พอดีกับประเทศไทย > คลิก OK

    20

    25. ปรับแต่งชื่อเรื่องเว็บและ web links > คลิกปุ่ม Finish

    21

    26. จะปรากฏ web application ที่ได้ทำการสร้างไว้ ในที่นี้จะเป็น http://servername/fire

    22

    27. คลิกที่เว็บลิงค์ จะปรากฏหน้าต่างเว็บขึ้นมา ดังรูป

    23

    28. หากเผยแพร่แล้วจะเป็น http://slb-gis.envi.psu.ac.th/fire

    2016-02-14_17-51-55

    *** ยาวนิดนะคับ พอดีทำรายงานเลยคิดว่าน่าจะเป็นประโยชน์สำหรับใครที่สนใจเรื่อง Web Map Application และสำหรับใครหลายๆคนที่อาจจะยังมองไม่ออกว่า เอ??? GIS Web Map นี่เขาทำกันอย่างไร?

    *** ข้อดีของ WMS (Web Map Service) คือ จะเป็นการเชื่อต่อข้อมูลจากต้นทางมายังเว็บไซต์เรา โดยหากต้นทางมีการ update ข้อมูล ก็จะทำให้แผนที่ของเรา update ไปด้วยแบบอัตโนมัติ

    ข้อเสีย คือ หากเว็บต้นทางล่ม หรือยกเลิกการใช้งาน เว็บเราก็จะล่มไปด้วย (ไม่มีการแสดงผลทางหน้าเว็บ)

    *** ข้อดีของ ArcGIS Server คือ สะดวก มีขั้นตอนที่ไม่ซับซ้อน แต่การปรับแต่งความสวยงามของเว็บ ยังคงด้อยกว่า Geoserver + OpenLayer ซึ่งเป็น Open source อยู่นะคับ ที่สำคัญคือ ต้องซื้อ license ในราคาที่ค่อนข้างสูงอยู่

    ลิงค์ที่เกี่ยวข้อง