MapConductorPolyline
Erstellen Sie einfach ein Zustandsobjekt mit einer Koordinatenfolge und einem Linienstil und platzieren Sie es in der Kartenansicht. Das Aussehen, die Biegung und die Tap-Erkennung von Linien variiert je nach Anbieter oft stark, aber MapConductor gleicht dies ab, sodass auf jedem Anbieter das gleiche Ergebnis erzielt wird.
01 · Zustand der Polyline
PolylineState stellt eine einzelne Linie dar. Sie enthält eine Koordinatenfolge, einen Stil und einen Tap-Handler. Wenn Sie Eigenschaften ändern, wird die Linie sofort aktualisiert; ein Neuaufbau ist selbst bei Apps, deren Routenform sich ändert, nicht erforderlich.
val polylineState =
PolylineState(
points = routePoints,
strokeColor = Color.Red,
strokeWidth = 4.dp,
geodesic = true,
onClick = { event -> viewModel.onPolylineClick(event) },
)
// Einfach in die Karte setzen
Polyline(polylineState)
// Die Form ändert man, indem man points neu schreibt
polylineState.points = nextPointslet polylineState = PolylineState(
points: routePoints,
strokeColor: .red,
strokeWidth: 4.0,
geodesic: true,
onClick: { event in viewModel.onPolylineClick(event) }
)
content.polylines = [Polyline(state: polylineState)]const polylineState = createPolylineState({
id: 'demo-polyline',
points,
strokeColor: '#e74c3c',
strokeWidth,
geodesic: true,
onClick: event => showToast(event.clicked),
});
<Polyline state={polylineState} />02 · Gerade Linien und Großkreise
Wenn geodesic auf true gesetzt ist, werden zwei Punkte durch die kürzeste Route auf der Erde (Großkreis) verbunden. Langstrecken-Flugrouten verlaufen nicht gerade, sondern beschreiben einen Bogen. Bei false handelt es sich um eine gerade Linie in der Kartenprojektion. Mit derselben Koordinatenfolge können beide Varianten nebeneinander gezeichnet und verglichen werden.
Polyline(polylineState) // geodesic = true (gekrümmt)
Polyline(
polylineState.copy(
id = "${polylineState.id}-straight",
geodesic = false,
strokeColor = Color.Blue,
),
)content.polylines = [
Polyline(state: polylineState), // Gekrümmt
Polyline(state: polylineState.copy(geodesic: false)) // Gerade
]const straightPolyline = polyline.copy({
id: `${polyline.id}-straight`,
geodesic: false,
strokeColor: '#0000ff',
});
<Polyline state={polyline} />
<Polyline state={straightPolyline} />03 · Auf jedem Anbieter gleich aussehen
Unter den Karten-Engines gibt es solche, die Großkreise zeichnen können, und solche, die es nicht können; es gibt Unterschiede bei den Einheiten der Linienstärke und bei der Behandlung von Linien, die die Datumsgrenze überschreiten. Wenn Sie das nackte SDK verwenden, kann sich das Aussehen bei derselben Koordinatenfolge ändern.
MapConductor absorbiert diese Unterschiede intern. Die App-Seite übergibt einfach ein einziges PolylineState, und auf jedem Anbieter ergeben sich derselbe Bogen, dieselbe Stärke und derselbe Tap-Bereich.
dieselbe Kurve auch für Engines, die keine Kurven zeichnen können
Für Engines, die keine Großkreis-Kurse direkt zeichnen können, werden die Linien in eine Koordinatenfolge unterteilt, bevor sie übergeben werden. Als Ergebnis wird auf jeder Engine derselbe Bogen angezeigt.
Linien, die die Datumsgrenze überschreiten
Bei Linien, die den 180. Längengrad überschreiten, gibt es Engines, die bei direkter Übergabe die Erde in der falschen Richtung durchqueren. Indem die Linien an der Grenze geteilt übergeben werden, wird auf jeder Engine die kürzeste Route gewählt.
Gleicher Maßstab für die Dicke
Die Linienstärke wird in logischen Einheiten der Plattform angegeben. Da die Pixeldichte des Endgeräts und Einheitenunterschiede zwischen den Engines intern umgerechnet werden, stimmt die sichtbare Dicke auf dem echten Gerät überein.
Auch die Tapperkennung ist gemeinsam
Die Tapperkennung wird nicht dem Engine überlassen, sondern mit einer gemeinsamen Logik durchgeführt. Da der Toleranzbereich für die Fingergröße in Meter umgerechnet wird, je nach Zoom, ändert sich die Leichtigkeit des Drückens nicht, auch wenn der Zoomfaktor unterschiedlich ist. Bei Kurven wird entlang des Bogens erkannt.
04 · Tap
onClick empfängt den Linienzustand und die Position, die auf der Linie getappt wurde. Die Tap-Position ist eine Koordinate, die auf den nächstgelegenen Punkt der Linie korrigiert wurde, sodass Sie an diesem Ort einen Marker platzieren oder Entfernungen berechnen können.
Der Status der getippten Linie selbst. Daten können aus Farbe und extra abgerufen werden.
Koordinaten auf der Linie. Nicht die Fingerposition, sondern der Punkt, der der Linie am nächsten liegt.
Die Erkennung erfolgt mit einem Spielraum für die Fingergröße. Dieser wird je nach Zoom in Meter umgerechnet.
// Am angetippten Punkt einen Marker absetzen
fun onPolylineClick(event: PolylineEvent) {
markers = markers + MarkerState(
position = event.clicked,
animation = MarkerAnimation.Drop,
icon = DefaultMarkerIcon(fillColor = event.state.strokeColor),
)
}func onPolylineClicked(_ event: PolylineEvent) {
markerState = MarkerState(
position: GeoPoint.from(position: event.clicked),
icon: DefaultMarkerIcon(fillColor: event.state.strokeColor)
)
}onClick: event => {
setClickMarkers(prev => [...prev, createMarkerState({
id: `polyline-click-${prev.length}`,
position: event.clicked,
animation: MarkerAnimation.Drop,
icon: new ColorDefaultIcon({ fillColor: event.state.strokeColor }),
})]);
},Linienabschnitte außerhalb des sichtbaren Bereichs werden von der Erkennung ausgeschlossen, sodass auch bei vielen langen Routen keine Verlangsamung auftritt. Wenn mehrere Linien überlappen, wird die nächstgelegene Linie ausgewählt.