นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

99
876132 สคริปต์โปรแกรม (Script Programming) จัดทาโดย นางสาว นวรัตน์ ศรชัย รหัสนิสิต 58670064 กลุ ่ม 3301 เสนอ อาจารย์ กฤษณะ อิ่มสวาสดิภาคเรียนที่ 2 ปีการศึกษา 2559 คณะภูมิสารสนเทศศาสตร์ มหาวิทยาลัยบูรพา

Upload: nawarat-sornchai

Post on 23-Jan-2018

31 views

Category:

Education


1 download

TRANSCRIPT

Page 1: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

876132 สครปตโปรแกรม

(Script Programming)

จดท าโดย

นางสาว นวรตน ศรชย รหสนสต 58670064

กลม 3301

เสนอ

อาจารย กฤษณะ อมสวาสด

ภาคเรยนท 2 ปการศกษา 2559

คณะภมสารสนเทศศาสตร

มหาวทยาลยบรพา

Page 2: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

โปรแกรม Editplus

Editplus คอโปรแกรม text editor ตวหนง คลายกบโปรแกรม Notepad, Dreamweaver (ซงมคณสมบตเปน

ทงโปรแกรมส าเรจรปในการสรางเวบเพจดวย) ทใชในการพฒนาสครปตโปรแกรมตาง ๆ ไมวาจะเปน

เขยนและแกไข Source code ในการสรางเวบเพจ ดวยภาษา HTML ,PHP ,Java เปนตน เปน tools ทรน

บน windows เทานน

ขอดของ Editplus

- สามารถใชกบภาษาไทยได

- แยกค าสงตางๆ ดวยการแสดงสทไมเหมอนกน ท าใหเราสามารถตรวจสอบไดงายวา เราพมพผดทค าสง

ไหน

- สามารถท าตวเองเปน web browser ไดดวย (IE 5.XX Compatible)

- เมอเขยนเวบดวยภาษา HTML เสรจแลว สามารถดการแสดงผลไดเลยทนท โดยใชเมน View > View in

Browser หรอ Ctrl-B หรอ ใชวธคลกปมไอคอน View in Browser

- เปดไฟลไดทละหลายๆไฟลพรอมกน

- สามารถคนหาและแทนท (Find & Replace) ขอความเดยวกนไดทละหลายๆไฟลพรอมกน

- สามารถคนหาขอความทตองการ วาปรากฏอยในไฟลไหนบาง (แสดงหมายเลขบรรทดดวย) ในไดเรคทอร

เดยวกน

Page 3: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Google map API

API ยอมาจาก Application Programming Interface คอชองทางการเชอมตอชองทางหนง ทจะ

เชอมตอกบเวบไซตผใหบรการ API จากทอน เปนตวกลางทท าใหโปรแกรมประยกตเชอมตอกบโปรแกรม

ประยกตอน หรอเชอมการท างานเขากบระบบปฏบตการตวอยาง เชน Twitter มหลายเวบทมการเชอมโยง

ขอมล กบ twitter ทงเปนการอานขอมลจาก twitter หรอ สงขอมลเขา twitter เองกตาม ซงลวนอาศยการ

เชอมตอ แลกเปลยนขอมลกนดวย API นนเอง

และอกหนงตวอยาง เชน Google Maps API คอบรการของ Google อกรปแบบหนงทเราสามารถน า

ขอมลของ Google Maps ททาง Google ใหบรการโดยสวนมากจะน ามาใชกบ เวบไซตของบรษทฯหรอ

เวบไซตหางรานตางๆ เพอเปนอกชองทางทใหลกคารวาบรษทฯ หรอหางรานนน

ประโยชนของ API

1) สามารถรบสงขอมลขาม Server ได

2) ไมจ าเปนตองเขาหนาเวบหลก กมขอมลของเวบหลก จากเวบทดง API แบงเปน

2.1) API ทขนกบภาษา (language-dependent API) คอ เอพไอ ทสามารถการเรยกใชจาก

โปรแกรมทเขยนขนดวยภาษาเพยงภาษาใดภาษาหนง

