MapConductorPolilínea
Simplemente cree un objeto de estado con una secuencia de coordenadas y un estilo de línea y colóquelo en la vista de mapa. La apariencia, la curvatura y la detección de toques de las líneas tienden a variar según el proveedor, pero MapConductor lo estandariza para obtener el mismo resultado en cualquier proveedor.
01 · Estado de la polilínea
PolylineState representa una sola línea. Contiene una secuencia de coordenadas, un estilo y un controlador de toque. Si modifica las propiedades, la línea se actualiza inmediatamente y no es necesario reconstruirla, incluso en aplicaciones cuya forma de ruta cambia.
val polylineState =
PolylineState(
points = routePoints,
strokeColor = Color.Red,
strokeWidth = 4.dp,
geodesic = true,
onClick = { event -> viewModel.onPolylineClick(event) },
)
// Solo colócalo dentro del mapa
Polyline(polylineState)
// Cambiar la forma es solo reescribir points
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 · Líneas rectas y cursos de gran círculo
Si geodesic es true, dos puntos se unen mediante la ruta más corta en la Tierra (curso de gran círculo). Las rutas de vuelo de larga distancia, por ejemplo, no son rectas sino que describen un arco. Cuando es false, es una línea recta en la proyección del mapa. Puede dibujar ambos y compararlos uno al lado del otro con la misma secuencia de coordenadas.
Polyline(polylineState) // geodesic = true (curvo)
Polyline(
polylineState.copy(
id = "${polylineState.id}-straight",
geodesic = false,
strokeColor = Color.Blue,
),
)content.polylines = [
Polyline(state: polylineState), // Curvo
Polyline(state: polylineState.copy(geodesic: false)) // Recto
]const straightPolyline = polyline.copy({
id: `${polyline.id}-straight`,
geodesic: false,
strokeColor: '#0000ff',
});
<Polyline state={polyline} />
<Polyline state={straightPolyline} />03 · Verse igual en cualquier proveedor
Entre los motores de mapas, hay algunos que pueden dibujar cursos de gran círculo y otros que no, algunos con diferentes unidades de grosor de línea y diferentes formas de tratar las líneas que cruzan la línea de cambio de fecha. Con el SDK sin procesar, la apariencia cambia incluso con la misma secuencia de coordenadas.
MapConductor absorbe esta diferencia internamente. La aplicación simplemente pasa un PolylineState y, en cualquier proveedor, se obtiene el mismo arco, el mismo grosor y el mismo área de toque.
el mismo arco incluso para motores que no pueden dibujar curvas
Para motores que no pueden dibujar directamente rutas de círculo máximo, las líneas se dividen en una secuencia de coordenadas de segmentos finos antes de pasarlas. Como resultado, el mismo arco se muestra en cualquier motor.
Líneas que cruzan la línea de fecha internacional
Para líneas que cruzan el meridiano 180°, algunos motores, si se pasan tal cual, cruzarían la Tierra en la dirección equivocada. Al dividir las líneas en el límite y pasarlas, todos los motores pasan por el lado más corto.
Igualar el criterio de grosor
El grosor de la línea se especifica en unidades lógicas de la plataforma. Como la densidad de píxeles del dispositivo y las diferencias de unidad entre motores se convierten internamente, el grosor visual en el dispositivo real coincide.
La detección de toques también es común
La detección de toques no se deja al motor, sino que se realiza con una lógica común. Dado que el rango de tolerancia del tamaño del dedo se convierte a metros según el zoom, la facilidad de presionar no cambia aunque el nivel de zoom sea diferente. En el caso de curvas, la detección se realiza a lo largo del arco.
04 · Toque
onClick recibe el estado de la línea y la posición tocada en la línea. La posición tocada es una coordenada corregida al punto más cercano de la línea, por lo que puede colocar un marcador en ese lugar o calcular distancias.
El estado mismo de la línea tocada. Puede extraer datos de color y extra.
Coordenadas en la línea. No es la posición del dedo, sino el punto más cercano a la línea.
La detección se realiza con un margen para el tamaño del dedo. Se convierte a metros según el zoom.
// Coloca un marcador en el punto tocado
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 }),
})]);
},Los segmentos de línea fuera del rango visible se excluyen de la detección, por lo que la respuesta no se ralentiza incluso si coloca muchas rutas largas. Si varias líneas se superponen, se selecciona la más cercana.