MapConductorPolígono
Una superficie con una secuencia de coordenadas del perímetro y cualquier cantidad de agujeros (holes). Al colocarla en la vista del mapa con estilos de relleno y de línea, puede mostrar áreas o representar máscaras. El manejo de agujeros varía según el SDK del mapa, pero MapConductor asegura que se vea igual en todos los proveedores.
01 · Estado del polígono
PolygonState representa una sola superficie. Tiene perímetro, agujeros, relleno, línea y controlador de toque. Si modifica las propiedades, la forma se actualiza instantáneamente. Una interfaz de usuario que permite editar la forma arrastrando marcadores de vértices se puede crear simplemente reemplazando la secuencia de coordenadas.
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)
// Los vértices y huecos se actualizan con solo reescribirlos
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 · Combinación de agujeros (holes) y superposiciones
Un agujero es un área que se recorta del perímetro exterior. En representaciones de máscaras, a menudo se colocan múltiples "lugares que se quieren mostrar" como agujeros, en cuyo caso es natural que los agujeros se superpongan.
Muchos SDK de mapas dibujan una línea de contorno en la parte superpuesta si se pasan agujeros superpuestos directamente, haciendo visible el límite entre los agujeros. Dado que MapConductor une los agujeros pasados antes de dibujarlos, la superposición se trata como un solo agujero y no aparecen líneas adicionales.
// Puedes pasar huecos superpuestos tal cual; se unen en uno internamente
PolygonState(
points = outerRing,
holes =
listOf(
triangleA, // ← se superponen
triangleB,
),
fillColor = Color(0xCC787880),
)// Puedes pasar huecos superpuestos tal cual; se unen en uno internamente
let state = PolygonState(
points: outerRing,
fillColor: UIColor(white: 0.47, alpha: 0.8),
holes: [triangleA, triangleB]
)// Puedes pasar huecos superpuestos tal cual; se unen en uno internamente
const state = createPolygonState({
id: 'world-hole',
points: OUTER_POINTS,
holes, // Dos triángulos que se superponen
fillColor: 'rgba(120, 120, 128, 0.8)',
strokeColor: '#ef4444',
strokeWidth: 2,
});03 · Se ve igual en cualquier proveedor
Además de la superposición de agujeros, el dibujo de superficies tiene otras áreas donde es probable que aparezcan diferencias según el motor. MapConductor las absorbe internamente y asegura que, desde el mismo PolygonState, se obtenga el mismo dibujo.
Combinar agujeros superpuestos
Las superposiciones entre agujeros se combinan en una sola área en la etapa de creación del estado. Las líneas de contorno no aparecen en las partes superpuestas y no hay doble relleno.
La misma forma para motores que no pueden dibujar curvas
Para motores que no pueden dibujar rutas de gran círculo directamente, los bordes se convierten en una secuencia de coordenadas subdivididas y luego se pasan. Las formas coinciden incluso en áreas de gran escala.
Áreas que cruzan la línea de cambio de fecha
Las áreas que cruzan el meridiano 180 se dividen en el límite y se pasan. Incluso en motores que resultan en un relleno que cruza la Tierra en dirección inversa, se rellena el lado correcto.
La detección de toques también es común
La detección de toques se realiza con una lógica común; el interior de los agujeros no responde a toques. Independientemente de si el motor considera los agujeros o no, la detección se realiza tal como se ve.
04 · Toque
onClick recibe el estado de la superficie y las coordenadas tocadas. Un uso típico es extraer datos de fill y extra para mostrar detalles.
El estado del área tocada. Se pueden recuperar datos del color de relleno y `extra`.
Las coordenadas geográficas tocadas.
Incluso si se toca dentro de un agujero, no se activa el evento de esa área. Solo la parte visible del relleno es objeto de la detección.
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 }),
}));
},Cuando las superficies se superponen, tiene prioridad la superior (la con mayor zIndex). Incluso si se colocan muchas superficies en un área grande, las superficies fuera del rango de visualización se excluyen de la detección.