2.2) API ไมขนกบภาษา (language-independent API) คอ เอพไอ ทสามารถเรยกไดจาก

โปรแกรมหลายๆ ภาษา

API ถอเปนกลมของฟงชน ขนตอน หรอคลาส (Class ) ทระบบปฏบตการ (OS) หรอผใหบรการ

สราง ขนมาเพอรองรบการเรยกขอขอมลจากโปรแกรมอนๆ ทงน API สามารถใชงานไดกบภาษาในการ

เขยนโปรแกรม ทรองรบเทานน ซงมนจะถกจดท าใหอยในรปแบบ Syntax หรอ element ทสามารถน าไปใช

ไดอยางสะดวกสบาย เนองจากทางบรษท Google ไดเตรยม Google API ไวใหส าหรบนกพฒนาผทตองการ

Page 4: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะน าขอมลของ Google Maps ไปใชงานรวมกบโปรแกรมหรอเวบไซตของตนเองในรปแบบของการเพม

ชนของขอมล )Data Layer) โดย Google API มความสามารถทนาสนใจ ไดแก

1) Google Street Maps ซงแสดงขอมลถนนตาง ๆ อยางละเอยดผใชสามารถคนหาขอมล

ชอ ถนน และ ชอทอยตามทะเบยนบานไดดวย

2) Google Route Planner เปนความสามารถในการคนหาเสนทางการเดนทาง ดวยรถยนต

รถสาธารณะ รถจกรยาน หรอ เดนเทา

3) ขอมลต าแหนงทอยของธรกจ รานคา หรอสถานทตางๆ บนแผนท ซงสามารถคนหาได

ดวย ชอ และทอย

4) Google Maps Satellite Images เปนการน าขอมลภาพถายดาวเทยมมาแสดงบนแผนท

สามารถ น ามาซอนทบกบขอมล Google Street Maps ไดดวย แตขอมลภาพถายดาวเทยมดงกลาวมไดเปน

ขอมล ททนสมย และเปลยนแปลงตามสภาพความเปนจรงตลอดเวลา เปนภาพถายจากดาวเทยมทถาย

มาแลว เปนระยะเวลาหนงอาจเปน เดอน หรอ ป แลวแตสถานท ภาพในบางสวนของพนทไมมขอมลและ

ภาพ ถกท าใหไมชดดวยเหตผลทางความมนคง

5) Google My Maps เปนความสามารถพนฐานอกอยางหนงของ Google Maps ซงอนญาต

ใหผใช สามารถก าหนดจดต าแหนงบนแผนท เพอการใชงานสวนบคคลไดเครองมอของ Google Map

Page 5: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Python

Python คอ เปนภาษา Dynamic Object-Oriented Programming ทถกพฒนาขนโดย Guido von

Rossum ในป ค.ศ. 1990 เปนภาษาทใชในการเขยนโปรแกรมภาษาหนง ซงถกพฒนาขนมาโดยไมยดตดกบ

แพลตฟอรม กลาวคอสามารถรนภาษา Python ไดทงบนระบบ Unix, Linux , Windows NT, Windows

2000, Windows XP หรอแมแตระบบ FreeBSD อกอยางหนงภาษาตว นเปน OpenSource เหมอน

อยาง PHP ท าใหทกคนสามารถทจะน า Python มาพฒนาโปรแกรมของเราไดฟรๆโดยไมตองเสยคาใชจาย

และความเปน Open Source ท าใหมคนเขามาชวยกนพฒนาให Python มความสามารถสงขน และใชงานได

ครบคมกบทกลกษณะงาน

โคดของ Python ถกสรางขนมาจากภาษาซ การประมวลผลจะท าในแบบอนเทอรพรเตอร คอจะ

ประมวลผลไปทละบรรทดและปฏบตตามค าสงทไดรบ Python เวอรชนแรกคอ เวอรชน 0.9.0 ออกมาเมอป

2533 และเวอรชนปจจบนคอ 3.5.3 สามารถเขาไป download โปรแกรมไดท https://www.python.org/

