MapConductorPolygon
พื้นที่ที่มีลำดับพิกัดของเส้นรอบนอกและรูขุมขน (holes) ตามจำนวนที่ต้องการ เพียงวางลงในมุมมองแผนที่พร้อมสไตล์การเติมและเส้น ก็สามารถแสดงพื้นที่หรือแสดงผลแบบมาสก์ได้ การจัดการรูขุมขนแตกต่างกันไปในแต่ละแผนที่ SDK แต่ MapConductor ปรับให้ดูเหมือนกันในทุกผู้ให้บริการ
01 · สถานะของ Polygon
PolygonState แทนพื้นที่เดียว มีเส้นรอบนอก รูขุมขน การเติม เส้น และตัวจัดการแตะ เมื่อเปลี่ยนคุณสมบัติ รูปร่างจะถูกอัปเดตทันที UI สำหรับแก้ไขรูปร่างโดยลากมาร์กเกอร์จุดยอดก็สามารถสร้างได้เพียงแค่เปลี่ยนลำดับพิกัด
val polygonState =
PolygonState(
points = outerRing,
holes = listOf(holeA, holeB),
strokeColor = Color.Red,
strokeWidth = 3.dp,
fillColor = Color(0x4D0064E6),
onClick = { event -> viewModel.onPolygonClick(event) },
)
Polygon(polygonState)
// จุดยอดและรูอัปเดตได้ด้วยการเขียนทับเท่านั้น
polygonState.holes = nextHoleslet polygonState = PolygonState(
points: outerRing,
strokeColor: .red,
strokeWidth: 3.0,
fillColor: UIColor(red: 0, green: 0.39, blue: 0.9, alpha: 0.3),
holes: [holeA, holeB],
onClick: { event in viewModel.onPolygonClicked(event) }
)
content.polygons = [Polygon(state: polygonState)]const polygonState = createPolygonState({
id: 'demo-polygon',
points: vertices,
holes,
strokeColor: '#e74c3c',
strokeWidth,
fillColor: `rgba(0, 100, 230, ${fillOpacity})`,
onClick: () => showToast('Polygon clicked'),
});
<Polygon state={polygonState} />02 · การรวมของรู (holes) และการซ้อนทับ
รู (hole) คือพื้นที่ที่ตัดออกจากเส้นรอบนอก ในการแสดงผลมาสก์ มักจะวาง "สถานที่ที่ต้องการให้เห็น" เป็นรูหลายๆ รู ซึ่งในเวลานั้นรูแต่ละรูมักจะซ้อนทับกันโดยธรรมชาติ
SDK แผนที่ส่วนใหญ่จะวาดเส้นขอบในส่วนที่ซ้อนทับหากส่งรูที่ซ้อนทับไปโดยตรง ทำให้เห็นเส้นแบ่งระหว่างรูแต่ละรู MapConductor จะรวมรูที่ส่งมาก่อนวาด ดังนั้นส่วนที่ซ้อนทับจะถูกจัดการเป็นรูเดียว และจะไม่มีเส้นส่วนเกินปรากฏขึ้น
// ส่งรูที่ซ้อนกันไปได้ตามเดิม ระบบจะรวมเป็นรูเดียวภายใน
PolygonState(
points = outerRing,
holes =
listOf(
triangleA, // ← ซ้อนทับกัน
triangleB,
),
fillColor = Color(0xCC787880),
)// ส่งรูที่ซ้อนกันไปได้ตามเดิม ระบบจะรวมเป็นรูเดียวภายใน
let state = PolygonState(
points: outerRing,
fillColor: UIColor(white: 0.47, alpha: 0.8),
holes: [triangleA, triangleB]
)// ส่งรูที่ซ้อนกันไปได้ตามเดิม ระบบจะรวมเป็นรูเดียวภายใน
const state = createPolygonState({
id: 'world-hole',
points: OUTER_POINTS,
holes, // สามเหลี่ยมสองรูปที่ซ้อนกัน
fillColor: 'rgba(120, 120, 128, 0.8)',
strokeColor: '#ef4444',
strokeWidth: 2,
});03 · ดูเหมือนกันในทุกผู้ให้บริการ
นอกจากการซ้อนทับของรูแล้ว การวาดพื้นที่ยังมีจุดอื่นที่มักแสดงความแตกต่างกันตามเอ็นจิ้น MapConductor จะดูดซับความแตกต่างเหล่านั้นภายใน และทำให้ได้ภาพเดียวกันจาก PolygonState เดียวกัน
รวมรูที่ซ้อนทับกัน
การซ้อนทับระหว่างรูจะถูกรวมเป็นพื้นที่เดียวในขั้นตอนการสร้างสถานะ เส้นขอบจะไม่ปรากฏในส่วนที่ซ้อนทับและการเติมสีจะไม่ซ้ำซ้อน
รูปร่างเดียวกันสำหรับเอ็นจิ้นที่ไม่สามารถวาดเส้นโค้งได้
สำหรับเอ็นจิ้นที่ไม่สามารถวาดเส้นทางวงกลมใหญ่โดยตรงได้ ขอบจะถูกแปลงเป็นลำดับพิกัดที่แบ่งย่อยอย่างละเอียดแล้วจึงส่งต่อ รูปร่างจะตรงกันแม้ในพื้นที่ขนาดใหญ่
พื้นที่ที่ข้ามเส้นเปลี่ยนวันสากล
พื้นที่ที่ข้ามเส้นลองจิจูด 180 องศาจะถูกแบ่งที่เขตแดนแล้วส่งต่อ แม้กับเอ็นจิ้นที่ส่งผลให้การเติมสีข้ามโลกในทิศทางตรงข้าม ด้านที่ถูกต้องจะถูกเติมสี
การตรวจจับการแตะเหมือนกัน
การตรวจจับการแตะใช้ตรรกะร่วมกัน ภายในรูจะไม่ตอบสนองต่อการแตะ ไม่ว่าเอ็นจิ้นจะคำนึงถึงรูหรือไม่ การตรวจจับจะเป็นไปตามที่เห็น
04 · แตะ
onClick จะรับสถานะของพื้นที่และพิกัดที่แตะ การดึงข้อมูลจากการเติมสีและ extra เพื่อแสดงรายละเอียดเป็นวิธีใช้งานมาตรฐาน
สถานะของพื้นที่ที่แตะ สามารถดึงข้อมูลจากสีเติมและ `extra`
พิกัดภูมิศาสตร์ที่แตะ
แม้ว่าจะแตะภายในรู อีเวนต์ของพื้นที่นั้นจะไม่ถูกเรียกใช้ เฉพาะส่วนที่เติมสีที่มองเห็นเท่านั้นที่เป็นเป้าหมาย
fun onPolygonClicked(event: PolygonEvent) {
markerState = MarkerState(
position = event.clicked,
icon = DefaultMarkerIcon(fillColor = event.state.fillColor),
)
}func onPolygonClicked(_ event: PolygonEvent) {
let color = event.state.fillColor.withAlphaComponent(1.0)
markerState = MarkerState(
position: GeoPoint.from(position: event.clicked),
id: "clicked",
icon: DefaultMarkerIcon(fillColor: color)
)
}onClick: event => {
setMarker(createMarkerState({
id: 'clicked',
position: event.clicked,
icon: new ColorDefaultIcon({ fillColor: event.state.fillColor }),
}));
},หากพื้นที่ซ้อนทับกัน พื้นที่ด้านบน (อันที่มี zIndex มากกว่า) จะมีความสำคัญเหนือกว่า แม้จะวางพื้นที่หลายๆ แผ่นไว้ในพื้นที่กว้าง พื้นที่ที่อยู่นอกช่วงที่แสดงจะถูกแยกออกจากการตรวจจับ