สารบัญ:

วิธีสร้างแผนที่แบบกำหนดเองโดยใช้ OpenStreetMap: 7 ขั้นตอน (พร้อมรูปภาพ)
วิธีสร้างแผนที่แบบกำหนดเองโดยใช้ OpenStreetMap: 7 ขั้นตอน (พร้อมรูปภาพ)

วีดีโอ: วิธีสร้างแผนที่แบบกำหนดเองโดยใช้ OpenStreetMap: 7 ขั้นตอน (พร้อมรูปภาพ)

วีดีโอ: วิธีสร้างแผนที่แบบกำหนดเองโดยใช้ OpenStreetMap: 7 ขั้นตอน (พร้อมรูปภาพ)
วีดีโอ: AtWORK: เพิ่มร้านค้าและสถานที่ของเราลงใน OpenStreetMap 2024, พฤศจิกายน
Anonim
วิธีสร้างแผนที่แบบกำหนดเองโดยใช้ OpenStreetMap
วิธีสร้างแผนที่แบบกำหนดเองโดยใช้ OpenStreetMap

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

วิดีโอต่อไปนี้เน้นวิธีที่ฉันสร้างแผนที่ที่มีสไตล์เป็นการส่วนตัว แต่โปรดอ่านรายละเอียดอย่างใกล้ชิด ฉันตื่นเต้นมากที่ได้เห็นสิ่งที่ชุมชนสร้างขึ้น!

อะไรคือแรงจูงใจของฉันที่อยู่เบื้องหลังโครงการนี้?

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

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

แหล่งข้อมูล/ลิงค์:

  • OpenStreetMap
  • OpenStreetMap ถูกกฎหมาย
  • ที่เก็บ Github

เสบียง

  • การกระจาย Python (ฉันใช้ Anaconda & Python 3.6)
  • PyQt5 (สำหรับการพึ่งพา GUI)

ขั้นตอนที่ 1: กำหนดกระบวนการ I: การดาวน์โหลดไฟล์ OSM

การกำหนดกระบวนการ I: การดาวน์โหลดไฟล์ OSM
การกำหนดกระบวนการ I: การดาวน์โหลดไฟล์ OSM

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

โชคดีที่ฉันสิ้นหวังเมื่อค้นพบ OpenStreetMap (OSM) OSM เป็นโครงการความร่วมมือที่เกี่ยวข้องกับผู้คนทั่วโลกที่ให้ข้อมูล OSM อนุญาตการใช้ข้อมูลแบบปลายเปิดอย่างชัดเจนในชื่อซอฟต์แวร์โอเพ่นซอร์ส ดังนั้น การเยี่ยมชมหน้าเว็บ OSM จึงเป็นจุดเริ่มต้นของเส้นทางการจัดทำแผนที่

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

หมายเหตุ #1: หากภูมิภาคที่คุณเลือกมีข้อมูลมากเกินไป คุณจะได้รับข้อผิดพลาดว่าคุณได้เลือกโหนดมากเกินไป หากเกิดเหตุการณ์นี้กับคุณ ให้คลิกปุ่ม "Overpass API" เพื่อดาวน์โหลดไฟล์ขนาดใหญ่กว่าของคุณ

หมายเหตุ #2: หากไฟล์ OSM ที่คุณดาวน์โหลดมีขนาดใหญ่กว่า 30MB โปรแกรม Python ที่ฉันเขียนจะช้าลงอย่างเห็นได้ชัด หากคุณตั้งใจจะใช้พื้นที่ขนาดใหญ่ ให้ลองเขียนสคริปต์เพื่อทิ้งข้อมูลฟุ่มเฟือยที่คุณไม่ได้วางแผนจะวาด

ขั้นตอนที่ 2: การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล

การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล
การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล
การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล
การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล
การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล
การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล
การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล
การกำหนดกระบวนการ II: การทำความเข้าใจข้อมูล

“ฉันมีข้อมูล…แล้วไง”