Page 6: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Week2 Javascript

เปดโปรแกรม EditPlus3 ขนมา

เมอเปดโปรแกรมมาเรยบรอยแลวใหไปทแถบเครองมอ File >> New >> HTML Pages จะปรากฏ Code

ขนมา

Page 7: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จากนนใหพมพ Code <script language = ‚javascript‛>ในบรรทดท 10 เปนการเรมตนการเขยน Script ของ

Java Script บรรทดท11 คอจบการเขยน Java Script

พมพเครองหมาย <!— บรรทดท11 และ //--> บรรทดท 13

เครองหมาย <!-- และ //-->

เพอรองรบ browser รนเกาทไมรองรบ Java

Script ซงถาเราเขยนค าสงโดยไมม

Page 8: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

บรรทดท 12 พมพ document.write (‚สวสดชาวGIทกทาน‛)

ใหท าการ save ไปทFile >> Save As

document เปน Object สวน write

เปน Method ของ

Page 9: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เปด Folder ทตองการsave ตงชอไฟล >> Save as Type เลอกเปน HTML

เมอท าการ Save เรยบรอยแลวไปเปด Folder ทท าการ save คลกขวาทไฟล >> Open with >> Google

Chome

Page 10: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ผลลพธทได

จากนนใหพมพ +docmen.lastmodified หลง document.write

Document lastModified คอ การใช Method lastModified เพอแสดงใหผชมเวบ

ทราบวา เวบของเรานนปรบปรงครงลาสดเมอใด เราจะตองใช

เครองหมาย + ในการเชอม object ทงสอง

Page 11: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จากนนใหท าการSave เปน .HTML ท าการเปดบนGoogle Chrome

จะปรากฎผลลพธดงภาพ

ในบรรทดท 9 พมพ Window.alert(‚หวขาวจงเลย‛);

การเตอน(Alert) ใชส าหรบการขนขอความเตอนให

ผใชระมดระวง หรอบอกกลาวไปยงผใชใหทราบ

Page 12: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ Save

เปดไฟล .HTML บน Google Chrome

Page 13: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏหนาตางการแจงเตอน

พมพ window.confirm(‚คณหวขาวแลวหรอยง?‛);

การยนยน(Confirm) เพอใหผใชยนยนในกรณท

ผใชอาจเผอเรอคลกปมโดยไมไดตงใจ เชน ผใช

กดปมเพอลบขอมล หรอการออกจากโปรแกรม

Page 14: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ save >> เปดไฟล.HTML >> Open with Google

จะปรากฏหนาตางการแจงเตอนดงภาพ

พมพ window.prompt (‚คณอยากกนอะไร?‛);

การสราง Text box พรอม(Prompt)เพอใหผใช

ปอนขอมลกอนเขาไปยงระบบหรอเขาหนาเวบ

ดตวอยาง

Page 15: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ save >> เปดไฟล.HTML >> Open with Google

จะปรากฏหนาตางการแจงเตอนดงภาพ

Week 3 HTML+Javascript โครงสรางของ Javascript

เปดโปรแกรม EditPlus 3ขนมา ไปทแถบเครองมอ File >> New >> HTML Pages

Page 16: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏ Codeขนมา

พมพ Code ตามบรรทดท8 และ9

การสรางกลองใสกรอกขอมลอาย

Page 17: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ใหท าการ Save

ท าการ save >> เปดไฟล.HTML >> Open with Google

Page 18: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏกลองใหใสคาลงไป

พมพ <button name = ‚sumbit‛> เพอตงชอกลอง

ตงชอกลอง

Page 19: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

send data</button> เปนวธการสรางปม

ท าการ save >> เปดไฟล.HTML >> Open with Google

จะปรากฏผลลพธดงภาพ

Page 20: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

พมพ function demo() ในบรรทดท5

ในบรรทดท 7และ13 เปการก าหนดตวแปร โดยCode คอ การแสดงวา ถามอายมากกวา 50 จะปรากกฎ

หนาตาง You are old ถานอยกวา 50 จะปรากฏหนาตาง You are young

