จากบทความตอนที่แล้ว เราได้ทดลองทำการบีบอัดไฟล์ข้อมูลแผนที่ประเทศไทยซึ่งมีข้อมูลระบุขอบเขตของทุกจังหวัด เพื่อบีบอัดจากไฟล์ที่มีความละเอียดสูงให้มีขนาดเล็กลงเพื่อตอนที่โหลดเพื่อนำไปใช้งานจะได้ไม่ต้องใช้หน่วยความจำในการโหลดและประมวลผลมากนัก โดยฟังก์ชันที่ใช้ในการบีบอัดสำหรับบทความที่แล้วเราก็ยังสามารถระบุความละเอียดของแผนที่ได้ตามความเหมาะสมที่เราจะนำไปใช้งาน
หลังจากบีบอัดไฟล์ข้อมูลแผนที่ .geojson ซึ่งมีความละเอียดที่แตกต่างกันแล้ว ออมก็มีความสงสัยขึ้นมาอีกว่า แล้วข้อมูลที่ถูกบีบลงไปนั้นจะยังคงความละเอียดมากแค่ไหน จะเหมาะกับนำไปใช้งานอย่างไร เดี๋ยววันนี้เราจะมาลองดึงข้อมูลดังกล่าวเพื่อมาแสดงผลเป็นข้อมูลแผนที่ที่ถูกบีบอัดด้วยความละเอียดที่แตกต่างกัน ลองมาซูมแผนที่ดู ว่าข้อมูลแผนที่ที่ถูกบีบอัดแล้วความละเอียดจะเพียงพอกับการใช้งานหรือไม่
ในบทความนี้ ออมก็เลยทดลงเขียนแอพลิเคชันขึ้นมาหนึ่งอัน เพื่อไว้ทดสอบการแสดงผลแผนที่ ซึ่งบีบอัดด้วยความละเอียดแตกต่างกัน และเราจะใช้ html ร่วมกับ javascript และ library leaflet สำหรับแอพลิเคชันนี้เพื่อจะใช้ในการนำมาแสดงผลข้อมูลแผนที่และเขียนโค้ดให้รับข้อมูลเข้าไปนิดหน่อย
ตัวอย่างโปรแกรม
จะเห็นจากในโปรแกรมด้านบน ก็จะมีแสดงแผนที่ 3 แบบ ซึ่งบีบอัดมาด้วยความละเอียดของไฟล์แตกต่างกัน
- แผนที่ด้านซ้ายสุด ถูกบีบอัดจนเหลือขนาดไฟล์ 553.9 kB
- แผนที่ตรงกลาง ถูกบีบอัดจนเหลือขนาดไฟล์ 2.9 MB
- แผนที่ด้านขวาสุด ถูกบีบอัดจนเหลือขนาดไฟล์ 14.1 MB
ส่วนตัวเลือกในแอพลิเคชัน เราจะแสดงตัวอย่างที่การซูมแผนที่ 3 ระดับ
- เลือกดูแผนที่ในระยะซูมดูข้อมูลแผนที่รวมทั้งประเทศ (ตั้งค่าจุดกึ่งกลางเป็น [13.29900, 100.9925], ระดับซูม 5)
- เลือกดูแผนที่ในระยะซูมเพื่อดูแผนที่เฉพาะจังหวัดภูเก็ต (ตั้งค่าจุดกึ่งกลางเป็น [7.9902, 98.3986], ระดับซูม 10)
- เลือกดูแผนที่ในระยะซูมดูแผนที่เฉพาะตรงเกาะกะลาจังหวัดภูเก็ต (ตั้งค่าจุดกึ่งกลางเป็น [8.0305, 98.28217], ระดับซูม 15)
เริ่มต้นจากซูมแผนที่เพื่อดูข้อมูลแผนที่โดยรวมทั้งประเทศ (เห็นเส้นแบ่งขอบเขตจังหวัดครบทุกจังหวัด) จะเห็นว่าเมื่อซูมแผนที่ในระดับที่ต้องการดูข้อมูลทั้งประเทศ ความละเอียดของแผนที่ทั้ง 3 อัน ดูไม่ค่อยมีความแตกต่างกันมากนัก
ต่อมาเรามาเริ่มซูมเข้าไปเยอะหน่อย คราวนี้ลองมาซูมดูที่จังหวัดภูเก็ต (เห็นเส้นแบ่งขอบเขตของจังหวัดภูเก็ต ) ในการซูมระดับนี้จะเห็นว่าแผนที่ทางด้านซ้ายสุด(ที่แผนที่ขนาดไฟล์ 553.9 kB) เริ่มมีความแตกต่างจากแผนที่อันกลางและด้านขวา โดยแผนที่ด้านซ้ายสุดจะมีจุดข้อมูล polygon ที่น้อยลงมากจนบางช่วงพอลากเส้นต่อจุดทำให้ไม่ตรงกับภาพขอบเขตรอยหยักจริงของภาพขอบเขตจังหวัดที่ของจริงนั้นมีเหลี่ยมและมุมเยอะกว่า ส่วนแผนที่อันกลางและอันขวายังดูไม่ค่อยแตกต่างกันมากนัก
อันสุดท้ายเราจะมาซูมลึกลงไปอีก จะซูมเข้าไปที่เกาะหนึ่งของจังหวัดภูเก็ต เกาะนี้มีชื่อว่าเกาะกะลา (เห็นเส้นแบ่งขอบเขตของเกาะกะลา) ในการซูมระดับนี้จะเห็นว่าแผนที่ทั้ง 3 อัน มีความแตกต่างกันค่อนข้างมาก
- แผนที่ด้านซ้ายสุดไฟล์ขนาด 553.9 kB ขอบเขตของเกาะเหลือเพียงจุด polygon 3 จุด ซึ่งลากออกมาได้เป็น 3 เหลี่ยม ซึ่งค่อนข้างแตกต่างจากรูปเกาะจริงไปเยอะพอสมควร
- แผนที่อันกลางไฟล์ขนาด 2.9 MB ขอบเขตของเกาะเหลือเพียงจุด polygon 4 จุด ซึ่งลากออกมาได้เป็น 4 เหลี่ยม ซึ่งก็ค่อนข้างแตกต่างจากรูปเกาะจริงไปเยอะพอสมควรเช่นกัน
- แผนที่อันขวาสุดไฟล์ขนาด 14.1 MB ขอบเขตของเกาะยังมี polygon เหลืออยู่หลายจุด พอลากออกมาก็ดูค่อนข้างคล้ายกับลักษณะของเกาะจริงพอสมควร
จากการทดสอบทำให้พบว่า แผนที่ทั้ง 3 อันที่บีบอัดมาจนเหลือขนาดไฟล์ที่แตกต่างกัน เราสามารถนำไปใช้งานได้ทั้ง 3 แบบ แต่ว่าเราต้องเลือกใช้เอาได้ตามความเหมาะสม เช่น
- ถ้าแอพลิเคชันเราใช้ซูมแค่ระดับประเทศดูพร้อมกันครบทุกจังหวัด แต่เราเน้นให้โหลดแผนที่เร็วและกินทรัพยาการน้อย แผนที่แบบด้านซ้ายสุดก็สามารถนำไปใช้ได้
- ถ้าแอพลิเคชันเราต้องการจะซูมเข้าไปละเอียดหน่อยถึงระดับอำเภอหรือจังหวัดเราก็อาจจะต้องยอมให้แอพลิเคชันเราโหลดแผนที่แบบในด้านขวาสุดซึ่งจะโหลดช้ากว่าและกินทรัพยาการในการประมวลผลเยอะกว่าด้วย
นอกจากขนาดไฟล์ทั้ง 3 แบบนี้แล้วเรายังสามารถเลือกบีบอัดขนาดข้อมูลแผนที่เป็นความละเอียดระดับอื่นๆ ได้อีกนะ จาก บทความตอนที่แล้ว เราก็ลองตั้งค่าก่อนรันโค้ดเพื่อบีบอัดไฟล์ดูนะ ว่าแอพพลิเคชันที่เราจะนำไปใช้งานเหมาะสมกับการบีบอัดในระดับไหน