เริ่มต้นด้วยการเปิดไฟล์ OSM ที่ดาวน์โหลดมาลงในซอฟต์แวร์แก้ไขข้อความที่คุณชื่นชอบ ก่อนอื่นคุณจะสังเกตเห็นว่านี่เป็นไฟล์ XML ซึ่งเยี่ยมมาก! XML นั้นง่ายพอที่จะแยกวิเคราะห์ จุดเริ่มต้นของไฟล์ควรมีลักษณะใกล้เคียงกับภาพแรกของขั้นตอนนี้ โดยจะแสดงรายการเมตาดาต้าพื้นฐานและขอบเขตทางภูมิศาสตร์

เมื่อคุณเลื่อนไฟล์ คุณจะสังเกตเห็นองค์ประกอบข้อมูลสามองค์ประกอบที่ใช้ตลอด:

  1. โหนด
  2. วิธี
  3. ความสัมพันธ์

องค์ประกอบข้อมูลพื้นฐานที่สุด โหนดเพียงแค่มีตัวระบุ ละติจูด และลองจิจูดที่ไม่ซ้ำกันที่เกี่ยวข้อง แน่นอนว่ายังมีข้อมูลเมตาเพิ่มเติม แต่เราสามารถละทิ้งได้อย่างปลอดภัย

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

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับองค์ประกอบข้อมูลเหล่านี้ได้จากวิกิ OSM:

  • โหนด
  • วิธี
  • ความสัมพันธ์

ขั้นตอนที่ 3: การกำหนดกระบวนการ III: การย่อยข้อมูล

การกำหนดกระบวนการ III: การย่อยข้อมูล
การกำหนดกระบวนการ III: การย่อยข้อมูล

ตอนนี้คุณควรมีความเข้าใจอย่างผิวเผินขององค์ประกอบข้อมูลที่ประกอบเป็นไฟล์ OSM ณ จุดนี้ เราสนใจที่จะอ่านข้อมูล OSM โดยใช้ภาษาที่คุณเลือก แม้ว่าขั้นตอนนี้จะใช้ Python เป็นศูนย์กลาง แต่ถ้าคุณไม่ต้องการใช้ Python คุณควรอ่านส่วนนี้เนื่องจากมีเคล็ดลับและลูกเล่นเล็กน้อย

แพ็คเกจ xml ถูกรวมไว้โดยค่าเริ่มต้นด้วยการแจกแจง Python มาตรฐานส่วนใหญ่ เราจะใช้แพ็คเกจนี้เพื่อแยกวิเคราะห์ไฟล์ OSM ของเราอย่างง่ายดายดังที่แสดงในภาพแรก ใน single for loop คุณสามารถประมวลผลการจัดการข้อมูล OSM สำหรับแต่ละองค์ประกอบข้อมูลเฉพาะ

ในบรรทัดสุดท้ายของรูปภาพ คุณจะสังเกตเห็นว่าฉันตรวจสอบแท็ก 'bounds' ขั้นตอนนี้มีความสำคัญอย่างยิ่งในการแปลค่าละติจูดและลองจิจูดเป็นพิกเซลบนหน้าจอ ฉันขอแนะนำให้เรียกใช้การแปลงนี้เมื่อคุณโหลดไฟล์ OSM เนื่องจากการแปลงข้อมูลจำนวนมากเป็นกระบวนการที่เข้มข้น

เมื่อพูดถึงการแปลงละติจูดและลองจิจูดเป็นพิกัดหน้าจอ นี่คือลิงค์ไปยังฟังก์ชันการคำนวณที่ฉันเขียน คุณน่าจะสังเกตเห็นสิ่งแปลก ๆ เล็กน้อยในการแปลงละติจูดเป็นพิกัดหน้าจอ มีขั้นตอนเพิ่มเติมที่เกี่ยวข้องเมื่อเทียบกับลองจิจูด! ตามที่ปรากฎ ข้อมูล OSM ถูกจำลองโดยใช้วิธีการฉายภาพหลอก-เมอร์เคเตอร์ โชคดีที่ OSM มีเอกสารที่ยอดเยี่ยมเกี่ยวกับหัวข้อนี้ที่นี่ และมีฟังก์ชันการแปลงละติจูดสำหรับภาษาจำนวนมาก สุดยอด!