Page 21: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

กด F5

จะปรากฏหนาตางขนมา

Page 22: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เมอพมพ 57 แลวกด send data จะปรากฏ You are old!!!!

เมอพมพ 57 แลวกด send data จะปรากฏ You are old!!!!

Page 23: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Week 4 Javascript+google map api

เปด Google แลวท าการคนหา google map api javascript แลวเลอก Website แรก

สราง Key โดยไปท GUIDES >> GET A KEY >> CREAT A NEW PROJECT >> CREAT AND

ENABLE API จะปรากฏโคดขนมา ท าการคดลอก KEY

Page 24: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เมอได Key แลวไปท Simple map

จะปรากฏแผนทขนมา

Page 25: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ใส Code ขางลางนลงไปในโปรแกรม EditPlus 3

<!DOCTYPE html>

<html>

<head>

<title>Simple Map</title>

<meta name="viewport" content="initial-scale=1.0">

<meta charset="utf-8">

<style>

/* Always set the map height explicitly to define the size of the div

* element that contains the map. */

#map {

height: 100%;

}

/* Optional: Makes the sample page fill the window. */

html, body {

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

Page 26: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

<body>

<div id="map"></div>

<script>

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -34.397, lng: 150.644},

zoom: 8

});

}

</script>

<script src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

(ลบ YOUR_API_KEY ใส32 AIzaSyB3ZqOSvjAjvfty-X74aJ2bU53bF_V-WNw)

async defer></script>

</body>

</html>

Page 27: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เมอท าการคดลอก Code เสรจเรยบรอยแลว กดปม ctrl+sเพอท าการsave

เปดไฟลทไดท าการ Save เมอสกครโดยเปดกบGoogle Chrome จะปรากฏแผนทดงภาพ

Page 28: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เปลยนจากแผนทเปนภมประเทศ จะปรากฏแผนทดงรป

ท าการเรยกแผนทประเทศไทยโดยการเปลยนคา lat:13,lng:100 กด Ctrl+s

Page 29: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

กด F5 เวบเมอสกคร จะปรากฏแผนทบรเวณประเทศไทย

ดแผนทรอบมหาวทยาลยบรพา โดยการเปลยนคา lat:13.277643,lng:100.925731 กด Ctrl+s

Page 30: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

กด F5 เวบเมอสกคร จะปรากฏแผนทบรเวณรอบมหาวทยาลยบรพา

ท าการใสขนาดพนท โดยการเปลยน height : 50%,margin 15%, padding : 20% กด Ctrl+s

Page 31: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

กด F5 เวบเมอสกคร จะปรากฏดงภาพ

<div id="map"></div> เรยกแผนทขนมา body var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: 13.277643, lng: 100.925731}, zoom: 15 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3ZqOSvjAjvfty-X74aJ2bU53bF_V-WNw&callback=initMap" async defer></script> เปนฟงกชนในggogle Map map = new google.maps.Map(document.getElementById('map'),เปนการเรยกขนมาใหม id="map"เปนการเลอกฟงกชนใหลงคเขากน

Page 32: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Week 5 Google map API Drawing on the map and KML

เปด Google Maps APIs >> samples >> simple map

คดลอก Code

Page 33: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เปดโปรแกรมEditPlus3 >> Ctrl+N >> วางCode ทท าการคดลอกลงไป >> ชอง 32 ลบ YOUR API KEY ใส

Key ของเราลงไป

ในชอง 27 ใส lat:13.277605, lng :100.926524

Page 34: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ save เปน .HTML

เปดไฟลทท าการ save เปน .HTML

Page 35: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ปรากฏดงภาพ

ในชอง33 พมพ title : ‘Hello GI’ เพอท าการ Show Label

Page 36: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏดงภาพ

ท าการเพมขอมลอกชนขอมล แลวท าการ Save

Page 37: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ผลลพธทได

เปด Google Earth >> สราง polygon >> เปลยนส >> ใสความทบ 50%

Page 38: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เลอกตกลง >> ไตซบรเวณทตองการ

ใสค าอธบายลงไป

