MapConductorPolygon
Eine Fläche mit einer Koordinatenfolge des Umfangs und einer beliebigen Anzahl von Löchern (holes). Wenn Sie sie mit Füll- und Linienstilen in die Kartenansicht einfügen, können Sie Bereiche anzeigen oder Masken darstellen. Die Behandlung von Löchern variiert je nach Karten-SDK, aber MapConductor sorgt dafür, dass sie bei allen Anbietern gleich aussieht.
01 · Status des Polygons
PolygonState stellt eine einzelne Fläche dar. Es verfügt über einen Umfang, Löcher, eine Füllung, eine Linie und einen Tap-Handler. Wenn Sie die Eigenschaften ändern, wird die Form sofort aktualisiert. Eine Benutzeroberfläche, mit der die Form durch Ziehen von Eckpunktmarkern bearbeitet werden kann, kann einfach durch Ersetzen der Koordinatenfolge erstellt werden.
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)
// Eckpunkte und Löcher aktualisieren sich, indem man sie einfach neu schreibt
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 · Kombination von Löchern (holes) und Überlappungen
Ein Loch ist ein Bereich, der vom äußeren Umfang ausgeschnitten wird. Bei Maskendarstellungen ist es üblich, mehrere „zu zeigende Bereiche“ als Löcher zu platzieren, wobei sich die Löcher dabei natürlich überschneiden.
Viele Karten-SDKs zeichnen eine Konturlinie im überlappenden Bereich, wenn überlappende Löcher direkt übergeben werden, wodurch die Grenze zwischen den Löchern sichtbar wird. Da MapConductor die übergebenen Löcher vor dem Zeichnen zusammenfügt, wird die Überlappung als ein einziges Loch behandelt und es werden keine überflüssigen Linien angezeigt.
// Überlappende Löcher können unverändert übergeben werden; intern werden sie zu einem zusammengeführt
PolygonState(
points = outerRing,
holes =
listOf(
triangleA, // ← überlappen einander
triangleB,
),
fillColor = Color(0xCC787880),
)// Überlappende Löcher können unverändert übergeben werden; intern werden sie zu einem zusammengeführt
let state = PolygonState(
points: outerRing,
fillColor: UIColor(white: 0.47, alpha: 0.8),
holes: [triangleA, triangleB]
)// Überlappende Löcher können unverändert übergeben werden; intern werden sie zu einem zusammengeführt
const state = createPolygonState({
id: 'world-hole',
points: OUTER_POINTS,
holes, // Zwei einander überlappende Dreiecke
fillColor: 'rgba(120, 120, 128, 0.8)',
strokeColor: '#ef4444',
strokeWidth: 2,
});03 · Sieht bei jedem Anbieter gleich aus
Neben der Überlappung von Löchern gibt es beim Zeichnen von Flächen weitere Bereiche, in denen leicht Unterschiede zwischen den Engines auftreten. MapConductor gleicht diese intern ab und stellt sicher, dass aus demselben PolygonState dasselbe Bild entsteht.
Überlappende Löcher zusammenführen
Überlappungen zwischen Löchern werden im Stadium der Erstellung des Zustands zu einem Bereich zusammengeführt. Weder erscheinen Konturlinien in den überlappenden Bereichen noch gibt es Doppelfüllungen.
Die gleiche Form auch für Engines, die keine Kurven zeichnen können
Für Engines, die keine Großkreisrouten direkt zeichnen können, werden die Kanten in eine Reihe fein unterteilter Koordinaten umgewandelt und dann übergeben. Die Formen stimmen auch in großräumigen Gebieten überein.
Flächen, die die Datumsgrenze überschreiten
Flächen, die den 180. Längengrad überschreiten, werden an der Grenze geteilt und übergeben. Auch bei Engines, die zu einer Füllung führen, die die Erde in umgekehrter Richtung durchquert, wird die korrekte Seite gefüllt.
Auch Tapperkennung gemeinsam
Die Tapperkennung erfolgt mit einer gemeinsamen Logik; das Innere von Löchern reagiert nicht auf Taps. Unabhängig davon, ob die Engine Löcher berücksichtigt oder nicht, erfolgt die Erkennung genau so, wie es sichtbar ist.
04 · Tippen
onClick empfängt den Zustand der Fläche und die angetippten Koordinaten. Ein typischer Anwendungsfall ist das Abrufen von Daten aus Füllung und extra, um Details anzuzeigen.
Der Zustand der getippten Fläche. Daten können aus der Füllfarbe und `extra` abgerufen werden.
Die getippten geografischen Koordinaten.
Auch wenn innerhalb eines Lochs getippt wird, wird das Ereignis dieser Fläche nicht ausgelöst. Nur der sichtbare gefüllte Teil ist betroffen.
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 }),
}));
},Wenn sich Flächen überlappen, hat die obere (die mit dem größeren zIndex) Vorrang. Auch wenn viele Flächen für einen großen Bereich platziert werden, werden Flächen außerhalb des Anzeigebereichs aus der Erkennung ausgeschlossen.