หมายเหตุ: ในรหัสของฉัน พิกัดหน้าจอ (0, 0) คือมุมซ้ายบนของหน้าจอ

ขั้นตอนที่ 4: การนำ Python Map Stylizer ไปใช้

การใช้งาน Python Map Stylizer
การใช้งาน Python Map Stylizer
การใช้งาน Python Map Stylizer
การใช้งาน Python Map Stylizer
การใช้งาน Python Map Stylizer
การใช้งาน Python Map Stylizer

จนถึงตอนนี้ ฉันได้พูดถึงไฟล์ข้อมูล OSM แล้ว - มันคืออะไร อ่านอย่างไร และจะทำอย่างไรกับมัน ตอนนี้ฉันจะพูดถึงซอฟต์แวร์ที่ฉันเขียนเพื่อจัดการกับการแสดงภาพแผนที่โวหาร (GitHub repo ที่ให้ไว้ในบทนำ)

การใช้งานเฉพาะของฉันมุ่งเน้นไปที่การควบคุมผู้ใช้ของไปป์ไลน์การเรนเดอร์ โดยเฉพาะอย่างยิ่ง ฉันอนุญาตให้ผู้ใช้เลือกเลเยอร์ที่ต้องการให้มองเห็นได้ และต้องการให้แสดงเลเยอร์นั้นอย่างไร ดังที่ได้กล่าวไว้ก่อนหน้านี้สั้น ๆ ว่ามีการแสดงองค์ประกอบสองประเภท: รายการเติมและรายการโฆษณา การเติมถูกกำหนดโดยสีเท่านั้น ในขณะที่เส้นถูกกำหนดโดยสี ความกว้างของเส้น ลักษณะเส้น ลักษณะฝาบรรทัด และลักษณะการรวมเส้น

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

ขั้นตอนที่ 5: ข้อเสียของการนำไปใช้งาน + วิธีแก้ปัญหา

ข้อเสียของการนำไปใช้งาน + วิธีแก้ปัญหา
ข้อเสียของการนำไปใช้งาน + วิธีแก้ปัญหา
ข้อเสียของการนำไปใช้งาน + วิธีแก้ปัญหา
ข้อเสียของการนำไปใช้งาน + วิธีแก้ปัญหา

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

ฉันเริ่มต้นด้วยการระบุเลเยอร์ที่ฉันสนใจเป็นพิเศษ สำหรับจุดประสงค์ของคำแนะนำนี้ สมมติว่าฉันสนใจสิ่งปลูกสร้าง (ทั้งหมด) แม่น้ำ ทางหลวงสายหลัก และถนนผิวน้ำมากที่สุด ฉันจะเขียนสคริปต์ที่ฉันสร้างอินสแตนซ์ของการกำหนดค่า สลับสถานะเลเยอร์อย่างเหมาะสมโดยใช้ฟังก์ชัน setItemState() และค่าคงที่ที่กำหนด และตั้งค่าสีตามวิธีที่ฉันต้องการให้เลเยอร์ของฉันปรากฏโดยใช้ setValue() ไฟล์การกำหนดค่าที่เป็นผลลัพธ์ที่ได้รับการบันทึกสามารถคัดลอกไปยังโฟลเดอร์ configs และโหลดโดยผู้ใช้

สคริปต์ตัวอย่างอยู่ในภาพด้านบน รูปที่สองเป็นตัวอย่างของหน้าตาของฟังก์ชันตัวช่วย และเนื่องจากโดยพื้นฐานแล้วมันเหมือนกันทั้งหมด เพียงมีค่าคงที่ต่างกัน ฉันจึงรวมรูปภาพของตัวอย่างไว้เพียงภาพเดียว

ขั้นตอนที่ 6: พื้นที่สำหรับการปรับปรุง

พื้นที่สำหรับการปรับปรุง
พื้นที่สำหรับการปรับปรุง