Page 39: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการบนทกสถานทเปน

ใสชอไฟล .kml

Page 40: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

คดลอก Code

ใส Key ของเราลงไป

Page 41: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Var iconbase ใสลงค ทท า Shape เมอสกคร

ท าการ Save

Page 42: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ใสคาละตจด ลองจจดเพม 2อน ท าการ Save

เปดไฟลขนมา

Page 43: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏดงรป

Week 6 KML

เปด Google earth ขนมา

Page 44: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เพมรปหลายเหลยม

จะปรากฏหนาตางขนมา

Page 45: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ใสชอ และ ค าอธบายลงไป

เลอกสและความทบ

Page 46: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ดจไตซบรเวณทตองการ แลวเลอก ตกลง

คลกขวาท Shapefile เลอกบนทกสถานทเปน

Page 47: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ Save เปน .kml

คลกทดจไตซจะปรากฏขอมลชอและค าอธบาย

Page 48: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เปดโปรแกรม EditPlus3 ขนมา >> Ctrl+N >>ใสCodeขางลาง

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0">

<meta charset="utf-8">

<title>KML feature details</title>

<style>

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#map {

float: left;

height: 100%;

width: 79%;

}

#content-window {

float: left;

font-family: 'Roboto','sans-serif';

height: 100%;

Page 49: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

line-height: 30px;

padding-left: 10px;

width: 19%;

}

</style>

</head>

<body>

<div id="map"></div>

<div id="content-window"></div>

<script>

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 12,

center: {lat: 13.277605, lng: 100.926524}

});

var kmlLayer = new google.maps.KmlLayer({

url: 'https://sites.google.com/site/testkitta/kitta/bb1.kml…',

suppressInfoWindows: true,

map: map

});

kmlLayer.addListener('click', function(kmlEvent) {

var text = kmlEvent.featureData.description;

showInContentWindow(text);

});

function showInContentWindow(text) {

var sidediv = document.getElementById('content-window');

sidediv.innerHTML = text;

}

}

</script>

<script async defer

src="https://maps.googleapis.com/maps/api/js…">

</script>

</body>

</html>

Page 50: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ฝากไฟล .kml ท GoogleSite

Page 51: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ตงชอไซต >> ฉนไมใชโปรแกรมอตโนมต >> สราง

จะปรากฏหนาตางนขนมา >> สรางหนา

Page 52: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏหนาทสรางขนมา

กดเพมไฟล >>เลอกไฟล .kml ทบนทกจาก Google Earth

Page 53: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

คลกขวาท ดาวโหลด >> คดลอกลงค

ใสลงคลงไปในบรรทด url

#content-window { font-family

Page 54: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

kmlLayer.addListener('click', function(kmlEvent) { var text = kmlEvent.featureData.description; ดงขอมลจากฟเจอขนมาแสดงและแสดงค าอธบาย showInContentWindow(text); (แสดงผลในสวนของปายชอ) });

ท าการ Save

เปดไฟลทไดท าการบนทก จะปรากฏภาพดงน

Page 55: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เลอก Layer1 จะปรากฏขอมลทท าการดจไตซบนGoogle Earth

เลอก Layer1 จะปรากฏขอมลทท าการดจไตซบนGoogle Earth

Page 56: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Week 7 Drawing

เปดโปรแกรม EditPlusขนมา >> File >> New >> HTMLPages

ท าการคดลอก Code

<!DOCTYPE html>

<html>

<head>

<title>Drawing tools</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="utf-8">

<style>

/* Always set the map height explicitly to define the size of the div

* element that contains the map. */

#map {

height: 100%;

}

/* Optional: Makes the sample page fill the window. */

html, body {

height: 100%;

margin: 0;

padding: 0;

Page 57: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

}

</style>

</head>

<body>

<div id="map"></div>

<script>

// This example requires the Drawing library. Include the libraries=drawing

// parameter when you first load the API. For example:

