Recommended
More Related Content
Similar to คู่มือJavascript and Python
Similar to คู่มือJavascript and Python (20)
More from Bongkotporn Jachernram
More from Bongkotporn Jachernram (15)
คู่มือJavascript and Python
- 1. คู่มือภาษา Java Script และภาษา Python วิชา 876132 Script Programming จัดทาโดย น.ส.บงกชพร จะเชิญรัมย์ รหัสนิสิต 58170038 กลุ่ม01 เสนอ อาจารย์กฤษณะ อิ่มสวาสดิ์ ภาคการศึกษาที่2/2559 คณะภูมิสารสนเทศศาสตร์ มหาวิทยาลัยบูรพา
- 2. 1 ประวัติ Java Script ในอดีตที่ผ่านมา JavaScript อาจเป็นเพียงแค่ภาษาสคริปท์ที่เพิ่มลูกเล่นและสีสันให้กับเว็บเพจเท่านั้น แต่ในปัจจุบัน JavaScript ถือได้ว่ามีบทบาทสาคัญอย่างยิ่งในการทาาเว็บเพจและเว็บแอพพลิเ คชัน เนื่องจากอินเทอร์เน็ตได้กลายมาเป็นส่วนหนึ่งของชีวิตประจาวัน แต่เทคโนโลยีสาหรับการทาาเว็บอย่าง HTML เพียงลาพัง ไม่สามารถรอง รับความต้อง การและ ความซับซ้อน ของเ ว็บเ พ จ ไ ด้ แม้ว่าเราจะมีเทคโนโลยีการทาาเว็บฝั่งเซิร์ฟเวอร์อาทิเช่น Java, PHP, Ruby, หรือ .Net ก็ตาม แ ต่ นั่ น ไ ม่ ไ ด้ ต อ บ โ จ ท ย์ ทั้ ง ห ม ด ข อ ง ค ว า ม ต้ อ ง ก า ร ที่ เ พิ่ ม ขึ้ น เราต้องการให้เว็บเพจและเว็บแอพพลิเคชันสามารถตอบสนองผู้ใช้ได้รวดเร็วและมากยิ่ง ขึ้น ดั ง จ ะ เ ห็ น ไ ด้ จ า ก เ ท ค นิ ค ใ ห ม่ ๆ อ า ทิ เ ช่ น AJAX ห รื อ Widgets ต่ า ง ๆ ที่ทาาให้ผู้ใช้ได้รับประสบการณ์ที่ดียิ่งขึ้น ซึ่งก็ล้วนแล้วแต่สร้างขึ้นมาด้วย JavaScript ทั้งนั้น เว็บไซต์ใหญ่ ๆ อ า ทิ เ ช่ น Google, Hotmail, แ ล ะ Facebook ต่ า ง ก็ มี ก า ร น า า JavaScript มาประยุกต์ใช้ในเว็บเพจของตนเองอย่างมากมาย ลองปิดฟีเจอร์ JavaScript ในเว็บเบราว์เซอร์ดูนะครับ แ ล ะ ล อ ง เ ข้า เ ว็บ ไ ซ ต์ ต่า ง ๆที่ เ ข้า ใ ช้ง า น อ ยู่เ ป็ น ป ร ะ จ า า แ ล้ว จ ะ เ ห็ น ไ ด้เ ลยว่า บ า ง เ ว็ บ ไ ซ ต์ ไ ม่ส า ม า ร ถ ใ ช้ ง า น ไ ด้ เ ล ย ดั ง นั้ น จึ ง ก ล่า ว ไ ด้ ว่า JavaScript ได้กลายมาเป็นองค์ประกอบหลักองค์ประกอบหนึ่งของการทาาเว็บในปัจจุบันแล้ว JavaScript เป็นภาษาสคริปท์ที่รันบนเว็บเบราว์เซอร์ เพื่อเพิ่มความสามารถให้กับเว็บเพจ ทาให้เว็บเพจสามารถตอบโต้กับผู้ใช้ได้มากขึ้น ยกตัวอย่างเช่น ใช้JavaScript เพื่อสร้างเมนู เมื่อเลื่อนเมาส์ไปที่เมนูหลัก ก็จะเห็นเมนูย่อยปรากฏขึ้นมาหรือใช้ JavaScript เพื่อทา Tool Tips ให้กับฟอร์ม เพื่อใช้อธิบายการกรอกแบบฟอร์ม เป็นต้น ในการเรียนวิชา Script Programming เราจะประยุกต์ใช้กับโปรแกรม EditPlus รูปแบบการเขียนโค้ดคาสั่ง <html> คาสั่งเปิด <head> ในส่วนของการเปิด...
- 3. 2 <title>…..</title> เป็นการกาหนดหัวเรื่อง ดังรูป </head> เมื่อเปิด head แล้วก็ต้องปิด <body> ในส่วนของตัวเนื้อหาของโปรแกรม </body> เมื่อเปิด bodyแล้วก็ต้องปิด </html> และคาสั่งปิด ประวัติโปรแกรมEditPlus โปรแกรม EditPlus เป็นโปรแกรม text editor ใช้สาหรับเขียนและแก้ไข source code ในการสร้างเว็บเพจ เป็นโปรแกรมที่คล้ายกับโปรแกรม Notepad, Dreamweaver (ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสาเร็จรูปในการสร้างเว็บเพจด้วย) ที่ใช้ในการพัฒนาสคริปต์โปรแกรมต่าง ๆ ไม่ว่าจะเป็น เขียนและแก้ไข Sourcecode ในการสร้างเว็บเพจ ด้วยภาษา HTML ,PHP ,Java เป็นต้น เป็น tools ที่รันบน windows เท่านั้น ข้อดีของ Editplus - สามารถใช้กับภาษาไทยได้ และแยกคาสั่งต่างๆ ด้วยการแสดงสีที่ไม่เหมือนกัน ทาให้เราสามารถตรวจสอบได้ง่ายว่า เราพิมพ์ผิดที่คาสั่งไหน - สามารถทาตัวเองเป็น webbrowser ได้ - เมื่อเขียนเวบด้วยภาษา HTML เสร็จแล้ว สามารถดูการแสดงผลได้เลยทันที โดยใช้เมนู View > View in Browser หรือ Ctrl-B หรือ ใช้วิธีคลิ๊กปุ่มไอคอน View in Browser - เปิดไฟล์ได้ทีละหลายๆไฟล์พร้อมกัน - สามารถค้นหาและแทนที่ (Find & Replace) ข้อความเดียวกันได้ทีละหลายๆไฟล์พร้อมกัน - สามารถค้นหาข้อความที่ต้องการ ว่าปรากฏอยู่ในไฟล์ไหนบ้าง (แสดงหมายเลขบรรทัดด้วย) ในไดเรคทอรี่เดียวกัน
- 4. 3 ส่วนประกอบของโปรแกรมEditPlus หมายเลข 1 คือ ไตเติล (Title) หมายเลข 2 คือ แถบรายการ/เมนู (Menubar) หมายเลข 3 คือ แถบเครื่องมือ (Toolbar) หมายเลข 4 คือ หน้าต่าง Directory หมายเลข 5 คือ Text Area หมายเลข 6 คือ แถบเอกสาร (Document Selector) หมายเลข 7 คือ แถมสถานะ (Statusbar) 1 2 4 5 3 6 7
- 5. 4
- 6. 5 ทาการเปิดโปรแกรม EditPlus ขึ้นมาหน้าต่างของ EditPlus จะแสดงขึ้นมา ดังรูป ในตอนแรกเรายังไม่สามารถเขียนโค้ดคาสั่ง HTML เองได้ เราสามารถไปเปิดเพจใหม่โดยในนั้นจะมีการเขียนโค้ดคาสั่ง HTML ไว้ให้โดยอัตโนมัติ เราจะใช้คาสั่ง ดังรูป File > New >HTML Page
- 7. 6 จะแสดงดังรูป โดยเราจะใช้คาสั่งในการเขียนสคริปต์ของ Java Script จะเริ่มต้น ดังรูป (การเขียนโค้ดคาสั่งนั้นเราจะเขียนภายใต้ตัวของ <head> … </head> หลังคาสั่ง <title>…</title> ) ขั้นตอนต่อไปคือการเขียนเครื่องหมาย <!-- และ //-->เขียนภายใต้ <script> เพื่อรองรับ browser รุ่นเก่าที่ไม่รองรับ Java Script ดังรูป
- 8. 7 เราก็เริ่มเขียนโค้ด ดังรูป โดยที่ document เป็น Object พื้นฐานที่ใช้กันมากของ Java Script ส่วน write เป็น Method ของ Object document เราจะต้องใช้เครื่องหมาย . (จุด) คั่นระหว่าง objectกับ Method Object.Method ตัวอย่าง Object Method document write window lastModified bgColor fgColor alert confirm prompt
- 9. 8 ขั้นตอนต่อไปคือการเขียนข้อความใน (“ ”) เพื่อให้คาที่เราเขียนนั้นไปปรากฏที่หน้าเว็บ และลงท้ายด้วยสัญลักษณ์ ; ดังรูป หลังจากนั้นเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ >save การ save เราจะใช้นามสกุล .html
- 10. 9 ให้เราเข้าไปที่แฟ้มงาน คลิ๊กขวาที่งาน > Open with >Google Chrome จะแสดงผลดังรูป
- 11. 10 เมื่อเราเขียนเว็บถ้าเรามีการแก้ไขภายในเว็บเราสามารถใช้คาสั่ง lastModified ที่เป็นหนึ่งใน Method ทาหน้าที่เพื่อบอกให้คนที่เข้ามาอ่านเว็บของเราได้ทราบว่าข้อมูลที่มีการอัพเดตเมื่อ เดือน/วัน/ปี เวลาที่เท่าไหร่ และเราจะใช้เครื่องหมาย +(บวก) เป็นการเชื่อม Object ทั้งสอง ดังรูป หน้าเว็บไซต์จะแสดงผล ดังรูป การสร้างกล่องข้อความที่จะปรากฏขึ้นที่หน้าเว็บไซต์ โดยใน Java Script จะจาแนกกล่องข้อความได้ 3 ชนิด 1.การเตือน (alert) ใช้สาหรับการขึ้นข้อความเตือนให้ผู้ใช้ระมัดระวังหรือเป็นการบอกกล่าวให้ผู้ใช้ทราบ การเขียนโค้ดคาสั่งเราจะเขียน window.alert (“หิวข้าวแล้วนะครับ!!!”); ในส่วนของตัว <body> ดังรูป
- 12. 11 แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save ดังรูป ผลของการ save จะเป็นดังรูป
- 13. 12 ให้เราเข้าไปที่แฟ้มงาน คลิ๊กขวาที่งาน > Open with >Google Chrome หน้าเว็บไซต์จะแสดงผลดังรูป ถ้าหน้าจอเป็นลักษณะนี้ให้เราไปเขียนโค้ดเพิ่ม เพื่อเป็นการฝังตัวอักษร <meta charset = “TIS-620”> ดังรูป
- 14. 13 หน้าเว็บไซต์จะแสดงผล ดังรูป 2.การยืนยัน (Confirm) เพื่อให้ผู้ใช้งานยืนยันในกรณีที่ผู้ใช้อาจเผอเรอคลิ๊กปุ่มโดยไม่ได้ตั้งใจ การเขียนโค้ดคาสั่ง window.confirm(“คุณหิวข้าวแล้วหรือยัง”); ในส่วนของตัว <body> ดังรูป แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save และให้เราเข้าไปที่แฟ้มงาน คลิ๊กขวาที่งาน >Open with >Google Chrome หน้าเว็บไซต์จะแสดงผล ดังรูป
- 15. 14 3.การสร้าง Text boxPrompt เพื่อให้ผู้ใช้ป้อนข้อมูลก่อนเข้าไปยังระบบหรือเข้าสู่หน้าเว็บไซต์ การเขียนโค้ดคาสั่ง window.prompt (“คุณต้องการกินอะไร??”)ในส่วนของตัว <body> ดังรูป แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save และให้เราเข้าไปที่แฟ้มงาน คลิ๊กขวาที่งาน >Open with >Google Chrome หน้าเว็บไซต์จะแสดงผล ดังรูป
- 16. 15 ฟังก์ชัน (Function) ทาหน้าที่เป็นโปรแกรมย่อย ๆ ที่เราสามารถสร้างขึ้นมาเองได้ นิยมใช้กับคาสั่งที่เราต้องเขียนคาสั่งนั้นซ้า ๆเป็นการประหยัดเนื้อที่และประหยัดเวลา ตัวอย่างเช่น function test() ดังรูป ในตัวอย่างเราสร้าง function test() เพื่อทาหน้าที่ควบคุมคาสั่ง prompt เวลาหน้าจอจะแสดงผล ดังรูป แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save และให้เราเข้าไปที่แฟ้มงาน คลิ๊กขวาที่งาน >Open with >Google Chrome หน้าเว็บไซต์จะแสดงผล ดังรูป
- 17. 16 การเขียนform form ทาหน้าที่ในการส่งค่าโดยจะรับค่า Text และ Button ให้เราเปิดหน้าต่างใหม่ขึ้นมาและให้เราเขียนโค้ดคาสั่ง โดยเราจะมีหัวข้อว่า “Test Java AGE” ดังรูป ให้เรากาหนดค่าของ formในส่วนของตัว <body> ดังรูป
- 18. 17 บรรทัดต่อมาถัดจาก form เราจะใส่input type ทาหน้าที่ในการส่งข้อมูล ดังรูป เขียนโค้ดคาสั่ง button จะใช้กับคาสั่ง onclick เพื่อรองรับการกดปุ่มจากผู้ใช้ ดังรูป
- 19. 18 แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save หน้าจอจะแสดงผลดังรูป และให้เราเข้าไปที่แฟ้มงาน คลิ๊กขวาที่งาน >Open with >Google Chrome หน้าเว็บไซต์จะแสดงผล ดังรูป บริเวณปุ่มกดจะไม่มีชื่อ เราสามารถใส่ชื่อได้โดยเพิ่มคาว่า Send data ภายในโค้ดคาสั่ง button ดังรูป
- 20. 19 หน้าเว็บไซต์จะแสดงผล ดังรูป การสร้างฟังก์ชั่น function demo () เพื่อที่เราจะกาหนดเงื่อนไข if else สามารถทาได้โดยจะเขียนโค้ดคาสั่งภายใน <script> ดังรูป ให้เรากาหนดเงื่อนไข if ที่เกี่ยวกับอายุ ดังรูป
- 21. 20 ถ้าอายุมากกว่า 50 ให้แสดงว่า “You are Old!!!” และถ้าอายุน้อยกว่า 50 ให้แสดงว่า “You are young(*_*)” โดยจะใช้คาสั่ง alert ทาหน้าที่แสดงข้อความเตือนในหน้าจอแสดงผล ดังรูป และในส่วนของโค้ดคาสั่ง button ให้เพิ่มdemo() หลัง onclick ดังรูป หน้าเว็บไซต์จะแสดงผล ดังรูป ถ้าเรากรอกลงไปในช่องว่า 45 (ซึ่งมีค่าน้อยกว่า 50) หน้าจอจะแสดงว่า “You are young(*_*)”
- 22. 21 ถ้าเรากรอกลงไปในช่องว่า 55(ซึ่งมีค่ามากกว่า 50) หน้าเว็บไซต์จะแสดงว่า “You are Old!!!” แต่การตั้งเงื่อนไขแบบนี้ จะมีช่องโหว่ดังรูป เรายังไม่ได้กรอกตัวเลข แต่เราเมื่อไปกดที่ Senddata หน้าจอจะแสดงว่า “You are young(*_*)” เราจึงจาเป็นต้องเพิ่มเงื่อนไขอีกหนึ่งเงื่อนไขคือ การเพิ่ม else if ดังรูป
- 23. 22 และให้เรากาหนดด้วยว่าถ้าเราไปเผอเรอไปกดที่ Senddata หน้าจอจะแสดงผลว่า “Please insert You age” ดังรูป หน้าเว็บไซต์จะแสดงผล ดังรูป
- 24. 23 การกาหนดตัวแปร (Variable) ตั้งขึ้นเพื่อสาหรับการเก็บค่าใด ๆ ที่ไม่คงที่ ใน Java Script จะขึ้นต้นด้วยคาว่า Var เป็นการประกาศตัวแปร ดังรูป เราใช้คาสั่ง prompt เพื่อที่เราจะได้กรอกคะแนน และให้เรากาหนดเงื่อนไข if , else if โดยจะใช้คาสั่ง alert ทาหน้าที่แสดงข้อความเตือนในหน้าจอแสดงผล ดังรูป แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save
- 25. 24 และให้เราเข้าไปที่แฟ้มงาน คลิ๊กขวาที่งาน > Open with >Google Chrome หน้าเว็บไซต์จะแสดงผล ดังรูป ถ้าเรากรอกค่าคะแนนมากกว่า 80 หน้าเว็บไซต์จะแสดงผล “You have Grade A” ดังรูป
- 26. 25 โปรแกรม Google Maps JavaScript API ในการเรียนเราจะประยุกต์โปรแกรม EditPlus กับ Google Maps Google Maps API ซึ่ง API ย่อมาจาก (Application Programming Interface) การสร้าง Key สาหรับ Google Maps API สามารถทาได้ดังนี้ คลิ๊กที่ Geta Key เลือก Yes Key ของเราจะขึ้นมาให้เราบันทึกไว้
- 27. 26 ขั้นต่อไปให้เราไปที่ Simple > Simple Map ดังรูป โปรแกรมจะขึ้นโค้ด ให้เรา copy และนาไปวางในโปรแกรม EditPlus ดังรูป
- 28. 27 ให้เราเลื่อนลงไปบรรทัดที่ 32 และคลุมดาเพื่อที่เราจะนา Key ของเรามาวาง สามารถทาได้ดังรูป แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save
- 29. 28 หน้าเว็บไซต์จะแสดงผลเป็นแผนที่ของประเทศออสเตรเลีย ดังรูป ให้เราไปตรงคาว่าแผนที่ > เลือกภูมิประเทศ หน้าเว็บไซต์จะแสดงผลดังรูป
- 30. 29 โค้ดคาสั่งในรูปบริเวณที่คลุมดา แสดงถึงค่าละติจูด ลองจิจูดของประเทศออสเตรเลีย โดยที่ค่าละติจูดจะมีค่าเป็นลบ เพราะเป็นประเทศที่อยู่ใต้เส้นศูนย์สูตร ในรูปคือโรงละครที่มีชื่อเสียงของประเทศออสเตรเลีย ถ้าเราจะเปลี่ยนเป็นของประเทศไทยสามารถทาได้ดังรูป
- 31. 30 หน้าเว็บไซต์จะแสดงผลดังรูป ถ้าเราอยากจะได้ค่าพิกัดในบริเวณที่เราต้องการ สามารถเข้าโปรแกรม Google Earth ได้ดังรูป ในรูปจะแสดงค่าพิกัดบริเวณตึกมนุษฯ ในมหาวิทยาลัยบูรพา
- 32. 31 นาค่าพิกัดมาใส่ในโปรแกรม EditPlus และใส่ค่าการ Zoom แผนที่ ดังรูป หน้าเว็บไซต์จะแสดงผลดังรูป
- 33. 32 เราสามารถเปลี่ยนเลขการ Zoom ดังรูป เพื่อให้แสดงแผนที่ได้ใกล้และชัดเจนยิ่งขึ้น หน้าเว็บไซต์จะแสดงผลดังรูป
- 34. 33 ในรูปจะแสดงถึง การแสดงตัวอักษรบนหน้าเว็บไซต์ ถ้าเป็นภาษาไทยจะใช้ว่า tis- 620 การปรับแก้ขนาดของแผนที่ ให้เราสังเกตที่ #map การแสดงผล 100% คือ Full Frame #map { height: 100%; การแสดงผล 50% คือครึ่งหนึ่งของหน้าเว็บไซต์ #map { height: 50%;
- 35. 34 Drawing onthe map การใส่เครื่องหมายหรือหมุดที่เรียกว่า Marker ใน Google Map API เพื่อเอาไว้ใช้ปักหมุดให้กับสถานที่บนแผนที่ สามารถทาได้ ดังรูป ประกาศตัวแปร var marker1 = new google.maps.Marker({ }) 1 ตัวแปรสามารถใส่ได้แค่ 1 Marker เท่านั้น ภายในวงเล็บเราจะใส่ค่าพิกัด โดยมีคาสั่ง position เป็นตัวช่วยและเราจะให้ แสดงผลที่ ตึกคณะภูมิสารสนเทศศาสตร์ สามารถทาได้ดังนี้ แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save
- 37. 36 หน้าเว็บไซต์จะแสดงผลดังรูป การทา Icon Base เราสามารถทาได้โดย Icon ที่นามาใช้ต้องเป็นที่วางไว้อยู่ในเว็บไซต์ การฝากไฟล์ ใน Google sites ให้เราสังเกตที่หลังจากประกาศตัวแปร var iconBase จะมีช่องให้เราใส่เว็บที่เราไปฝากไฟล์ ดังรูป
- 38. 37 https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png จะแสดงผล ดังรูป ถ้าเราจะใส่icon เพิ่มสามารถทาได้ดังนี้ เกิดจากคาสั่ง var features =[{position: {lat:13.288134, lng:100.912272},type: 'info'}, {position: {lat:13.276648,lng :100.924912},type: 'parking'}, {position: {lat:13.279320, lng:100.924994},type: 'library'}]; เราจะใช้addMarker(feature); เป็นที่เก็บและเราจะใส่ค่าพิกัดในแต่ละจุดลงไปโดยใช้คาสั่ง position หน้าเว็บไซต์จะแสดงผล ดังรูป
- 39. 38 ถ้าเราอยากจะมี icon เพิ่มที่มีรูปร่างใหม่ เราสามารถไปเปิดได้ที่ Google Earth ได้ และเราสามารถทาได้ดังรูป icon: iconBase + 'motorcycling.png' หน้าเว็บไซต์จะแสดงผลดังรูป
- 40. 39 การทา KML (Keyhole Markup Language) KML เป็นโครงสร้างภาษา XML รูปแบบหนึ่งที่ใช้สาหรับการแสดงข้อมูลเชิงพื้นที่บนโปรแกรม Google Earth หรือ Point Asia โดยที่ Google ใช้KML ในการสร้างชั้นข้อมูลต่าง ๆ การแสดงข้อมูลทั้งจุด เส้น หรือรูปหลายเหลี่ยมต่าง ๆ ล้วนสร้างมาจาก KML ทั้งสิ้น ส่วนรูปแบบที่จัดเก็บไว้จะเป็นรูปแบบที่ประหยัดพื้นที่เรียกว่า KMZ ซึ่งก็คือ Zip format ของ KML นั่นเอง การสร้าง KML สามารถทาได้โดยเปิดโปรแกรม Google Earth ดังรูป
- 43. 42 เมื่อเรา Zoom Out จะได้ผลลัพธ์ ดังรูป การบันทึกไฟล์ให้บันทึกเป็นนามสกุล .kml เพราะถ้าเราบันทึกเป็น .kmz มันจะเป็นการบีบอัดไฟล์ให้เล็กลง และให้เราทาการ copy โค้ดของเรานามาวางไว้ที่บรรทัดที่ 52ดังรูป
- 44. 43 การเปิดไฟล์รูปภาพเราจาเป็นที่จะต้องฝากไฟล์ก่อน ซึ่งการฝากไฟล์เราต้องทาบนเว็บไซต์เท่านั้น และเว็บไซต์ที่เราสามารถฝากไฟล์ได้ เช่นhttps://sites.google.com/ ซึ่งขั้นตอนในการฝากไฟล์รูปภาพสามารถทาได้ดังนี้ 1. เราต้องไปสมัคร สร้าง sites google ของเราก่อน 2.ให้เราไปที่ “สร้าง” เพื่อทาการสร้างเพจเราจะได้ฝากไฟล์รูปภาพ
- 48. 47 7.ให้เรา copy ที่อยู่ของไฟล์รูปภาพแล้วนาไปวางในโปรแกรม EditPlus การแสดงแผนที่ให้ปรากฏบนหน้าเว็บไซต์เราจะใช้โค้ดคาสั่ง var kmlLayer ส่วน URL ที่เราได้ทาการฝากไฟล์ให้เรา copy แล้วนามาวางหลัง url: ‘…’ ดังรูป
- 50. 49 8.เราลองเปลี่ยนโค้ดคาสั่งจาก trueเป็น false โดย false จะขึ้นเป็นป๊อปอัพ ชื่อของสถานที่จะขึ้นทั้ง 2 ที่ดังรูป ป้ายชื่อจะขึ้นมาโดยที่เราไม่ต้องไปคลิ๊กที่รูป
- 51. 50 9.ทาอีกครั้งกับรูปภาพที่ 2 โค้ดคาสั่งจะมีลักษณะการประกาศตัวแปรแบบอาร์เรย์ ดังรูป แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save
- 52. 51 จะได้ผลลัพธ์ ดังรูป เราจะสังเกตว่าข้าง ๆ แผนที่จะมีเครื่องมือที่เรียกว่า Check Box ควบคุม Layer 1 และ Layer 2 ถ้าเรากดที่คาว่า Layer1 จะได้ผลลัพธ์ ดังรูป
- 53. 52 เมื่อเรากดออกจะได้ผลลัพธ์ ดังรูป ถ้าเรากดที่คาว่า Layer2 จะได้ผลลัพธ์ ดังรูป
- 54. 53 การแสดงแผนที่ เราจะสังเกตได้ว่าแผนที่จะแสดงไม่เต็มหน้าของเว็บไซต์ กาหนดให้ div เป็นตัวแปรที่เก็บเพื่อแสดงค่าของตัวแผนที่ (map) และข้อมูลรายละเอียดของหน้าเว็บไซต์ (content-window) ดังรูป แสดงตัวแผนที่ แสดงข้อมูลรายละเอียดของหน้าเว็บไซต์
- 55. 54 ในการเรียกแผนที่ขึ้นมาเราจะใช้โค้ดคาสั่งดังนี้ การแสดงแผนที่ให้ปรากฏบนหน้าเว็บไซต์เราจะใช้โค้ดคาสั่ง var kmlLayer และเราจะนา URL ของไฟล์ที่เราฝากไว้บน google มาวาง ส่วนฟังก์ชั่น suppressInfoWindows เป็นคาสั่งที่เมื่อเราคลิ๊กที่รูปภาพจะแสดงผลออกมาด้านข้าง kmlLayer.addListener ใช้แสดงเมื่อคลิ๊กให้แสดงข้อความหรือตัวอักษร โดยมีฟังก์ชั่น kmlEvent ในการจัดการข้อความที่อยู่ในข้อมูล KML
- 56. 55 การสร้าง Polygon บนแผนที่ Google Map Polygon คือพื้นที่รูปปิดที่ถูกกาหนดไว้ตามพิกัด โดย Polygon นั้นจะมีจุดเด่นคือการมีจุดเริ่มต้นกับจุดสุดท้ายเป็นจุดเดียวกัน เราจะเริ่มโดยการเขียนโค้ดคาสั่ง File > New > HTML Page
- 57. 56 ขั้นตอนแรกเราจะต้องเขียนโค้ดเพื่อที่จะสร้างแผนที่ก่อน สามารถทาได้ดังรูป #map{ float :left; เพื่อให้แผนที่แสดงข้อความชิดซ้าย height : 100%;แสดงความสูง width : 100%;แสดงความกว้าง ขั้นตอนต่อมาเราจะเขียนโค้ดเพื่อสร้างหน้าเว็บไซต์
- 58. 57 html,body{ height :100%; แสดงความสูง margin :0; แสดงการสร้างกรอบ padding :0; แสดงส่วนขยาย ในส่วนของ <body> เรากาหนดให้ div เป็นตัวแปรที่เก็บเพื่อแสดงค่าของตัวแผนที่ (map) และเราก็ใส่ละติจูด (lat) ลองจิจูด (lng) โดยเราจะกาหนดให้ var triangleCoords เป็นตัวแปรที่เก็บค่าละติจูดและค่าลองจิจูด ดังรูป
- 59. 58 ให้เราเปิดเว็บไซต์ที่ชื่อว่า “HTML Color Picker” ดังรูป
- 60. 59 ให้เราเลือกสี และ copy โค้ดและนาวาง ดังรูป strokeColor :'#3610F4', แสดงการเติมสีของเส้นซึ่งเป็นสีน้าเงิน strokeOpacity :0.5, แสดงความโปร่งแสงของเส้น strokeWeight :3, แสดงการเพิ่มความหนาของเส้น fillColor :'#2DEF0F', แสดงการเติมสีของรูปซึ่งเป็นสีเขียว fillOpacity : 0.8 แสดงความโปร่งแสงของรูป }); bermuda.setMap(map); แสดงว่าให้สามเหลี่ยมเบอร์มิวดาร์แสดงบนแผนที่ }
- 61. 60 สุดท้ายให้เราใส่รหัสโค้ดของเรา แล้วเราก็ save ไปที่ File > save as > เปลี่ยนชื่อ.html > save เว็บไซต์จะแสดงดังรูป การสร้างเครื่องมือวาด (Drawing)
- 62. 61 การเขียนโค้ดคาสั่งเพื่อแสดงเครื่องมือวาดเราจะใช้คาสั่ง var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map); คาสั่งนี้จะเป็นคาสั่งที่ดึง Library ของ Google Map API ซึ่งจะรวบรวมเครื่องมือสาหรับการวาดรูปทุกรูปแบบ ดังรูป การทาให้แผนที่ปรากฏบนหน้าเว็บไซต์ จะใช้โค้ดคาสั่ง function initMap() { var map= new google.maps.Map(document.getElementById('map'), { center: {lat: 13.277605, lng: 100.926524}, zoom: 15 }); ดังรูป การสร้างเครื่องมือวาดเราจะใช้โค้ดคาสั่ง var drawingManager =new google.maps.drawing.DrawingManager({
- 63. 62 drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ['marker','circle', 'polygon', 'polyline', 'rectangle'] }, เครื่องมือวาดเราสามารถสังเกตได้ที่ drawingModes : จะมีโค้ดคาสั่งที่แสดง 'marker','circle', 'polygon', 'polyline', 'rectangle' ดังรูป การใช้เครื่องมือวาด ถ้าเราแสดงหน้าเว็บไซต์แล้วเครื่องมือวาดไม่ขึ้น ให้เราไปที่โค้ดของเราไปเพิ่มก่อนหน้า &callback &libraries=drawing คาสั่งนี้จะทาให้หน้าเว็บไซต์ปรากฏเครื่องวาด ดังรูป
- 64. 63 การปักหมุดและการวาดวงกลม เราเข้าไปที่โปรแกรม Google Earth เพื่อที่จะเลือกหมุดที่เราต้องการและ copy ลิ้งค์นาเอาไปวางที่โปรแกรม EditPlus ดังรูป
- 65. 64 นาไปวางหลังตัวแปร markerOptiona :{icon: ‘http://maps.google.com/mapfiles/kml/shapes/campground.png’} ดังรูป ส่วนโค้ดคาสั่งในการวาดวงกลมคือ circleOptions:{} เราสามารถเปลี่ยนการโปร่งแสงของวงกลมได้โดยไปที่คาสั่ง fillOpacity: เปลี่ยนจาก 1 เป็น 0.5 ดังรูป
- 67. 66 polygonOptiona : { fillColor:'#383FFA', fillOpacity: 0.5, strokeWeight: 5 } หน้าเว็บไซต์จะแสดงภาพดังรูป การวาดเส้น ส่วนโค้ดคาสั่งในการวาดเส้นคือ
- 68. 67 polylineOptiona : { strokeColor: '#20F764', strokeWeight: 5 } หน้าเว็บไซต์จะแสดงภาพดังรูป
- 69. 68 ภาษาPython ภาษาไพทอน (Pythonprogramming language) เป็นภาษาโปรแกรมระดับสูง เพื่อใช้งานทั่วไป แบบอินเทอร์พรีเตอร์ ที่สร้างโดย กีโด ฟาน รอสซัม (Guido van Rossum) ในพ.ศ. 2533 ปัจจุบันดูแลโดย มูลนิธิซอฟต์แวร์ไพทอน จุดเด่นของภาษาไพทอน ความเป็นภาษาสคริปต์ : เนื่องจากไพทอนเป็นภาษาสคริปต์ ทาให้ใช้เวลาในการเขียนและคอมไพล์ไม่มาก ทาให้เหมาะกับงานด้านการดูแลระบบ (System administration) เป็นอย่างยิ่ง ได้มีการสนับสนุนภาษาไพทอนโดยเป็นส่วนหนึ่งของระบบปฏิบัติการยูนิกซ์, ลินุกซ์ และสามารถติดตั้งให้ทางานเป็นภาษาสคริปต์ของวินโดวส์ ผ่านระบบ en:Windows Script Host ได้อีกด้วย ไวยากรณ์ที่อ่านง่าย : ไวยากรณ์ของไพทอนได้กาจัดการใช้สัญลักษณ์ที่ใช้ในการแบ่งบล็อกของโปรแกรม และใช้การย่อหน้าแทน ทาให้สามารถอ่านโปรแกรมที่เขียนได้ง่าย นอกจากนั้นยังมีการสนับสนุนการเขียน docstring ซึ่งเป็นข้อความสั้นๆ ที่ใช้อธิบายการทางานของฟังก์ชัน, คลาส, และโมดูลอีกด้วย ความเป็นภาษากาว : ไพทอนเป็นภาษากาว (Glue Language) ได้อย่างดีเนื่องจากสามารถเรียกใช้ภาษาโปรแกรมอื่นๆ ได้หลายภาษา ทาให้เหมาะที่จะใช้เขียนเพื่อประสานงานโปรแกรมที่เขียนในภาษาต่างกันได้
- 70. 69 จุดด้อยของภาษาไพทอน ความเร็ว: ไพทอนเป็นภาษาสคริปต์ (Scripting language) ซึ่งทางานโดยมีตัวแปลภาษา (Interpreter) แปลงคาสั่งในแต่ละบรรทัดของโปรแกรมต้นฉบับ (Sourcecode) ให้เป็นภาษาเครื่อง (Machine code) ในขณะที่โปรแกรมกาลังทางาน ซึ่งแตกต่างจากภาษาซี C++ โคบอล หรือปาสคาล เพราะภาษาเหล่านี้จะทาการแปลรหัสต้นฉบับให้กลายเป็นภาษาเครื่องทั้งหมดก่อนเริ่มต้นทางาน ส่งผลให้โปรแกรมขนาดใหญ่ที่เขียนขึ้นด้วยภาษาไพทอนจะทางานได้ช้ากว่าโปรแกรมที่ใช้เทคนิค การคอมไพล์แฟ้มต้นฉบับทั้งหมดก่อน โอกาสเกิดข้อผิดพลาดชนิด Runtime Error สูงขึ้น: จุดด้อยในข้อนี้มีผลกระทบมาจากการแปลภาษาแบบ Interpreter และการไม่ได้แปลรหัสต้นฉบับทั้งหมดก่อนทางานนั่นเอง ในการประกาศตัวแปรของภาษาสคริปต์ จะไม่มีการตรวจสอบความถูกต้องของการเรียกใช้ตัวแปร และชนิดของตัวแปรทั้งหมดก่อนเริ่มทางาน ดังนั้นถ้าผู้พัฒนาโปรแกรมขาดความระมัดระวัง (Logic error) ในระหว่างพัฒนาโปรแกรม จะทาให้มีโอกาสเกิดความผิดพลาดจากการเรียกใช้ตัวแปรที่ไม่ได้ประกาศไว้ หรือใช้งานตัวแปรผิดประเภทได้ง่าย การระบุขอบเขตของคาสั่งและตัวแปรไพทอนไม่ใช้ {…} เป็นสัญลักษณ์สาหรับกาหนดขอบเขตของคาสั่งหรือตัวแปรในการเขียนโปรแกรม เหมือนกับภาษาระดับสูง เช่นC/C++ และ Java แต่ใช้การย่อหน้าเพื่อบอกขอบเขตของคาสั่งและตัวแปรแทน ส่งผลให้ยากต่อการพัฒนาโปรแกรมที่มีขนาดใหญ่ และโปรแกรมต้นฉบับมีความซับซ้อนมากๆ เช่น nested loop เพราะต้องสังเกตุการย่อหน้าให้ถูกต้อง
- 71. 70 ไพทอนในแพลตฟอร์มต่าง ๆ ผู้เขียนโปรแกรมภาษาไพทอนสามารถเลือกใช้แพลตฟอร์มได้ดังนี้ ซีไพทอน (CPython) คือแพลตฟอร์มภาษาไพทอนดั้งเดิม โปรแกรมอินเทอร์พรีเตอร์ถูกเขียนโดยภาษาซี ซึ่งคอมไพล์ใช้ได้บนหลายระบบปฏิบัติการ เช่น วินโดวส์, ยูนิกซ์, ลินุกซ์ การใช้งานสามารถทาได้โดยการติดตั้งโปรแกรมอินเทอร์พรีเตอร์และแพ็คเกจที่จาเป็นต่าง ๆ ไจทอน (Jython) เป็นแพลตฟอร์มภาษาไพทอนที่ถูกพัฒนาบนแพลตฟอร์มจาวา เพื่อเพิ่มอานวยความสะดวกในการใช้ความสามารถภาษาสคริปต์ของไพทอนลงในซอฟต์แวร์จ าวาอื่น ๆ การใช้งานสามารถทาได้โดยการติดตั้งจาวาและเรียกไลบรารีของไจทอนซึ่งมาในรูปไบนารีเพื่ อใช้งาน ไพทอนดอตเน็ต (Python.NET) เป็นการพัฒนาภาษาไพทอนให้สามารถทางานบนดอตเน็ตเฟรมเวิร์กของไมโครซอฟท์ได้ โดยโปรแกรมที่ถูกเขียนจะถูกแปลงเป็น CLR ปัจจุบันมีโครงการที่นาภาษาไพทอนมาใช้บน .NET Framework ของไมโครซอฟท์แล้วคือโครงการ IronPython ไลบรารีในไพทอน การเขียนโปรแกรมในภาษาไพทอนโดยใช้ไลบรารีต่าง ๆ เป็นการลดภาระของโปรแกรมเมอร์ได้เป็นอย่างดี ทาให้โปรแกรมเมอร์ไม่ต้องเสียเวลากับการเขียนคาสั่งที่ซ้าๆ เช่นการแสดงผลข้อมูลออกสู่หน้าจอ หรือการรับค่าต่าง ๆ ไพทอนมีชุดไลบรารีมาตรฐานมาให้ตั้งแต่ติดตั้งอินเตอร์พรีเตอร์ นอกจากนั้นยังมีผู้พัฒนาจากทั่วโลกดาเนินการพัฒนาไลบรารีซึ่งช่วยอานวยความสะดวกในด้านต่าง ๆ โดยจะเผยแพร่ในรูปแบบของแพ็คเกจต่าง ๆ ซึ่งสามารถติดตั้งเพิ่มเติมได้อีกด้วย
- 72. 71 ตารางแสดงรายชื่อโมดูลมาตรฐานของ Python กลุ่ม ชื่อโมดูลมาตรฐานของภาษา Python ประเภทการใช้งาน ตัวเลข (Number) datetime วันที่ decimal ตัวเลขแบบปัดเศษ การคานวณ (Math) math การคานวณทางคณิตศาสตร์ cmath การคานวณจานวนเชิงซ้อน อาร์กิวเมนต์ sys การผ่านค่าอาร์กิวเมนต์ของแต่ละโมดูล เวลา (Time) time กลุ่มคาสั่งเกี่ยวกับวันเวลา การสุ่มค่า random กลุ่มคาสั่งสุ่มค่าตัวเลข Local Path/Directory os กลุ่มคาสั่งเกี่ยวกับ Path และ Directory ของระบบปฎิบัติการ ข้อมูลรูปแบบ XML xml กลุ่มคาสั่งจัดการดูแลข้อมูลรูปแบบ xml E-mail smtplib , mimetypes , e-mail , maplib กลุ่มคาสั่งสาหรับดูแลจัดการอีเมล เครือข่ายการสื่อสาร socket , socketserver กลุ่มคาสั่งดูแลจัดการโปรโตคอลและการสื่อสาร
- 73. 72 ตัวอย่างการเขียนคาสั่งอย่างง่าย แสดงการเก็บค่าข้อมูล โดยเราให้ a เก็บค่า 10 มีรูปแบบเป็น int , b เก็บค่า 5.44 มีรูปแบบเป็น float , c เก็บค่าชื่อ ‘Bongkotporn’ มีรูปแบบเป็น str (string) การบวกเลขสามารถทาได้โดยพิมคาสั่ง sum คือผลรวม ดังรูป แล้วเราจะได้ผลลัพธ์เท่ากับ 15.440000000000001
- 74. 73 การคิดค่าไพ เราจะเขียนโค้ดคาสั่งโดยเอาคาว่า import นาหน้า และ mathบอกถึงการแสดงค่าไพที่เป็นตัวเลข จะได้ผลลัพธ์ ดังรูป เราสามารถกาหนดค่าตัวแปรเป็นข้อความยาว ๆ ได้ โดยเราจะกาหนด a = 14 b = 10000 c = วันศุกร์ %dเก็บค่า 14 %dเก็บค่า 100000 %s เก็บค่า วันศุกร์
- 75. 74 สามารถเขียนคาสั่งได้ ดังรูป การทางานบนแรม .format ไม่ต้องใส่พวกเปอร์เซน การเขียนโค้ดคาสั่งใน Python เริ่มต้นการเขียน เราจะกาหนดให้ผู้ใช้ใส่อายุของตนเอง ขั้นต่อมาเราจะกาหนดว่าถ้าผู้ใช้กรอกอายุมากกว่าหรือเท่ากับ 50ให้โปรแกรมแสดงผลว่า “คุณแก่จัง” ถ้าผู้ใช้กรอกอายุว่ายังไม่ถึง 50 ให้โปรแกรมแสดงผลว่า “คุณอ่อนจัง” ดังรูป เมื่อ save แล้วให้เราไปที่ Run >ok
- 76. 75
- 77. 76 ผลลัพธ์จะแสดงดังรูป ผู้ใช้กรอกอายุ 51โปรแกรมแสดงผลว่า “คุณแก่จัง” ถ้าผู้ใช้กรอกอายุ 50 ให้โปรแกรมแสดงผลว่า “คุณอ่อนจัง” ดังรูป โมดูลเพิ่มเติมใน Python ประกอบด้วย 2 คาสั่งดังนี้ 1. คาสั่ง import 2. คาสั่ง from คาสั่ง import import datetime import decimal import os คาสั่ง import จะเป็นการอ้างอิงโมดูลที่เราต้องการใช้กลุ่มคาสั่งข้างในโมดูล การอ้างอิงแบบนี้ Python จะมองเห็นกลุ่มคาสั่งทั้งหมดในโมดูล และพร้อมใช้งานได้ตลอดเวลา แต่บางครั้งหากเราต้องการอ้างอิงโมดูล และอยากจะเลือกใช้เฉพาะคาสั่ง หรือกลุ่มคาสั่งภายในบางคาสั่ง ก็ต้องใช้คาสั่ง from
- 78. 77 คาสั่ง from - รูปแบบการเขียนคาสั่ง from สาหรับเรียกใช้ทุกคาสั่งในโมดูลที่กาลังอ้างอิงในปัจจุบัน from ชื่อโมดูล import คาสั่งหรือกลุ่มคาสั่ง เช่น from os import * (สัญลักษณ์ * ใช้สาหรับเรียกใช้งานทุกคาสั่งหรือกลุ่มคาสั่งในโมดูลนี้) - รูปแบบการเขียนคาสั่ง from สาหรับเรียกใช้บางคาสั่งในโมดูลที่กาลังอ้างอิงในปัจจุบัน from ชื่อโมดูล import กลุ่มคาสั่งที่1, กลุ่มคาสั่งที่ 2 เช่น from os import error,chdir, getcwd การใช้ภาษาไพธอนในโปรแกรม ArcMap 10.1 แสดงหน้าต่างไพธอนในโปรแกรม ArcMap 10.1
- 79. 78 เริ่มต้นเขียนภาษาไพธอนเราจะใช้ import arcpy ดังรูป Importarcpy เพื่อให้โปรแกรมนาเข้าเครื่องมือต่าง ๆ ที่อยู่ใน ArcMap ส่วนนี้จึงเป็นส่วนที่สาคัญถ้าลืมประกาศหรือเรียกใช้ จะไม่สามารถทาได้ การวิเคราะห์ข้อมูลแนวกันชน (Buffer) วิธีแรกคือ import arcpy เป็นคาสั่งที่จะเริ่มเขียนคาสั่ง arcpy.Buffer_analysis คือคาสั่งที่เรียกภาพที่ได้ผ่านการทาแนวกันชนที่มีความห่าง 300 เมตรเรียบร้อยแล้ว และให้แสดงเป็นด้านนอกอย่างเดียว โดยใช้คาสั่ง OUTSIDE_NOLY
- 80. 79 ผลลัพธ์จะแสดงดังรูป วิธีที่ 2คือ import arcpy เป็นคาสั่งที่จะเริ่มเขียนคาสั่ง MultipleRingBuffer_analysis คือคาสั่งที่เรียกภาพที่ได้ผ่านการทาแนวกันชนหลายชั้นที่มีความห่าง 300 , 500 , 1000, 1500 เมตรเรียบร้อยแล้ว และแสดงออกมาทั้งหมดโดยใช้คาสั่ง ALL , OUTSIDE_NOLY ผลลัพธ์จะแสดงดังรูป
- 81. 80 การสร้างชั้นข้อมูลด้วยภาษา Python การสร้างชั้นข้อมูลเป็นกระบวนการที่นาเข้าข้อมูลทาง GIS สามารถทาได้ทั้งที่เป็นข้อมูลจุด เส้น และพื้นที่ ทาได้โดยคาสั่ง import arcpy เป็นคาสั่งที่จะเริ่มเขียนคาสั่ง arcpy.MakeFeatureLayer_management เป็นคาสั่งการนาเข้าข้อมูล ("D:/script_GI/01_58/Data_world/world.shp","world_boundaries") เลือกที่เก็บและตั้งชื่อใหม่ ผลลัพธ์จะแสดงดังรูป world_boundaries จะปรากฏบนหน้า TOC
- 82. 81 เมื่อสร้างชั้นข้อมูลเรียบร้อยแล้ว ถ้าเราต้องจะใส่สีให้กับชั้นข้อมูลสามารถใช้คาสั่ง arcpy.ApplySymbologyFromLayer_management ("world_boundaries","D:/script_GI/01_58/Data_world/world1.lyr") เลือกที่เก็บและตั้งชื่อใหม่ และไฟล์ชื่อแบบสี (lyr = Layer) ผลลัพธ์จะแสดงดังรูป การนาเข้าข้อมูลจากไฟล์ Excel โดยเขียนเป็นภาษา Python
- 83. 82 โดยเราจะใช้ข้อมูลจุดความร้อน ที่เว็บ http://asmc.asean.org/asmc- hotspot#Hotspot เมื่อรู้ค่า Longitude และค่า Latitude แล้วเราก็นาไปวางที่โปรแกรม Microsoft Excel ดังรูป แต่พอเรานามาวางในตาราง มันจะปรากฏเพียงคอลัมเดียว ให้เราไปที่ Text toColumns ดังรูป
- 84. 83 ให้เราลบคอลัมแรกออก ให้เหลือแค่ค่า Long กับ Lat ดังรูป
- 85. 84 เมื่อเราลบแล้ว เราก็save ชื่อว่า Sheet1$ เราก็พิมคาสั่ง arcpy.MakeXYEventLayer_management แล้วเลือกที่เรา save เป็นนามสกุล .xls ที่มีข้อมูลค่า Longitude และค่า Latitude พร้อมตั้งชื่อใหม่ จะมี r ที่หมายถึง readและ $ที่ตามหลัง sheet ผลลัพธ์จะแสดงดังรูป
- 86. 85
- 87. 86 การประมาณค่าช่วง Interpolate การประมาณค่าช่วง คือ การประมาณหรือการวัดค่าปรากฎการณ์ต่างๆ เชิงพื้นที่เช่นความสูง ซึ่งประเภทข้อมูลที่นามาประมาณค่าช่วงคือ ข้อมูลประเภทจุด เพราะข้อมูลประเภทจุดสามารถไปได้หลายทิศทางรอบตัว ซึ่งเหมาะสมกับการประมาณค่าช่วงที่สามารถไปได้หลายทิศทางรอบจุด ซึ่งการประมาณค่าช่วงที่มีความถูกต้องมากจะต้องขึ้นอยู่กับจานวนจุดยิ่งมีจานวนจุดมากเท่าไหร่ ก็จะมีความถูกต้องมากเท่านั้น ซึ่งจะแบ่งวิธีออกเป็น IDW Kriging Natural Neighbor Spline Trend การทา IDW ในขั้นตอนแรกเราจะเก็บข้อมูลใน Excel โดยเราจะใช้ข้อมูลปริมาณน้าฝนจากเว็บhttp://service.nso.go.th/nso/web/statseries/statseries27.html ดังรูป
- 88. 87 เปิดโปรแกรม Google Earth เพื่ออ้างอิงค่าพิกัด X Y ดังรูป เมื่อได้ค่าพิกัดเรียบร้อยแล้ว ให้เขียนคาสั่งที่โปรแกรม ArcMap 10.1 เปิดหน้าต่าง Python ขึ้นมา ตั้งค่าชื่อว่า RF ผลลัพธ์จะแสดงดังรูป
- 89. 88 เขียนคาสั่งการทา IDW arcpy.IDW_ga(“ชื่อนาเข้า RF”,”ค่าที่จะนามาหาค่าช่วง Rainfall”,”ชื่อนาออก rainfall”,”ชื่อนาออกที่เป็นรูปภาพ RasterRF”,”ขนาด cell = 120”,”ค่ายกกาลัง =2”) ผลลัพธ์จะแสดงดังรูป จะแสดงการแบ่งให้เห็นอย่างชัดเจน การแปลงข้อมูลจาก Layer ให้เป็น KMZ Arcpy.LayerToKML_conversion(“ชื่อถาพที่เราได้ดิจิไตซ์ใน Google Earth ”,”ที่เก็บไฟล์งาน/ชื่อใหม่.kmz”,”ค่าระดับเซลล์ =2000”) ถ้าจะนาไปใช้ให้เราไปฝากไฟล์ใน sites google แล้วใช้ภาษา Javascript ในการสร้างหน้าเว็บ
- 90. 89 Raster ในภาษาPython ข้อมูล Raster ในวงการภูมิศาสตร์จะนิยมเรียกซึ่งข้อมูลประเภทนี้จะถูกจัดเก็บในรูปของ Pixel, cell, grid และ picture element เป็นต้น และค่า Digital Number (DN) คือค่าการสะท้อนจากวัตถุและถูกบันทึกค่าลงไปใน pixel จะมีค่าตั้งแต่ 0 – 255 โดยค่าสะท้อนต่าจะมีค่าเท่ากับ 0ส่วนค่าสะท้อนสูงจะมีค่าเท่ากับ 255 การผสมสีภาพถ่ายจากดาวเทียม (Band composite) ดาวเทียม Landsat5 TM มีทั้งหมด 7 แบนด์ การผสมสีภาพถ่ายจากดาวเทียม เราสามารถใช้คาสั่ง arcpy.MakeRasterLayer_management(“ที่เก็บและภาพที่จะนาเข้า”,”ตั้งชื่อ”) สามารถทาได้ดังรูป แบนด์ที่ 3 ผลลัพธ์จะแสดงดังรูป
- 92. 91 เมื่อผสมแบนด์ทั้งสามรวมกันโดยจะใช้คาสั่ง arcpy.CompositeBands_management(“ช่วงคลื่น1;ช่วงคลื่น2;ช่วงคลื่น 3",“ตั้งชื่อใหม่") จะได้ผลลัพธ์ดังรูป ผสมแบบ 4 5 3 พืชเป็นสีส้ม ผสมแบบ 3 5 4พืชเป็นสีฟ้า
- 93. 92 การทา NDVI ในภาษาPython NDVI (Normalized Difference Vegetation Index) การทา ndvi จะมีค่าอยู่ในระหว่าง - 1 ถึง 1 ค่า 0 หมายถึงไม่มีพืชพันธุ์ใบเขียว อาจจะเป็นดิน ค่า 0.8 , 0.9 ถึง 1หมายถึงพืชใบเขียวมีความหนาแน่นในพื้นที่มาก ค่า -1หมายถึงพื้นผิวน้าจะมีค่าการสะท้อนในช่วงคลื่นใกล้อินฟราเรดต่ากว่าช่วงคลื่นตามองเห็นสีแดงทาให้ ndvi มีค่าติดลบ สูตรการหา NDVI = 𝑁𝐼𝑅−𝑅𝐸𝐷 𝑁𝐼𝑅+𝑅𝐸𝐷 NIR = การสะท้อนในช่วงคลื่นใกล้อินฟราเรด RED = การสะท้อนในช่วงคลื่นตามองเห็นสีแดง สามารถเขียนโค้ดคาสั่งใน IDLE หน้าต่างของภาษา Python ได้ดังรูป arcpy.env.workspace = "D:/script_GI/01_58/Landsat5" เป็นการกาหนดโฟลเดอร์ปลายทาง Band 4 เก็บในตัวแปร NIR Band 3 เก็บในตัวแปร RED เอาตัวแปรทั้งสองมาหารกันดังสูตร NIR- RED / NIR +RED โดยใช้Divide และตั้งชื่อใหม่ว่า Num1_Num2
- 94. 93 เปิดโปรแกรม ArcMap 10.1 แล้วเปิดหน้าต่าง Python ให้เราไปคลิ๊กขวา > Load > NDVI.py > open ดังรูป ผลลัพธ์จะแสดงดังรูป
- 95. 94 เมื่อกด Enter ผลลัพธ์จะแสดงดังรูป ภาพ Num1 ภาพ Num2 ภาพ Num1_Num2
- 96. 95 การสร้าง Graphical User Interface (GUI) ในภาษาPython ขั้นตอนแรก คลี๊กขวาที่ My Toolbox >New > Toolbox > ตั้งชื่อใหม่เป็น 01_58.tbx ให้เราคลิ๊กขวาที่ 01_58.tbx > Add >Script
- 97. 96 เมื่อปรากฏหน้าต่าง Add Script ให้กรอก ดังรูป เมื่อกรอกครบแล้วกด Next Script File ให้เลือกไฟล์ NDVI.py >Open
- 98. 97 บรรทัดแรกให้กาหนด InputRASTER Direction ให้เลือก Input MultiValue ให้เลือก Yes เพราะเราจะนาเข้าข้อมูลหลายตัว บรรทัดแรกให้กาหนด outputNDVI Direction ให้เลือก Output MultiValue ให้เลือก No เพราะเราจะนาข้อมูลออกเพียงตัวเดียว
- 99. 98 เมื่อเปิดออกมาจะได้ดังรูป เมื่อดับเบิ้ลคลิ๊กที่เครื่องมือ NDVI ที่เราสร้าง ผลลัพธ์จะแสดงดังรูป InputRESTER นาข้อมูล แบนด์4 และแบนด์3 เข้า และตั้งชื่อ output :NDVI.TIF
- 100. 99 รอให้เครื่องประมวลผล ไปเลือก Add Data > NDVI.TIF > Add ดังรูป ผลลัพธ์จะแสดงดังรูป