Tag: Google Maps

  • การค้นหาสถานที่ด้วย Places search box และแสดงผลภาพจากข้อมูล Street View บน Google Maps

           ความเดิมจากตอนที่แล้วของบทความ “การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps” เพื่อแก้ปัญหาในการดึงค่าละติจูด-ลองจิจูดจากชื่อสถานที่ที่ผู้ใช้พิมพ์ค้นหาไว้ โดยมีการนำ “Places search box” มาใส่ไว้ในแผนที่ที่เราต้องการแทนนั้น ถือเป็นตัวช่วยให้กับผู้ใช้ในระดับหนึ่ง  แต่สำหรับในบทความนี้ ผู้เขียนจะขอต่อยอดความรู้ดังกล่าว โดยได้ศึกษาและนำวิธีการแสดงผลภาพจากข้อมูล Street view มาประยุกต์ใช้ร่วมด้วย เพื่อให้ผู้ใช้สามารถมองเห็นสถานที่จริงที่เลือกได้จากแผนที่ได้ด้วย ซึ่งจะยิ่งช่วยอำนวยความสะดวกให้กับผู้ใช้ ทำให้ผู้ใช้สามารถตรวจสอบได้ว่าสถานที่ดังกล่าวเป็นสถานที่ที่ต้องการจะดึงค่าละติจูด-ลองจิจูดจริงหรือไม่ได้อีกทางหนึ่งนั่นเอง ซึ่งวิธีการบางส่วนจะขอยกยอดมาจากบทความก่อนหน้านี้ เกี่ยวกับเรื่องการดึงค่าละติจูด-ลองจิจูดจากการค้นหาโดยใช้ Places search box และจะขอเพิ่มเติมความสามารถในการแสดงผลภาพ Street View  รวมทั้งสามารถคลิกจุดพิกัดใหม่บนแผนที่ เพื่อค้นหาตำแหน่ง สถานที่ตั้ง และรายละเอียด รวมถึงภาพจาก Street View ได้อีกด้วย เพื่อให้การดึงค่าพิกัดใกล้เคียงความจริงมากที่สุด โดยมีวิธีการดังนี้

    • ส่วนของสไตล์ชีทในการแสดงผล ขึ้นกับการตกแต่งของผู้พัฒนาแต่ละท่าน
    <!—ส่วนของ Style Sheets->
    <style>
    html, body {
     height: 100%;
     margin: 0;
     padding: 0;
    }
    #map {
     width: 100%;
     height: 400px;
    }
    .controls {
     margin-top: 10px;
     border: 1px solid transparent;
     border-radius: 2px 0 0 2px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     height: 32px;
     outline: none;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    #searchInput {
     background-color: #fff;
     font-family: Roboto;
     font-size: 15px;
     font-weight: 300;
     margin-left: 12px;
     padding: 0 11px 0 13px;
     text-overflow: ellipsis;
     width: 80%;
    }
    #searchInput:focus {
     border-color: #4d90fe;
    }
    
    </style>
    
    • ส่วนของการอ้างอิง libraries เพื่อใช้งาน Google API
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRbMoDPc_mTv3D3QPqe0Ar84nSvRhA8nk&libraries=places&callback=initMap" async defer></script>
    
    • ส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผล
      • ฟังก์ชั่น initMap() ซึ่งจะเรียกใช้งานตอนเริ่มต้นโหลดหน้าจอขึ้นมา
    <script>
     var panorama;
     var map;
     var markers = [];
    /***** function ในการประกาศค่าเริ่มต้นให้กับแผนที่*****/
     function initMap() {
    
    /***** ประกาศตำแหน่งพิกัดกึ่งกลางให้กับการแสดงผลแผนที่ ในที่นี้กำหนดเป็นกรุงเทพมหานคร*****/
     var center_point = { lat: 13.7563309, lng: 100.50176510000006 };
     var sv = new google.maps.StreetViewService();
    
    /***** เป็นส่วนของการแสดงผลภาพจาก Street View *****/
     panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
    
     /***** กำหนดรายละเอียดคุณสมบัติของแผนที่*****/
     var map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: center_point.lat, lng: center_point.lng},
     zoom: 13,
     streetViewControl: false // เป็นส่วนที่ Set เพิ่มเติมจากปกติ
     });
    
    sv.getPanorama({ location: center_point, radius: 50 }, processSVData);
    
    /***** กำหนด event เมื่อมีการคลิกแผนที่*****/
     map.addListener('click', function(event) {
     
    /***** ล้างข้อมูลการกำหนดจุด เพื่อให้มีการกำหนดจุดพิกัดเพียงจุดเดียว*****/
     for (i = 0; i < markers.length; i++) {
     markers[i].setMap(null);
     }
    
    /***** ดึงค่าข้อมูลจาก Street View ตามพิกัดที่คลิกบนแผนที่ *****/
     sv.getPanorama({ location: event.latLng, radius: 50 }, processSVData);
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({
     'latLng': event.latLng
     }, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
    
    /***** แสดงผลข้อมูลรายละเอียดสถานที่*****/
     if (results[0]) {
        var place = results[0];
         for (var i = 0; i < place.address_components.length; i++) {
           if (place.address_components[i].types[0] == 'postal_code') {
             document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
          }
     if (place.address_components[i].types[0] == 'country') {
     document.getElementById('country').innerHTML = place.address_components[i].long_name;
        }
      }
     document.getElementById('location').innerHTML = results[0].formatted_address;
     document.getElementById('lat').innerHTML = results[0].geometry.location.lat();
     document.getElementById('lon').innerHTML = results[0].geometry.location.lng();
        }
       }
     });
     });
     /***** กำหนดตำแหน่งที่ตั้งของ control ที่จะวางในแผนที่*****/
     var input = document.getElementById('searchInput');
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    
     /***** เพิ่ม Feature ให้กับ textbox ให้สามารถพิมพ์ค้นหาสถานที่ได้*****/
     var autocomplete = new google.maps.places.Autocomplete(input);
     autocomplete.bindTo('bounds', map);
    
     var infowindow = new google.maps.InfoWindow();
     
     /***** กำหนดคุณสมบัติให้กับตัวพิกัดจุดหรือ marker *****/
     var marker = new google.maps.Marker({
     map: map,
     anchorPoint: new google.maps.Point(0, -29)
     });
    markers.push(marker); //เก็บค่าการกำหนดจุดพิกัดไว้ในตัวแปร markers เพื่อใช้ล้างข้อมูลการกำหนดจุดได้
    
     /***** ทำงานกับ event place_changed หรือเมื่อมีการเปลี่ยนแปลงค่าสถานที่ที่ค้นหา*****/
     autocomplete.addListener('place_changed', function() {
     infowindow.close();
     marker.setVisible(false);
     var place = autocomplete.getPlace();
     if (!place.geometry) {
     window.alert("ไม่ค้นพบพิกัดจากสถานที่ดังกล่าว");
     return;
     }
    
     /***** แสดงผลบนแผนที่เมื่อพบข้อมูลที่ต้องการค้นหา *****/
     if (place.geometry.viewport) {
     map.fitBounds(place.geometry.viewport);
     } else {
     map.setCenter(place.geometry.location);
     sv.getPanorama({ location: place.geometry.location, radius: 50 }, processSVData);
     map.setZoom(17);
     }
     marker.setIcon(({
     url: place.icon,
     size: new google.maps.Size(71, 71),
     origin: new google.maps.Point(0, 0),
     anchor: new google.maps.Point(17, 34),
     scaledSize: new google.maps.Size(35, 35)
     }));
     marker.setPosition(place.geometry.location);
     marker.setVisible(true);
     
     /***** แสดงรายละเอียดผลลัพธ์การค้นหา *****/
     var address = '';
     if (place.address_components) {
     address = [
     (place.address_components[0] && place.address_components[0].short_name || ''),
     (place.address_components[1] && place.address_components[1].short_name || ''),
     (place.address_components[2] && place.address_components[2].short_name || '')
     ].join(' ');
     }
     /***** แสดงรายละเอียดผลลัพธ์การค้นหาเป็น popup โดยมีชื่อและสถานที่ดังกล่าว *****/
     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
     infowindow.open(map, marker);
    
     /***** แสดงรายละเอียดผลลัพธ์การค้นหา ซึ่งประกอบด้วย ที่อยู่ รหัสไปรษณีย์ ประเทศ ละติจูดและลองจิจูด *****/
     for (var i = 0; i < place.address_components.length; i++) {
     if(place.address_components[i].types[0] == 'postal_code'){
     document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
     }
     if(place.address_components[i].types[0] == 'country'){
     document.getElementById('country').innerHTML = place.address_components[i].long_name;
     }
     }
     document.getElementById('location').innerHTML = place.formatted_address;
     document.getElementById('lat').innerHTML = place.geometry.location.lat();
     document.getElementById('lon').innerHTML = place.geometry.location.lng();
     });
    }
    </script>
    
    • ฟังก์ชั่น processSVData() เป็นฟังก์ชั่นที่ใช้ในการนำค่าของ Street view มาแสดงผล
    <script>
    function processSVData(data, status) {
     if (status === 'OK') {
     
      marker = new google.maps.Marker({
     position: data.location.latLng,
     map: map,
     title: data.location.description
     });
     markers.push(marker);
     panorama.setPano(data.location.pano);
     panorama.setPov({
     heading: 270,
     pitch: 0
     });
     panorama.setVisible(true);
    
     marker.addListener('click', function() {
     
     var markerPanoID = data.location.pano;
     // Set the Pano to use the passed panoID.
     panorama.setPano(markerPanoID);
     panorama.setPov({
     heading: 270,
     pitch: 0
     });
     panorama.setVisible(true);
     });
     } else {
     console.error('ไม่พบข้อมูล Street view ตามสถานที่ดังกล่าว');
     }
     }
    </script>
    
    • ส่วนของการแสดงผล (ใน tag body)
    <body>
    
    <!--ส่วนของการแสดงรายละเอียดผลลัพธ์ที่ได้->
     <table style="width: 100%">
     <tr>
     <td>
    <!--ส่วนของ Element ที่ใช้ในการแสดงผล->
     <input id="searchInput" class="controls" type="text" placeholder="Enter a location">
    <div id="map" style="width: 60%;height:360px;float:left"></div>
    <div id="pano" style="width: 40%;height:360px; float:left"> </div><br />
     </td>
     
     </tr>
     <tr>
     <td>
     <div id="Div1" style="width: 100%;" >
     <ul id="geoData">
     <li>ที่อยู่: <span id="location"></span></li>
     <li>รหัสไปรษณีย์ : <span id="postal_code"></span></li>
     <li>ประเทศ: <span id="country"></span></li>
     <li>ละติจูด: <span id="lat"></span></li>
     <li>ลองจิจูด: <span id="lon"></span></li>
    </ul>
    </div>
    
     </td>
     </tr>
     
     </table>
     <!--ส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผลที่กล่าวไว้ก่อนหน้านี้-> <script> /***** function ในการประกาศค่าเริ่มต้นให้กับแผนที่ และอื่นๆตามที่กล่าวไว้แล้วข้างต้น*****/ </script> <!--สิ้นสุดส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผล-> </body>

    ผลลัพธ์ที่ได้

    1. เมื่อเปิดหน้าจอขึ้นมา จะแสดงพิกัดที่จังหวัดกรุงเทพมหานครเป็นค่าตั้งต้น และฝั่งขวาเป็นภาพที่ดึงข้อมูลมาได้จากพิกัดดังกล่าวจากข้อมูล Street Views

    2. พิมพ์ค้นหาชื่อสถานที่ และเลือกสถานที่ที่ต้องการ

    3. เมื่อเลือกสถานที่เรียบร้อย จะมีการกำหนดพิกัดจุดตามชื่อสถานที่ที่เลือกไว้ และแสดงผลภาพจาก Street View รวมทั้งแสดงรายละเอียดในส่วนล่างของหน้าจอ ดังภาพ

           นอกจากการค้นหาพิกัดและข้อมูลภาพจาก Street View โดยใช้วิธีการพิมพ์ค้นหาแล้วนั้น ผู้ใช้ยังสามารถค้นหาพิกัดใหม่ได้จากการคลิกบนแผนที่ได้อีกด้วย ซึ่งจะแสดงผลลัพธ์ได้เช่นกัน ดังภาพ

           ผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้จะช่วยเพิ่มประสิทธิภาพและเป็นอีกหนึ่งทางเลือกให้กับผู้พัฒนาได้หยิบยกวิธีการดึงค่าละติจูด-ลองจิจูดและการแสดงผลข้อมูลไปประยุกต์ใช้กับงานของแต่ละท่าน และอาจถือเป็นการเพิ่มลูกเล่นให้กับเว็บไซต์ของท่านให้มีความสามารถที่หลากหลายมากขึ้นเกี่ยวกับการใช้งานร่วมกับแผนที่ Google Maps หากผู้อ่านท่านใดมีข้อเสนอแนะหรือแนะนำวิธีเพิ่มเติมเกี่ยวกับเรื่องดังกล่าว ผู้เขียนยินดีเป็นอย่างยิ่งที่จะรับฟังและร่วมแบ่งปันความรู้ร่วมกันค่ะ หากบทความนี้มีส่วนผิดพลาดประการใด ผู้เขียนขออภัยไว้ ณ ที่นี้ด้วยค่ะ ^^

    แหล่งข้อมูลอ้างอิง :  

    https://www.tutorialspoint.com/google_maps/google_maps_symbols.htm

    http://www.codexworld.com/autocomplete-places-search-box-google-maps-javascript-api/

          https://developers.google.com/maps/documentation/javascript/examples/streetview-service

  • การติดตั้งและใช้งาน ArcGoogle for ArcGIS เพื่อใช้ Google Satellite เป็นแผนที่ฐาน

    Google Maps เริ่มมีบทบาทและได้รับความนิยมในการนำไปใช้ในการแปลภาพถ่ายในด้านทรัพยากรธรรมชาติและสิ่งแวดล้อม หรือรวมไปถึงเรื่องการใช้ประโยชน์ที่ดิน เพื่อนำไปจัดทำฐานข้อมูลภูมิสารสนเทศ หรือ GIS มากยิ่งขึ้น ด้วยความที่เป็นปัจจุบันหรือ update ค่อนข้างที่จะเป็นปัจจุบันหรือใกล้เคียงปัจจุบัน อีกทั้งผู้ใช้สามารถเข้าถึงได้ง่าย ใช้งานง่าย นักภูมิสารสนเทศ หรือนัก GIS หรือคนที่ทำงานด้าน GIS จึงมักจะเลือกที่จะนำมาใช้ในการแปลภาพถ่าย หรือเรียกว่า การสำรวจระยะไกล (Remote Sensing : RS)

     

    วันนี้เลยอยากจะขอนำเสนอ plugin ตัวนึงที่น่าสนใจ นั่นคือ ArcGoogle for ArcGIS เพื่อใช้ในการนำเข้า Google Satellite เป็น BaseMaps (แผนที่ฐาน) ในการแปลภาพถ่าย ซึ่งก่อนหน้านี้เคยนำเสนอ การติดตั้ง (OpenLayers Plugin) Google Satellite บน QGIS มาแล้วสำหรับคนที่ใช้โปรแกรม QGIS ลองแวะเข้าไปอ่านดูได้นะคับ ^^

     

    ขั้นตอนการติดตั้ง

    1. ดาวน์โหลดไฟล์ ArcGoogle ได้ ที่นี่

    โดยเลือกดาวน์โหลดไฟล์ให้เหมาะกับ ArcGIS เวอร์ชั่นที่ใช้งานอยู่

    • For ArcGIS 9.3, 10.0, 10.1 or 10.2
    • For ArcGIS 10.3 or 10.4

    2. เมื่อดาวน์โหลดมาแล้ว ให้ unzip จากนั้นดับเบิ้ลคลิก setup.exe

    3. ติดตั้งตามรูปเลยคับ

    4. ติดตั้งเสร็จสิ้น

    ขั้นตอนการใช้งาน

    1. เปิดโปรแกรม ArcGIS หากใครยังไม่ได้ติดตั้ง สามารถเข้าไปดาวน์โหลดและติดตั้ง เวอร์ชั่นทดลองใช้งานได้ 60 วัน ที่นี่

    2. คลิกที่เมนู Customize > เลือก Customize Mode…

    3. คลิกเลือก ArcGoolge-ungdungmoi.com จะแสดงแถบเมนูเครื่องมือขึ้นมา  จากนั้นคลิกปุ่ม Close เพื่อปิดหน้าต่าง

    4. คลิก Google Map > Google Satellite

    5. จะมีชั้นข้อมูล(Layer) ขึ้นมา พร้อมกับแสดงแผนที่ Google Satellite ขึ้นมา

    6. นอกจากนี้ ยังสามารถคลิกบนแผนที่ เพื่อแสดงภาพ Google Street View ได้ด้วย

    7. นอกจากนี้ ยังสามารถดึงค่า Elevation จาก Google ได้ด้วย โดยการคลิกที่ไอคอน 

    8. กำหนด Cell size (หน่วยเป็น เมตร) (จำนวนสูงสุดของจุดแต่ละครั้งดาวน์โหลด 300m)

    9. จากนั้นคลิกปุ่ม Get Elevation > รอสักครู่ จะแสดงตารางค่าขึ้นมา

    ** อ่านเพิ่มเติมเกี่ยวกับ Elevation ที่นี่

    10. เราสามารถ export ค่า elevation ออกมาเป็น shape file ได้ โดยคลิกปุ่ม Export to Shapefile > ตั้งชื่อไฟล์ > คลิกปุ่ม Save

    11. มีชั้นข้อมูล (Layer) เพิ่มขึ้นมา โดยจะมีจุด elevation อยู่บนแผนที่ และแสดงค่าและตำแหน่งพิกัด(Lat, Long) ด้วยการเปิด attribute table ดังรู)

     

    จะเห็นได้ว่า ภาพที่ได้จาก Google maps มีความละเอียดสูง สามารถซูมได้จนเห็นหลังคาบ้านหรือพื้นผิวถนน จึงทำให้การแปลภาพถ่ายมีความถูกต้องสูง ซึ่งจากการนำเข้า google maps เป็น basemaps นี้ ก็จะสามารถนำไปใช้ในด้านต่างๆ ได้อีกมากมาย

     

    ปกติแล้วนักพัฒนาเว็บ (web developer) จะนิยมใช้ Google Maps API ในการพัฒนา Map on Web ….. ลองหันมาเพิ่มศักยภาพในการแสดงแผนที่ในเชิงวิเคราะห์และมีความซับซ้อนของข้อมูลเชิงพื้นที่ดูไม๊ครัช ^^

    สำหรับท่านใดที่นึกหน้าตา web map application ไม่ออก ลองแวะเข้าไปเยี่ยมชมได้ที่ http://slb-gis.envi.psu.ac.th

    หรือ download shape file เพื่อลองนำไปใช้ได้ที่ http://slb-gis.envi.psu.ac.th/ เมนู ฐานข้อมูล GIS

     

    ===============================================
    สถานวิจัยสารสนเทศภูมิศาสตร์ ทรัพยากรธรรมชาติและสิ่งแวดล้อม
    ศูนย์ภูมิภาคเทคโนโลยีอวกาศและภูมิสารสนเทศ ภาคใต้
    คณะการจัดการสิ่งแวดล้อม มหาวิทยาลัยสงขลานครินทร์
    เว็บไซต์ http://www.rsgis.psu.ac.th
    แฟนเพจ https://www.facebook.com/southgist.thailand

  • การสร้างภาพ 360 องศาเข้า Google Street View ด้วย Android device

    จากคราวที่แล้วนำเสนอเรื่อง การรับชมภาพสถานที่และเส้นทางในมอ. ผ่าน Google Street View ไปแล้วนะคับ วันนี้เลยอยากนำเสนอวิธีการสร้างภาพ 360 องศา ด้วยมือถือแอนดรอยด์ แล้วอัพเข้า Google Street View ใน Google Maps กันแบบง่ายๆ นะคับ

    **ทำไม่ยาก แต่ต้องอาศัยความเนียนในการเล็กภาพเพื่อให้เชื่อมต่อกันสนิท

    00

    ขั้นตอนการทำ

    1. ติดตั้งแอพ Google Street View จาก Play Store

    01

    2. เมื่อติดตั้งเสร็จแล้วก็เปิดแอพขึ้นมา ไปที่เมนู Explore > คลิกปุ่มวงกลมสีเหลือง (ตามรูป)

    02

    3. คลิกเลือก Camera เพื่อจะถ่ายรูป 360 องศา

    03

    4. แอพจะเตือนให้เราเปิด Location หรือ GPS เพื่อให้ Google ทราบตำแหน่งพิกัดที่เราอยู่ ณ ปัจจุบันที่จะถ่ายภาพ

    04

    5. เริ่มทำการถ่ายภาพ โดยจะมีลูกศรสามเหลี่ยมชี้นำทิศทางในการปรับมุมกล้องในการถ่ายแต่ละจุด

    05

    6. เลื่อนให้จุดวงกลมสีเหลือง เข้ามาซ้อนทับในวงกลมสีขาว แบบพอดีตรงกลาง เพื่อให้ได้ภาพรอยต่อที่เชื่อมต่อกันในแต่ละภาพ

    07

    6. เมื่อวงกลมทั้งสองอันมาซ้อนทับกันให้รอนิ่งๆสักครู่ อย่าเพิ่งขยับมือถือ **ระบบทำการประมวลภาพเก็บไว้

    06

    7. ทำตามขั้นตอนที่ 6 ไปเรื่อยๆจนครบทุกมุม ***จะมีปรากฎลูกศรสามเหลี่ยมชี้นำทิศทางเหมือนในขั้นตอนที่ 5

    จากนั้นคลิกปุ่มวงกลมสีเขียวที่มีเครื่องหมายถูก เพื่อสิ้นสุดการถ่ายภาพ

    08

    8. เมื่อระบบประมวลภาพเสร็จแล้วจะถูกนำเก็บไว้ใน gallery ของเรา > คลิกที่รูป แล้ว คลิก SELECT

    09

    9. คลิกที่รูป หรือ Add a place เพื่อเริ่มการอัพเข้า Google Street View

    10

    10. เราสามารถทำเบลอภาพ ณ จุดที่เราไม่ต้องการให้เผยแพร่ อาทิเช่น ผู้คน(เรื่องสิทธิส่วนบุคคล) ภาพอุจาดตา ฯลฯ โดยการลากกรอบสี่เหลี่ยมคลอบคลุมบริเวณจุดนั้นๆ จากนั้นคลิกเครื่องหมายถูก เพื่อเสร็จสิ้นการเบลอภาพ

    11 12

    11. คลิก Publish to Google Maps เพื่อทำการเผยแพร่ภาพบน Google Maps ในส่วนของ Google Street View

    14

    12. คลิก Publish เพื่อยืนยันการอัพภาพเข้า Google Maps

    13

    13. เปิด Browser > เข้า http://google.com/maps เพื่อดูภาพที่ได้ทำการอัพสำเร็จ

     

    หวังว่าจะเป็นประโยชน์สำหรับใครหลายๆคนที่อยากลองทำภาพอัพเข้า Google Street View ดูบ้างนะคับ และที่สำคัญ…..

    ช่วยๆกันอัพภาพบริเวณ ม.อ. ของเราให้เต็มพื้นที่ใน Google Maps เลยนะคับ ^______^

    *** หากคิดว่ารูปถ่ายหรือรูปภาพที่ตัวเองทำยังสวยไม่พอ ก็อย่าเพิ่ง Publish เลยนะคับ เพื่อที่ว่าประชากรโลกหรือชาวโลกจะได้รับชมเฉพาะภาพสวยๆ ของมหาวิทยาลัยสงขลานครินทร์ของเรา ^^

  • ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ)

                 จากบทความที่แล้ว ผู้เขียนได้เขียนไว้เกี่ยวกับเรื่องวิธีการกำหนดจุดพิกัดบนแผนที่กันไปบ้างแล้ว ในหัวข้อ “ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C#” สำหรับในบทความนี้ผู้เขียนจึงขอพูดถึงในส่วนของการดึงค่าละติจูด ลองจิจูดของสถานที่ ซึ่งนับว่าเป็นส่วนประกอบสำคัญในการแสดงผลพิกัดบนแผนที่ ซึ่งเดิมทีแล้วนั้น ผู้ใช้อาจต้องค้นหาข้อมูลพิกัดดังกล่าวจาก Google map เองและนำพิกัดดังกล่าวมากรอกลงฐานข้อมูลหรือมาระบุเพื่อการแสดงพิกัดนั้นๆในการเขียนโปรแกรม คงเป็นการดี หากการแสดงผลพิกัดจากฐานข้อมูลนั้น จะมีตัวช่วยอำนวยความสะดวกให้กับผู้ใช้ในการดึงค่าละติจูด และลองจิจูดโดยการกรอกข้อมูลชื่อสถานที่ลงไปเพื่อใช้ในการค้นหา ซึ่งน่าจะเป็นประโยชน์และทำให้ผู้ใช้สามารถใช้งานได้ง่ายขึ้นในการนำพิกัดเหล่านั้นไประบุบนแผนที่นั่นเอง

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

    • การเรียกใช้เซอร์วิสของ Google Geocoding API  โดยการส่งพารามิเตอร์เป็นที่อยู่ของสถานที่ดังกล่าว

    ฝั่ง C#

        private void getLatAndLong()
        {
            try
            {
             ////เป็นการกำหนด url ที่จะใช้ในการเรียกเซอร์วิสของ Google Geocoding API 
    โดยมีการส่งค่าพารามิเตอร์เป็นข้อมูลที่อยู่
                string url = "http://maps.google.com/maps/api/geocode/xml?address=" + txtLocation.Text + "&sensor=false";
                WebRequest request = WebRequest.Create(url);
                using (WebResponse response = (HttpWebResponse)request.GetResponse())
                {
            ////ผลลัพธ์จะอยู่ในรูปแบบของ XML หรือ JSON และจะถูกอ่านให้อยู่ในรูปแบบ Dataset 
    โดยใช้ StreamReader
                     using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8))
                    {
                        DataSet dsResult = new DataSet();
                        dsResult.ReadXml(reader);
           ////จัดทำโครงสร้างตาราง(datatable) ที่จะใช้ในการแสดงผลใน Gridview
                        DataTable dtCoordinates = new DataTable();
                        dtCoordinates.Columns.AddRange(new DataColumn[4] { new DataColumn("Id", typeof(int)),
                            new DataColumn("Address", typeof(string)),
                            new DataColumn("Latitude",typeof(string)),
                            new DataColumn("Longitude",typeof(string)) });
    
           ////ดึงค่าผลลัพธ์จากตารางต่างๆ เพื่อนำค่าที่จำเป็นมาแสดงผลตามต้องการ
                        foreach (DataRow row in dsResult.Tables["result"].Rows)
                        {
                            string geometry_id = dsResult.Tables["geometry"].Select("result_id = " + row["result_id"].ToString())[0]["geometry_id"].ToString();
                            DataRow location = dsResult.Tables["location"].Select("geometry_id = " + geometry_id)[0];
                             dtCoordinates.Rows.Add(row["result_id"],  row["formatted_address"], location["lat"], location["lng"]);
                        }
           ////แสดงผลข้อมูลของค่าที่ดึงมาได้ใน Gridview (ถ้ามี)
                        if (dtCoordinates.Rows.Count > 0)
                        {
                            gvLatLong.DataSource = dtCoordinates;
                            gvLatLong.DataBind();
                        }
                        else
                        {
                            gvLatLong.DataSource = null;
                            gvLatLong.DataBind();
                            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "alert", "alert('Can not find Latitude and Longitude!'); ", true);
    
                        }
                    }
                }
            }
            catch (Exception ex) {
                ScriptManager.RegisterStartupScript(Page, Page.GetType(), "alert", "alert('Can not find Latitude and Longitude!'); ", true);
                gvLatLong.DataSource = null;
                gvLatLong.DataBind();
            }
        
        }
     protected void btnSearch_Click(object sender, EventArgs e)
     {
        getLatAndLong();
     }
    

                 จากโค้ดข้างต้น เป็นการค้นหาละติจูด-ลองจิจูดจากที่อยู่ของสถานที่นั้นๆ โดยใช้ Google Maps Geocoding API ซึ่งเซอร์วิสของ Google Geocoding API มีการส่งค่าโดยใช้ WebRequest โดยจะรับค่าที่อยู่ของสถานที่เป็นพารามิเตอร์และส่งกลับเป็นพิกัดและข้อมูลอื่นๆมาในรูปแบบของ XML หรือ JSON นั่นเอง และค่าที่ส่งกลับมาในรูปแบบ XML นั้นจะถูกอ่านให้อยู่ในรูปแบบ Dataset โดยใช้ StreamReader ซึ่งค่าที่ส่งกลับมานั้นจะมีด้วยกันหลายตาราง และมีการดึงค่าข้อมูลที่เกี่ยวข้องที่จะนำมาใช้เพิ่มลงในตารางที่ถูกสร้างขึ้นใหม่ และนำไปแสดงในกริดวิวนั่นเอง

    ฝั่ง .aspx (Client side)

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
     <title>GetLatitude-Longitude</title>
    <!-- การอ้างอิงเพื่อให้สามารถเรียกใช้งาน Autocomplete ได้-->
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    </head>
    <body>
     <form id="form1" runat="server">
     <div>
     <asp:TextBox ID="txtLocation" runat="server" Width="450px"></asp:TextBox><asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
     </div>
     <br />
     <div>
     <asp:GridView ID="gvLatLong" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
     <AlternatingRowStyle BackColor="White" />
     <EditRowStyle BackColor="#2461BF" />
     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
     <RowStyle BackColor="#EFF3FB" />
     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
     <SortedAscendingCellStyle BackColor="#F5F7FB" />
     <SortedAscendingHeaderStyle BackColor="#6D95E1" />
     <SortedDescendingCellStyle BackColor="#E9EBEF" />
     <SortedDescendingHeaderStyle BackColor="#4870BE" />
     </asp:GridView>
     </div>
     </form>
     <script type="text/javascript">
     google.maps.event.addDomListener(window, 'load', function () {
    ////การกำหนดคอนโทรล textbox ที่จะเพิ่มความสามารถ place auto-complete 
    เพื่อให้สามารถค้นหาสถานที่ตั้งได้ง่ายขึ้นเมื่อผู้ใช้พิมพ์ข้อมูลชื่อสถานที่ในกล่อง textbox
     var txtplaces = document.getElementById('<%= txtLocation.ClientID %>');
     var places = new google.maps.places.Autocomplete(document.getElementById('<%= txtLocation.ClientID %>'));
     });
     </script>
    </body>
    </html>
    

                 จากโค้ดข้างต้น นอกจากจะเป็นการเรียกใช้เซอร์วิสโดยการคลิกปุ่ม “btnSearch” และรับค่าข้อมูลที่อยู่จากกล่อง textbox แล้ว ยังมีการเพิ่มส่วนของการเพิ่มความสามารถในการค้นหาข้อมูล “ที่อยู่” โดยการกรอกข้อมูล “ชื่อสถานที่” โดยใช้ feature ที่มีของ Google Places API (หรืออาจเรียกว่า place Autocomplete ) เนื่องจากหากมีการเรียกใช้เซอร์วิสดังกล่าวโดยตรง ผู้ใช้จำเป็นที่จะต้องกรอกข้อมูล “ที่อยู่” เพื่อเป็นพารามิเตอร์ให้กับเซอร์วิสที่เรียกใช้ให้ส่งค่าผลลัพธ์กลับมา ซึ่งความน่าจะเป็นที่ผู้ใช้จะสามารถทราบข้อมูลชื่อสถานที่นั้นย่อมเป็นไปได้มากกว่าการทราบข้อมูลที่อยู่ของสถานที่นั้นๆ ผู้เขียนจึงนำมาประยุกต์ใช้งานเข้าด้วยกันกับการเรียกเซอร์วิสที่กล่าวไว้แล้วก่อนหน้านั่นเอง โดยจะแนะนำวิธีการใช้งานเพิ่มเติมในหัวข้อต่อจากนี้

     เพิ่มเติม :
      Place Autocomplete: เป็นfeature ที่มีของ Google Places API เปรียบเสมือนตัวช่วยคำค้นเมื่อมีการป้อนข้อมูลชื่อสถานที่ลงไป โดย feature ดังกล่าวจะแสดงข้อมูลสถานที่ที่ใกล้เคียงกับคำค้นขึ้นมาให้กับผู้ใช้ได้เลือกนั่นเอง

    โดยมีวิธีการเรียกใช้ place autocomplete  ดังนี้
    1. อ้างอิงการเพื่อเรียกใช้งาน Google Places API

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

    2. กำหนดคอนโทรล textbox ที่ต้องการเพิ่มความสามารถ place autocomplete

     var input = document.getElementById('<%= txtSearch.ClientID %>');
     var div = document.getElementById('result');
     var autocomplete = new google.maps.places.Autocomplete(input);

    ตัวอย่างหน้าจอที่ได้เมื่อมีการพิมพ์คำค้น

    place_service1

    ผลลัพธ์

    place_service2

    เพิ่มเติม : Namespace ที่ต้องอ้างอิงเพิ่มเติมในการใช้งานโค้ดที่กล่าวไว้ข้างต้น มีดังนี้
                –  System.IO
                –  System.Net
                –  System.Data
                –  System.Text
    • แบบใช้ place Autocomplete ซึ่งเป็น feature ของ Google Places API ที่จะช่วยในการค้นหาที่อยู่จากชื่อสถานที่ได้และประยุกต์เพิ่มเติมเพื่อดึงค่ามาแสดงเมื่อมีการเลือกรายการสถานที่นั้นๆ
    <!DOCTYPE html>
    <html>
     <head>
    <!-- การอ้างอิงเพื่อให้สามารถเรียกใช้งาน Autocomplete ได้-->
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
     <title>Place Autocomplete</title>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     </head>
     <body>
     <form runat="server">
     <asp:TextBox ID="txtSearch" runat="server" placeholder="Enter a location" Width="350px"></asp:TextBox> 
     <div id="result"></div>
     
     <script>
     function initialize() {
    ////การกำหนดคอนโทรล textbox ที่จะเพิ่มความสามารถ place auto-complete 
    เพื่อให้สามารถค้นหาสถานที่ตั้งได้ง่ายขึ้นเมื่อผู้ใช้พิมพ์ข้อมูลชื่อสถานที่ในกล่อง textbox
     var input = document.getElementById('<%= txtSearch.ClientID %>');
     var div = document.getElementById('result');
     var autocomplete = new google.maps.places.Autocomplete(input);
     google.maps.event.addListener(autocomplete, 'place_changed', function () {
    
    ////ดึงค่าที่ได้เมื่อมีการเลือกรายการจากสถานที่ที่อยู่ที่ขึ้นมา และนำไปใช้ในการแสดงผล
     var place = autocomplete.getPlace();
     if (!place.geometry) {
     return;
     }
     else {
    ////นำค่าที่ดึงได้มาแสดงผลในพื้นที่ที่ต้องการ (result)
     div.innerHTML = '<br><div><strong>' + place.name + '</strong><br>' +
     '<strong>Address :</strong> ' + place.formatted_address + '<br><strong>Latitude :</strong> ' + place.geometry.location.lat() + ' <strong>Longitude:</strong>' + place.geometry.location.lng() + '</div>';
     }
     });
     }
     ////สั่งรันฟังก์ชั่น initialize() ตอนมีการโหลดหน้าจอ
     google.maps.event.addDomListener(window, 'load', initialize); 
     </script>
     </form>
     </body>
    </html>
    

                 จากโค้ดข้างต้น เป็นการดึงค่าละติจูดและลองจิจูดโดยใช้ feature ที่มีของ Google Places API (place Autocomplete) เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการพิมพ์ชื่อสถานที่ลงใน textbox โดย feature นี้จะมีความสามารถในการดึงข้อมูลสถานที่และชื่อที่ใกล้เคียงขึ้นมาแสดงให้ผู้ใช้เลือก(ตามที่ได้กล่าวมาแล้วข้างต้น) และได้มีการสร้าง event เพิ่มเติมเมื่อผู้ใช้เลือกรายการใดขึ้นมา ก็จะมีการเรียกใช้เมธอด getPlace() เพื่อดึงค่าข้อมูลต่างๆมาใช้งานต่อไปรวมถึงค่าละติจูดและลองจิจูดที่เราต้องการใช้ในการกำหนดพิกัดด้วย

    ตัวอย่างหน้าจอการค้นหาข้อมูลที่อยู่ เมื่อมีการพิมพ์คำค้น

    place_auto1

    ผลลัพธ์ที่ได้จากการค้นหา

    place_auto2

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

    แหล่งข้อมูลอ้างอิง :
    http://www.aspsnippets.com/Articles/Find-Co-ordinates-Latitude-and-Longitude-of-an-Address-Location-using-Google-Geocoding-API-in-ASPNet-using-C-and-VBNet.aspx
    https://developers.google.com/places/javascript/

  • การทำแผนที่ Buffer 300 เมตร สถานที่หรือบริเวณห้ามขายเครื่องดื่มแอลกอฮอล์รอบ มอ.

    ตอนนี้เป็นกระแสที่กำลังมาแรงเรื่องการจัดระเบียบสถานบันเทิงหรือสถานที่จำหน่ายเครื่องดื่มแอลกอฮอล์ที่ใกล้บริเวณสถานศึกษา วันนี้เลยจะนำเสนอการทำ buffer 300 เมตร ตามประกาศสำนักนายกรัฐมนตรี เรื่อง กำหนดสถานที่หรือบริเวณห้ามขายเครื่องดื่มแอลกอฮอล์รอบสถานศึกษา พ.ศ.2558 โดยห่างจาก มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตหาดใหญ่ เพื่อเราได้ตรวจเช็คว่า ร้านหรือสถานบันเทิงใดบ้างที่อยู่ในเขตพื้นที่ห้ามฯ*

    * ทั้งนี้เงื่อนไขต่างๆ เป็นไปตามเงื่อนไขในประกาศสำนักนายกรัฐมนตรีฯ

    โดยใช้ basemaps จากบทความที่แล้ว การติดตั้ง (OpenLayers Plugin) Google Satellite บน QGIS

    ขั้นตอน

    1. เปิดโปรแกรม QGIS > นำเข้าขอบเขต มอ. ด้วยคำสั่ง Add Vector Layer > เลือก shape file ขึ้นมา
      01
    2. จะปรากฏ Layer หรือชั้นข้อมูลขอบเขตพื้นที่ มอ. ขึ้นมา
      02
    3. นำเข้าแผนที่ Google Satellite ด้วยการคลิกที่เมนู Web > OpenLayers plugin > Google maps > Google Satellite*
      *หากไม่มีเมนูนี้ ให้ทำการติดตั้ง (OpenLayers Plugin) Google Satellite บน QGISS
      03
    4. ตอนนี้ในหน้าจอโปรแกรม QGIS ก็จะมี 2 Layers ที่เป็นแผนที่ Google และเส้นขอบเขตพื้นที่บริเวณของมหาวิทยาลัยสงขลานครินทร์ วิทยาเขตหาดใหญ่
      04
    5. คลิกเลือก Layer ที่เป็นขอบเขตพื้นที่ มอ. เพื่อที่จะทำ Buffer หรือระยะห่างจากมอ.ในรัศมี 300 เมตร > Vector > Geoprocessing Tools > Buffer(s)
      05
    6. เลือก input vector layer > กำหนดระยะห่าง(buffer distance) ใส่ 300 (หน่วยเป็นเมตร) > กำหนด output shapefile > คลิกปุ่ม OK
      06
    7. จะมี layer เพิ่มขึ้นมา โดยจะเป็นพื้นที่ buffer 300 m.
      07
    8. ปรับให้เป็นพื้นที่โปร่งแสงเพื่อให้สามารถมองเห็นแผนที่ google ด้านหลัง
      08
    9. จะได้เส้นขอบเขตพื้นที่ buffer 300 เมตรของบริเวณพื้นที่ มอ.
      จากนั้นทำการ save as เป็น .kml เพื่อไปนำเข้าที่ Google Maps ด้วยการคลิกขวาที่ Layer > Save As..
      10
    10. เลือก format เป็น KML > เลือกที่เก็บไฟล์สำหรับการ Save as > คลิก OK
      11
    11. เปิดเว็บ google.co.th/maps หรือ maps.google.co.th > คลิกที่ไอคอนหน้าช่อง ค้นหา
      12
    12. เลือก My Maps หรือ แผนที่ของฉัน
      13
    13. คลิกไอคอน สร้าง
      14
    14. จะมีเลเยอร์ใหม่เพิ่มขึ้นมา > คลิก นำเข้า > เลือกไฟล์จากคอมพิวเตอร์ของคุณ
      15
    15. เลือกไฟล์ kml ที่ได้จากข้อ 10 > Open
      16
    16. จะปรากฏ layer เส้น buffer 300 เมตร ขึ้นมาบนแผนที่
      17
    17. แก้ไข/เปลี่ยนชื่อแผนที่ และใส่คำอธิบายแผนที่ โดยการ copy ข้อความมาจากเว็บ http://www.matichon.co.th เพื่อแสดงข้อความประกาศฯ
      18
    18. ปรับแต่งพื้นที่ให้มีสีที่โปร่งแสง เพื่อให้มองภาพพื้นที่ง่ายขึ้น
      19
    19. แผนที่จะแสดงขอบเขตห้ามฯชัดเจน โดยในแผนที่จะมีสถานที่/ร้านอาหาร/สถานบันเทิง ที่ในเขตห้ามฯ และนอกเขตห้ามฯ
      20
    20. เพิ่ม layer ขอบเขตพื้นที่ มอ. เข้ามาเพื่อแสดงให้เห็นพื้นที่มอ. และพื้นที่ห้ามฯ
      21
    21. เมื่อปรับแต่งแผนที่เสร็จเรียบร้อยแล้ว ก็ทำการ share แผนที่เป็นแบบ Public (แบบสาธารณะ ทุกคนสามารถเห็น ค้นหา และเข้าถึงแผนที่นี้ได้) > คลิก บันทึก
      22
    22. ลองเปิดแผนที่ดูนะคับ ^^

    ***เพื่อความถูกต้องที่สุดของข้อมูล จะต้องทำ buffer สถานศึกษาทั้งหมด เพื่อดูพื้นที่คาบเกี่ยวหรือซ้อนทับกันของ buffer คับ

    หวังว่าจะเป็นประโยชน์และสามารถนำไปประยุกต์ใช้ในการวิเคราะห์หรือแสดงข้อมูลต่างๆ ได้ดียิ่งขึ้นบน Google Maps นะคับ

    ที่มาข้อความข่าว : http://www.matichon.co.th/news_detail.php?newsid=1437545597
    ที่มา shapefile ขอบเขตพื้นที่มอ. : สถานวิจัยสารสนเทศภูมิศาสตร์ทรัพยากรธรรมชาติและสิ่งแวดล้อม คณะการจัดการสิ่งแวดล้อม มหาวิทยาลัยสงขลานครินทร์

  • การติดตั้ง (OpenLayers Plugin) Google Satellite บน QGIS

    Google Maps เริ่มมีบทบาทและได้รับความนิยมในการนำไปใช้ในการแปลภาพถ่ายในด้านทรัพยากรธรรมชาติและสิ่งแวดล้อม หรือรวมไปถึงเรื่องการใช้ประโยชน์ที่ดิน เพื่อนำไปจัดทำฐานข้อมูลภูมิสารสนเทศ หรือ GIS มากยิ่งขึ้น ด้วยความที่เป็นปัจจุบันหรือ update ค่อนข้างที่จะเป็นปัจจุบันหรือใกล้เคียงปัจจุบัน อีกทั้งผู้ใช้สามารถเข้าถึงได้ง่าย ใช้งานง่าย นักภูมิสารสนเทศ หรือนัก GIS หรือคนที่ทำงานด้าน GIS จึงมักจะเลือกที่จะนำมาใช้ในการแปลภาพถ่าย หรือเรียกว่า การสำรวจระยะไกล (Remote Sensing : RS)

    วันนี้เลยอยากจะนำเสนอ plugin ตัวนึงที่น่าสนใจ นั่นคือ OpenLayers plugin for QGIS 2.8 เพื่อใช้ในการนำเข้า Google Satellite เป็น BaseMaps (แผนที่ฐาน) ในการแปลภาพถ่าย

     

    *** ส่วนใครที่ใช้ ArcGIS ก็ลองแวะเข้าไปอ่านวิธีการ การติดตั้งและใช้งาน ArcGoogle for ArcGIS เพื่อใช้ Google Satellite เป็นแผนที่ฐาน ได้นะคัับ ^^

     

    ขั้นตอน

    1. เปิดโปรแกรม QGIS 2.8 หรือทำการติดตั้งโปรแกรม QGIS 2.8
    2. เมนู Plugin > Manage and Install Plugins…
      02
    3. เลือก OpenLayersPlugin > คลิก Install plugin
      03
    4. หลังจากติดตั้งเสร็จแล้วจะเห็นว่าหน้า OpenLayers Plugin มีไอคอนสีฟ้าและเครื่องหมายกากบาท
      04
    5. เปิดการใช้งานโดยคลิกที่เมนู web Openlayers plugin > Google Maps > จะมีให้ชนิดของแผนที่ให้เลือก คลิกเลือก Google Satellite
      05
    6. จะมี Layer Google Satellite เพิ่มขึ้นมาตรงด้านซ้ายล่างของหน้าจอ ซึ่งในพื้นที่งานจะยังไม่เห็นแผนที่ จะต้องทำการ add layer (ชั้นข้อมูล) ขึ้นมา ในตัวอย่างจะ add vector layer แผนที่ประเทศไทยขึ้นมา
      06
    7. จะมี layer เพิ่มขึ้นมาด้านซ้ายล่างของหน้าจอ ซึ่งจะซ้อนทับอยู่กับ Google Satellite Layer
      07
    8. ทำการปรับค่าให้แผนที่ประเทศไทยโปร่งแสง เพื่อจะได้มองเห็น Layer ที่เป็น google maps
      08
    9. จะเห็นว่า แผนที่ประเทศไทยโปร่งแสงแล้ว เห็นแต่เส้นขอบเขตการปกครอง
      09
    10. ลอง Zoom ใกล้ๆ ตรงบริเวณตึก LRC โดยแถบสถานะด้านล่างจะแสดงแผนที่มาตราส่วน (scale) เป็น 1:300 ( ความหมายคือ ถ้าเอาไม้บรรทัดวัดรูปได้ เท่าไร ความยาวจริงก็จะยาวกว่าที่วัดได้ 300 เท่า)
      10

    จะเห็นได้ว่า ภาพที่ได้จาก Google maps มีความละเอียดสูง สามารถซูมได้จนเห็นหลังคาบ้านหรือพื้นผิวถนน จึงทำให้การแปลภาพถ่ายมีความถูกต้องสูง ซึ่งจากการนำเข้า google maps เป็น basemaps นี้ ก็จะสามารถนำไปใช้ในด้านต่างๆ ได้อีกมากมาย

    ปกติแล้วนักพัฒนาเว็บ (web developer) จะนิยมใช้ Google Maps API ในการพัฒนา Map on Web ….. ลองหันมาเพิ่มศักยภาพในการแสดงแผนที่ในเชิงวิเคราะห์และมีความซับซ้อนของข้อมูลเชิงพื้นที่ดูไม๊ครัช ^^

    สำหรับท่านใดที่นึกหน้าตา web map application ไม่ออก ลองแวะเข้าไปเยี่ยมชมได้ที่ http://slb-gis.envi.psu.ac.th

    หรือ download shape file เพื่อลองนำไปใช้ได้ที่ http://slb-gis.envi.psu.ac.th/ เมนู ฐานข้อมูล GIS

    ครัั้งหน้าจะนำเสนอการสร้างข้อมูลบน‬ QGIS เพื่อนำไปใช้ใน Google Earth และ Web Map นะคับ ^^