// <script src="https://maps.googleapis.com/maps/api/js…">

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({

drawingMode: google.maps.drawing.OverlayType.MARKER,

drawingControl: true,

drawingControlOptions: {

position: google.maps.ControlPosition.TOP_CENTER,

drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']

},

markerOptions: {icon: 'https://developers.google.com/…/e…/full/images/beachflag.png'},

circleOptions: {

fillColor: '#00ff88',

fillOpacity: 1,

strokeWeight: 5,

clickable: false,

editable: true,

zIndex: 1

}

});

drawingManager.setMap(map);

การเขยนค าสง Drawing

การสรางเครองมอวาด

การสรางเครองมอวาด Code

การสรางเครองมอ โดยมจด วงกลม

เสน

Page 59: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏแผนทและเครองมอออกมา

เลอกอนท2 จะปรากฏดงภาพ

เปดโปรแกรม EditPlus >> File >> New >> HTML Pages

Page 60: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ปรากฏ Code ขนมา

พมพค าสง #map {}เปนการเรมค าสง

Page 61: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ก าหนดตวแผนท

ก าหนดการแสดงผลบน Google Chrome

Page 62: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ในบรรทดท 26 ใส Code <div id = ‚map‛></div> เปนการแสดงแผนทขนมา

ในบรรทดท 28 พมพ function initmap เพอท าแผนท

Page 63: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ในบรรทดท 30,31 var map = new google.maps.Map แสดงผลแผทและแสดงคาละตจด ลองจจด

เลอกระดบ Zoomเปน8% maptypeId : 'terrain' เซตขอมลเปนภมประเทศ

Page 64: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ในบรรทดท 38ใส KEY Maps APIs ของเราลงไป

ในบรรทดท 35-39ใสคาพดกดลงไปในบรเวณของสามเหลยมเบอมวดา

Page 65: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ก าหนดการเตมส ใสเสนส ความโปรงส ความหนาเสนส

ท าการ Save เปนไฟล .HTML >> เปดไฟล

ภาพผลลพธทได

อางพกดจดจากตวแปร triangleCoords

การก าหนดเสนสใหกบ polygon ตองใชรหสสของ HTML

ท าใหเสนสโปรงแสง

ท าใหเสนสหนา

ท าให polygon โปรงแสง

การเตมส

Page 66: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Week 9 Python

เปดโปรแกรม IDLE(Python GUI)

จะปรากฏหนาตางมา

Page 67: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Print คอ การแสดงขอมลทเราตองการแสดงออกมา

การค านวนโดยการบวก

ผลลพธทได

Page 68: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าเลขยกก าลงโดยโดย 5**2

คาทตองการใหแสดง

คาทปรากฏ

** เลขยกก าลง

Page 69: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เรยกดประเภทขอมล

ค านวนเสนรอบวง

ค านวณคา sin

ค านวณเลขยกก าลง

Page 70: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Week 10 Python for arcmap

เปดโปรแกรม Arcmap >> เปดหนาตาง Python

<type 'complex'> ซ าซอน

Page 71: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ดาวโหลด buu.rar

พมพค าสง

Page 72: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

แนวกนชน arcpy.Buffer_analysis() full ครอบคลม outside รอบนอก

("D:/script_GI/3301_58/BUU/BUU.shp" น าเขาไฟล BUU

,"D:/script_GI/3301_58/BUU/buff_BUU.shp" สวนของoutput -hv,^]

,"300 meters","OUTSIDE_ONLY")ก าหนดบรเวณรอบนอก300เมตร

ผลลพธทได

ท าแนวกนชนโดยก าหนดระยะหาง 200,300,400,500 เมตร

Page 73: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ผลลพธทได

Week 11 import layers and create layers

ท าการดาวนโหลด DATA WORLD.Rar

Page 74: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

สราง Shape file โดย MakeFeatureLayer_management ส าหรบสรางขอมล

>>> import arcpy

>>>arcpy.MakeFeatureLayer_management("D:/script_GI/3301_58/Data_world/world.shp","world_boundary")

แสดงในสวนพนทรอบโลก <Result 'world_boundary'>

Page 75: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ปรากฏดงภาพ