หลังจากพิจารณาการใช้งานซอฟต์แวร์ของฉันแล้ว ฉันได้ระบุประเด็นต่างๆ ที่อาจเป็นประโยชน์ต่อการปรับปรุงสำหรับผู้ใช้ระดับสูง

  1. การเรนเดอร์เลเยอร์แบบไดนามิก ขณะนี้ ฉันมีรายการเลเยอร์ที่กำหนดไว้ล่วงหน้าที่จะแสดงผล นั่นคือทั้งหมด เหตุผลส่วนหนึ่งคือความยากลำบากในการพิจารณาว่าเลเยอร์ควรเป็นเส้นหรือเติม ด้วยเหตุนี้ ในเกือบทุกไฟล์ OSM ที่คุณเปิด คุณจะได้รับคำเตือนมากมายเกี่ยวกับเลเยอร์ที่จะไม่แสดงผล บ่อยครั้งสิ่งเหล่านี้มีน้อยมาก แต่ก็ไม่ใช่ปัญหา แต่มีเลเยอร์ที่สำคัญขาดหายไป การเรนเดอร์เลเยอร์แบบไดนามิกจะช่วยขจัดข้อกังวลเหล่านี้
  2. การกำหนดเลเยอร์แบบไดนามิก สิ่งนี้ไปควบคู่กับ #1; หากคุณต้องการเรนเดอร์เลเยอร์แบบไดนามิก คุณต้องกำหนดเลเยอร์ไดนามิก (เช่น การระบุเลเยอร์การเติมกับเลเยอร์ของเส้น) สิ่งนี้สามารถทำได้อย่างสมเหตุสมผล ตามที่ฉันได้เรียนรู้ เพราะวิธีที่โหนดแรกและโหนดสุดท้ายเหมือนกันจะถูกปิดล้อมและด้วยเหตุนี้จึงถูกเติมเต็ม
  3. กลุ่มสี แผนที่ที่มีสไตล์มักมีหลายเลเยอร์ที่มีสไตล์เหมือนกัน และการอนุญาตให้ผู้ใช้แก้ไขรูปแบบของกลุ่มทั้งหมดพร้อมกัน จะช่วยลดเวลาของผู้ใช้ที่ใช้แก้ไขเลเยอร์ทีละชั้นได้อย่างมาก

ขั้นตอนที่ 7: ปิดความคิด

ปิดความคิด
ปิดความคิด
ปิดความคิด
ปิดความคิด
ปิดความคิด
ปิดความคิด

ขอบคุณทุกคนที่สละเวลาอ่าน Instructable ของฉัน โปรเจ็กต์นี้แสดงให้เห็นถึงจุดสุดยอดของการวิจัย การออกแบบ การเขียนโปรแกรม และการดีบักเป็นเวลาหลายชั่วโมง ฉันหวังว่าฉันจะสามารถจัดหา Launchpad ซึ่งคุณสามารถสร้างโครงการของคุณเองหรือต่อยอดจากสิ่งที่ฉันได้เขียนไปแล้ว ฉันหวังว่าข้อบกพร่องและเคล็ดลับของฉันจะให้ประเด็นมากมายที่ต้องพิจารณาในการออกแบบของคุณ หากคุณไม่ค่อยอยากเขียนโปรแกรมและมีแนวโน้มว่าจะสร้างสรรค์ผลงานศิลปะมากขึ้น ฉันชอบที่จะเห็นสิ่งที่คุณทำในความคิดเห็น! ความเป็นไปได้ไม่มีที่สิ้นสุด!

ขอขอบคุณเป็นพิเศษสำหรับผู้สนับสนุน OpenStreetMap! โครงการเช่นนี้จะเกิดขึ้นไม่ได้หากปราศจากความพยายามที่สำคัญ

โปรดแจ้งให้เราทราบหากคุณมีคำถามใด ๆ ในความคิดเห็น!

แผนที่ท้าทาย
แผนที่ท้าทาย
แผนที่ท้าทาย
แผนที่ท้าทาย

รองชนะเลิศในการท้าทายแผนที่

แนะนำ: