ภาพรวมสถาปัตยกรรม

02 · การกำหนดค่าตามแพลตฟอร์ม

Core และไดรเวอร์แยกเป็นแพ็กเกจ แอปพลิเคชันจะเพิ่มเฉพาะ Core และไดรเวอร์ของผู้ให้บริการที่ใช้เป็น dependency เท่านั้น

ในกรณีของ React Native

Web และ React Native แชร์โค้ดที่แอปเขียน วัตถุสถานะและคอมโพเนนต์ก็เหมือนกัน เพียงแค่เปลี่ยน MapView ที่เลือก ส่วนที่ต่างอยู่ด้านล่าง บน Web ไดรเวอร์เรียกใช้ไลบรารีแผนที่ JavaScript ในสภาพแวดล้อมรันไทม์เดียวกัน แต่ใน React Native จะผ่านไปยัง MapConductor Native SDK ผ่านบริดจ์ และในท้ายที่สุด Native Map SDK จะทำการเรนเดอร์

เลเยอร์ 3 ในตารางด้านบนคือบริดจ์ บน Web จะไม่มีส่วนนี้เพราะ UI และการเรนเดอร์เสร็จสมบูรณ์ในสภาพแวดล้อมรันไทม์เดียวกัน ใน React Native ต้องมีส่วนนี้เพราะทั้งสองแยกกันอยู่ในสภาพแวดล้อมรันไทม์ต่างกัน เฉพาะเลเยอร์นี้เท่านั้นที่แตกต่างตามแพลตฟอร์ม ส่วนด้านบนไม่เปลี่ยนแปลง

ผู้ให้บริการที่ใช้งานได้กับ React Native มีอยู่ 4 ราย คือ Google Maps, MapLibre, ArcGIS และ HERE เนื่องจากจำกัดเฉพาะรายที่มีโมดูลที่สอดคล้องกันในฝั่ง Native จึงมีจำนวนน้อยกว่าผู้ให้บริการ 13 รายบน Web

04 · โครงสร้างภายในของ Core

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

สิ่งสำคัญคือตำแหน่งของขอบเขต ด้าน Core (State / Entity / Manager / Controller / Overlay) เขียนด้วยโค้ดเกือบเหมือนกันใน 3 ภาษา และสำหรับแต่ละผู้ให้บริการจำเป็นต้องเขียนเพียง Renderer และการประกาศว่าสามารถจัดการองค์ประกอบเหล่านั้นได้เท่านั้น

06 · สิ่งที่ไดรเวอร์ต้องนำไปใช้

งานในการรองรับแผนที่ SDK ใหม่จำกัดอยู่ที่การสืบทอดจากเรนเดอร์นามธรรมสำหรับแต่ละองค์ประกอบและกรอกข้อมูลใน 3 การดำเนินการ ไม่ต้องแตะโมเดลของ Core หรือตรรกะความแตกต่าง

// ไดรเวอร์สืบทอดจากเรนเดอเรอร์นามธรรม แล้วเติมเพียงสามการทำงาน
internal class GoogleMapPolygonOverlayRenderer(
    override val holder: GoogleMapViewHolder,
    override val coroutine: CoroutineScope,
) : AbstractPolygonOverlayRenderer<GoogleMapActualPolygon>() {

    override suspend fun createPolygon(state: PolygonState) = /* map.addPolygon(...) */
    override suspend fun updatePolygonProperties(polygon, current, prev) = /* นำเฉพาะส่วนต่างไปใช้ */
    override suspend fun removePolygon(entity: PolygonEntityInterface<GoogleMapActualPolygon>) =
        entity.polygon.remove()
}

// รูปแบบเดียวกับ Kotlin สืบทอดจากเรนเดอเรอร์นามธรรมแล้วเติมสามการทำงาน
final class MapKitPolygonOverlayRenderer: AbstractPolygonOverlayRenderer<MKPolygon> {

    override func createPolygon(state: PolygonState) async -> MKPolygon? { /* MKPolygon(...) */ }
    override func updatePolygonProperties(polygon, current, prev) async -> MKPolygon? { /* นำเฉพาะส่วนต่างไปใช้ */ }
    override func removePolygon(entity: PolygonEntity<MKPolygon>) async { /* mapView.removeOverlay */ }
}

// คอนโทรลเลอร์ใช้อิมพลีเมนต์แบบเจเนริกของ Core ตามเดิม
final class MapKitPolygonController: PolygonController<MKPolygon, MapKitPolygonOverlayRenderer> { }

// รูปแบบเดียวกับ Kotlin และ Swift สืบทอดจากเรนเดอเรอร์นามธรรมแล้วเติมสามการทำงาน
export class MapLibrePolygonOverlayRenderer extends AbstractPolygonOverlayRenderer<
    MapLibreMapViewHolder,
    MapLibreActualPolygon
> {

    async createPolygon(state: PolygonState) { /* สร้างฟีเจอร์ GeoJSON */ }
    async updatePolygonProperties({ current, prev }) { /* นำเฉพาะส่วนต่างไปใช้ */ }
    async removePolygon(entity: PolygonEntity<MapLibreActualPolygon>) { /* เอาออก */ }

    // หลังนำส่วนต่างไปใช้ ให้เขียนซอร์สใหม่จากเอนทิตีที่เหลืออยู่
    override async onPostProcess() { this.layer.draw(this.polygonManager.allEntities()); }
}

// ประกาศสิ่งที่รองรับได้ด้วยการ implements อินเทอร์เฟซ Capable
export class MapLibreViewController extends BaseMapViewController
    implements MapViewControllerInterface, MarkerCapable, PolygonCapable, /* … */ { }