gkklk;lkl;

1. Script GI Group 1
นางสาว ณัฐกานต์ศิริชัยราวรรณ
รหัส 59170107

2. Week 2
เปิดโปรแกรม editplus
New> HTMLPage

4. คาสั่งการเขียนสคริปต์ของ JavaScript เริ่มต้นด้วย
<scriptlanguage="JavaScript">
--------
--------
และลงท้ายด้วย
</script>

5. จากคาสั่ง
document.write("ยินดีต้อนรับสู่ JavaScript Tutorial!");
document เป็นObjectส่วน write เป็นMethod ของ
Objectdocument เราต้องจะใช้เครื่องหมาย. คั่นระหว่าง Objectกับ Method

6. แสดงวันที่
แสดงข้อความ สวัสดีชาว GIและวัน เวลาที่เข้าชม ดังภาพด้านล่าง

7. ทำกล่องข้อควำม(MessageBox)
<script>
window.alert("อย่าลืมกินข้าว หิวข้าวแล้ว")
</script>

8. กำรยืนยัน(Confirm) เพื่อให้ผู้ใช้ยืนยันในกรณีที่ผู้ใช้อาจเผอเรอคลิกปุ่มโดยไม่ได้ตั้งใจ เช่นผู้ใช้กดปุ่มเพื่อลบข้อมูล
หรือการออกจากโปรแกรม
<script>
window.confirm("คุณหิวข้าวแล้วหรือยัง?")
</script>

9. กำรสร้ำงTextboxพร้อม(Prompt) เพื่อให้ผู้ใช้ป้อนข้อมูลก่อนเข้าไปยังระบบหรือเข้าหน้าเว็บดูตัวอย่าง
<script>
window.prompt("please enter username")
</script>

10. Week 3
<form name = "test"method= "post" action= "">
ส่ง
<inputtype = "test">
กล่องข้อความage เก็บอายุ
<buttonname = "submit"onclick>ส่งค่าเมื่อคลิ๊กเกิดปฏิกิริยาได้ต่อเมื่อเราคลิ๊ก

16. Week 4
การสร้าง keyGoogle map API
AIzaSyCqsE3YAtYsIVITuDs64hF6cEsAYmTADQw

18. <!DOCTYPEhtml>
<style>
#map{
height :100%;
}
html, body {
height :100%;
margin :0;
padding :0;
}
</style>

19. ขั้นตอนที่3
<scriptasync defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
ขั้นตอนที่ 4
ใส่ในส่วนMapDOM ใช้สาหรับการแสดงแผนที่บนเว็บ ซึ่งจะใช้คาสั่ง div
เพื่อให้แผนที่สามารถแสดงได้ตามที่เราวางคาสั่งนี้ไว้
<div id="map"></div>
ขั้นตอนที่5
ตัวเลือกของแผนที่ขั้นตอนนี้เราสามารถปรับแผนที่ได้อยู่ 2ส่วน คือการปรับให้แผนที่อยู่ตรงกลาง centerและการซูม zoom
ของระดับแผนที่ ดังนี้
map= new google.maps.Map(document.getElementById('map'), {
center:{lat: -34.397, lng: 150.644},
zoom: 8
});

20. การแสดงผลแผนที่ google map บนเว็บ