เปลยนสของshapeโดยdouble click world boundary เลอกส

Page 76: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ save as Layer file

ท าการเลอกจดปรมาณน าฝน

Page 77: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏขอมลออกมา

โหลดขอมลจดปรมาณน าฝน

Page 78: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการคดลอกขอมลจด >> เปดโปรแกรม Excel

วางขอมลจดปรมาณน าฝน >> Text to columns

Page 79: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เลอก Fixed Witdth >> Next

คลมคา ID ทงหมด

Page 80: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ Save เปน .xls

เปดโปรแกรม Arcmap พมพโคด >>>arcpy.MakeXYEventLayer_management(r'D:/script_GI/3301_58/Data_world/Hotspot.xls/sheet1$',"Long","Lat","Hotspot") จะปรากฏผลลพธดงภาพ

Page 81: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

Week 12 Interpolate and Automatic Download file from website

เปดเวบไซต http://service.nso.go.th/nso/web/statseries/statseries27.html คลกเลอกจงหวดทตองการ

จะปรากฏขอมลขนมา

Page 82: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ save เปน .xls

พมพ Code ขางลางน

Page 83: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏดงภาพ

Week 13 Raster to python

คลกดาวโหลด Lansat5.rar

Ga = geostatistic analysis

Page 84: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เลอกดาวโหลดตอไป

เปด Pythonขนมา

Page 85: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

arcpy.MakeRasterLayer_management(‚D:/script_GI/3301/Landsat5/B3.tif‛, ‚Band3.tif‛) จากนนกด Enter

ผลลพธกจะเดงขนมา กคอภาพ Band3.tif

arcpy.MakeRasterLayer_management(‚D:/script_GI/3301/Landsat5/B4.tif‛, ‚Band3.tif‛) จากนนกด Enter

ผลลพธกจะเดงขนมา กคอภาพ Band4.tif

Page 86: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

arcpy.MakeRasterLayer_management(‚D:/script_GI/3301/Landsat5/B3.tif‛, ‚Band3.tif‛) จากนนกด Enter

ผลลพธกจะเดงขนมา กคอภาพ Band3.tif

เมอเลอก Band 3 4 5 เรยบรอยแลว พมพ arcpy.CompositeBands_management จากนนพมพสวนทเหลอให

ครบ และกด Enter จะปรากฏผลลพธออกมาเปนภาพส

Page 87: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

พมพโคดตามภาพดานลาง จากนนกด Enter จะปรากฏผลลพธดงภาพ

Week 14 NDVI for Python

เปดโปรแกรม IDLE(Python GUI)

Page 88: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

File>> New Windows

ปรากฏหนาตางขนมา

Page 89: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

พมพ Code

- CheckOutExtension("spatial") เชคคาพกด

สมการ NDVI = 𝑁𝐼𝑅−𝑅𝐸𝐷

𝑁𝐼𝑅+𝑅𝐸𝐷

Page 90: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

ท าการ Save

เลอกนามสกลไฟล .py

Page 91: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เปด Python

โหลดไฟลทSave เมอสกคร

Page 92: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

จะปรากฏผลลพธดงภาพ

Week 15 การสราง GUI ดวย Python

Catalog >> ToolBoxes >> คลกขวา MyToolboxes

Page 93: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

New >> Toolbox

จะปรากฏ ชองNameขางลาง ท าการเปลยนชอ

Page 94: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

คลกขวาไฟลทท าการบนทก >> Add >> Script

ตงชอ NDVI >> Label ตง NDVI >> Description ใสค าอธบายลงไป >>Next

Page 95: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เลอกไฟลทตองการจดเกบขอมล >> Next

Data Type >> Raster Layer >> Finish

Page 96: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

NDVI จะปรากฏขน

Catalog >> Mytoolbox >> 3301_58.tbx >> NDVI

Page 97: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301

เลอกโฟลเดอรเพอท าการ InputRaster และ Outputraster

จะปรากฏภาพขนมา

Page 98: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301
Page 99: นางสาวนวรัตน์ ศรชัย58670064 กลุ่ม3301