21. Week 5
Google map API Drawingonthe map andKML
การใส่เครื่องหมายหรือหมุด หรือที่เรียกว่า Marker ในGoogle map API เพื่อเอาไว้ใช้ปักหมุดให้กับสถานที่บนแผนที่
ซึ่งมีวิธีการเขียนคาสั่งดังนี้
<script>
function initMap() {

22. varmyLatLng = {lat:-25.363, lng: 131.044};
varmap = newgoogle.maps.Map(document.getElementById('map'), {
zoom: 4,
center:myLatLng
});
varmarker= newgoogle.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>

23. Week 6
วิธีการสร้าง Google mapAPI กับ KML
<script>
function initMap() {
varmap = newgoogle.maps.Map(document.getElementById('map'), {
zoom: 12,

24. center:{lat: 13.277605, lng: 100.926524}
});
varkmlLayer= newgoogle.maps.KmlLayer({
url: 'https://sites.google.com/site/testkitta/kitta/bb.kml?attredirects=0&d=1',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
vartext= kmlEvent.featureData.description;
showInContentWindow(text); //คาสั่ง kmlLayer.addListener คือเมื่อคลิกให้แสดงข้อความหรืออักษรที่อยู่ใน KML โดยมี function(kmlEvent)
ในการจัดการข้อความหรือตัวอักษรที่อยู่ในข้อมู ล KML
});
function showInContentWindow(text) {
varsidediv= document.getElementById('content-window');
sidediv.innerHTML = text; //Function showInContentWindow(text) เป็นฟังก์ชันที่สั่งให้ข้อมู ล (text) ที่มาจาก function(kmlEvent)
ให้ไปแสดงข้อความฝั่งขวามือที่เรากาหนดไว้คือcontent-window ในช่วง Style ในขั้นตอนแรก

25. }
1. เรียกแผนที่Google map API เราสามารถใช้คาสั่งด้านบนเป็นการเรียกแผนที่ Google mapAPI โดยไม่ต้องอาศัย Keyดัง
codeด้านล่าง
<scripttype="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
2.เขียนcodeโดยขั้นตอนนี้เป็นการกาหนดตัวแปรเพื่อให้เก็บข้อมูลKMLได้แก่ varlayers=[]กาหนดตัวแปร layers
จัดเก็บแบบ อาร์เรย์ Arrayโดย มี layers 2ตัวคือ layers[0] และ layers[1] และมีฟังก์ชัน preserveViewport เพื่อระบุว่า
แผนที่ควรรักษาขอบเขตของ KmlLayer เมื่อต้องการแสดงชั้น โดยค่าเริ่มต้น แสดงจาก KmlLayer แผนที่จะถูกซูม
และแสดงตาแหน่งเพื่อแสดงเนื้อหาของเลเยอร์ทั้งหมด
<script>
varlayers=[];
layers[0]= new
google.maps.KmlLayer('https://sites.google.com/site/testkitta/kitta/bb.kml?attredirects=0&d=1',
{preserveViewport:true});
layers[1]= new
google.maps.KmlLayer('https://sites.google.com/site/testkitta/kitta/field.kml?attredirects=0&d=1',
{preserveViewport:true});

26. 3. เขียนcodeเพื่อแสดงแผนที่
varmaps;
function initMap(){
varlatlng = newgoogle.maps.LatLng(13.277605, 100.926524);
varmyOptions = {
zoom: 17,
center:latlng,
mapTypeIds:google.maps.MapTypeId.ROADMAP
}
maps = new google.maps.Map(document.getElementById("map"),myOptions);
}
4. สร้างฟังก์ชันtoggleLayers(i) เพื่อใช้เปิดเปิดข้อมูลโดยi คือค่าจานวนlayersที่เก็บข้อมูลKML
function toggleLayers(i)
{

27. if(layers[i].getMap()==null) {
layers[i].setMap(maps);
}
else{
layers[i].setMap(null);
}
}
</script>
</head>
5. เพื่อให้แสดงเครื่องมือปรากฎทางฝั่งขวามือของหน้าจอ
<body onload= "initMap()">
<div id="map"></div>
<div id="content-window">
Layer1<input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>

28. Layer2<input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/></div>
</body>
</html>

29. Week 9
Simple Polygon Google mapAPI
functioninitMap()

30. <script asyncdefer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvTlp7Kivg9z6omKX6k478rOZ-66gA-
RA&callback=initMap">
</script> มาใส่

31. การเติมลักษณะสีให้กับ Polygon สามารถเขียนcodeได้ดังนี้
varbermudaTriangle = newgoogle.maps.Polygon({
paths: triangleCoords, //อ้างพิกัดจุ ดจากตัวแปร triangleCoords
strokeColor: #000111', //การกาหนดเส้นสีให้กับ polygon ต้องใช้รหัสสีของ HTML
strokeOpacity: 0.8, //ทาให้เส้นสีโปร่งแสง
strokeWeight: 2, //ทาให้เส้นสีหนา
fillColor: '#FF0000', //การเติมสี
fillOpacity: 0.35 //ทาให้ polygon โปร่งแสง
});
bermudaTriangle.setMap(map);

33. Week 10
Python for ArcGIS (arcpy)
เปิดโปรแกรม Arcmap
พิมพ์คาสั่ง import arcpyเพื่อให้โปรแกรมนาเข้าเครื่องมือต่างๆ
ในการวิเคราะห์แนวกันชน Buffer จะมีวิธีการแสดงผล 2แบบ โดยแบบที่ 1เรียกว่าBuffer ส่วนแบบที่ 2เรียกแบบ
Multiple ringbuffer ซึ่งทั้งสองแบบนี้อยู่ในเครื่องมือที่ชื่อ analysis

34. Python สาหรับวิเคราะห์ Buffer แบบที่ 1
ใช้arcpy.buffer_analysis(“ช่องการนาเข้าข้อมูลว่านิสิตเก็บไว้ที่ไดร์ฟไหน
”,”ช่องการจัดเก็บว่าจะจัดเก็บที่ใดและชื่ออะไร”,”ช่องกาหนดระยะห่าง”,”การเลือกวิเคราะห์ตั้งแต่ Center ของข้อมูลหรือ
จะวิเคราะห์ตั้งแต่ขอบเขตข้อมูลได้”)
แนวกันชนแบบที่ 2Multiple ringbuffer
ใช้คาสั่ง arcpy.MultipleRingBuffer_analysis (“ช่องการนาเข้าข้อมูลว่านิสิตเก็บไว้ที่ไดร์ฟไหน
”,”ช่องการจัดเก็บว่าจะจัดเก็บที่ใดและชื่ออะไร”,[ ช่องกาหนดระยะห่างใส่จานวนระยะได้เช่น 300,500,1000,1500
],”เลือกหน่วยระยะทาง”,””,”นามาวิเคราะห์ทั้งหมดเลือกAll”,”การเลือกวิเคราะห์ตั้งแต่ Center ของข้อมูล(full) หรือ
จะวิเคราะห์ตั้งแต่ขอบเขตข้อมูลได้(Outside_only)”)

35. Week 11
การสร้างชั้นข้อมูลและการนาเข้าข้อมูลจาก Excelด้วยภาษา Python
สร้างข้อมูลจุด เส้นและพื้นที่รูปปิดโดยการสร้างข้อมูลจะใช้คาสั่งดังนี้
import arcpy
arcpy.MakeFeatureLayer_management(‘แหล่งที่จัดเก็บและชื่อและชื่อข้อมูล',‘ชื่อไฟล์ที่ตั้งใหม่')

36. ใส่สีให้กับชั้นข้อมูลเพื่อการจาแนกของแต่ละข้อมูลที่อยู่ในชั้นข้อมูลเพื่อให้เกิดสีและแสดงผลออกมาอย่างสวยงาม
arcpy.ApplySymbologyFromLayer_management(“ชื่อชั้นข้อมูลที่นาเข้ามา”,”ไฟล์ชื่อแบบสี”)
เปลี่ยนสี

37. arcpy.MakeXYEventLayer_management(r‘แหล่งที่อยู่และชื่อไฟล์จัดเก็บ/หน้าsheetที่ข้อมูลแสดงและลงท้ายด้วย
$',“ข้อมูลที่จนาเข้าตามคอลัมน์"," นาเข้าตามคอลัมน์ ",“สร้างชื่อ output ใหม่")

38. ข้อมูลจุดความร้อนที่ได้จากดาวเทียม Modis ระบบ Terra
จากเว็บไซต์ http://asmc.asean.org/asmc-hotspot#Hotspot

39. Week 12

40. Week13
Rasterfor python
เราสามารถใช้คาสั่ง arcpy.MakeRasterLayer_management(“ที่อยู่ของชื่อและภาพที่จะนาเข้า”,”ตั้งชื่อนาออกที่แสดงบน
Arcmap”)
import arcpy
>>> arcpy.MakeRasterLayer_management("D:/script_GI/Landsat5/B3.tif","Band3")

41. >>> arcpy.MakeRasterLayer_management("D:/script_GI/Landsat5/B3.tif","Band4")
<Result 'Band4'>
>>> arcpy.MakeRasterLayer_management("D:/script_GI/Landsat5/B3.tif","Band5")
<Result 'Band5'>
เปลี่ยนสี
arcpy.CompositeBands_management("Band5;Band4;Band3","Composite66")

43. Week 14

44. Load.. เปิดไฟล์ที่save