MapConductorFjöllína
Búðu til einn stöðuhlut úr lista af hnitum og útlínustíl og settu hann svo í kortasýnina. Útlit línunnar, hvernig hún sveigist og hvernig snerting er greind vill verða ólíkt milli þjónustuaðila, en MapConductor jafnar það svo niðurstaðan sé sú sama alls staðar.
01 · Staða fjöllínu
PolylineState stendur fyrir eina línu: hnit hennar, útlínu og snertistjóra. Að úthluta á eigind uppfærir línuna á staðnum, svo leið sem breytist þarf aldrei að endurbyggja.
val polylineState =
PolylineState(
points = routePoints,
strokeColor = Color.Red,
strokeWidth = 4.dp,
geodesic = true,
onClick = { event -> viewModel.onPolylineClick(event) },
)
// Settu það einfaldlega inn í kortið
Polyline(polylineState)
// Að breyta forminu er ekkert annað en að endurskrifa 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 · Beinar línur og stórbaugar
Sé geodesic sett á true eru punktarnir tengdir eftir stystu leið yfir hnöttinn, svo löng flugleið teiknast sem bogi frekar en bein lína. Með false færðu beina línu í vörpun kortsins. Sömu hnit má teikna á báða vegu hlið við hlið.
Polyline(polylineState) // geodesic = true (bogadregið)
Polyline(
polylineState.copy(
id = "${polylineState.id}-straight",
geodesic = false,
strokeColor = Color.Blue,
),
)content.polylines = [
Polyline(state: polylineState), // Bogadregið
Polyline(state: polylineState.copy(geodesic: false)) // Beint
]const straightPolyline = polyline.copy({
id: `${polyline.id}-straight`,
geodesic: false,
strokeColor: '#0000ff',
});
<Polyline state={polyline} />
<Polyline state={straightPolyline} />03 · Sama niðurstaða hjá hverjum þjónustuaðila
Sumar vélar geta teiknað stórbauga og aðrar ekki; einingar fyrir línubreidd eru ólíkar; línur sem fara yfir daglínuna eru meðhöndlaðar á ólíkan hátt. Á hráum SDK-um gefa sömu hnit þér ólíkar myndir.
MapConductor jafnar þennan mun innanhúss. Þú réttir einn PolylineState og færð sama boga, sömu þykkt og sama snertisvæði hjá hverjum þjónustuaðila.
Sami boginn jafnvel án stuðnings við sveigjur
Fyrir vélar sem geta ekki teiknað stórbauga er línunni breytt í þéttan lista af hnitum áður en hún er afhent, svo bogatnn sem birtist stemmir alls staðar.
Línur sem fara yfir daglínuna
Gefin óbreytt beina sumar vélar slíkri línu löngu leiðina umhverfis hnöttinn. Að kljúfa hana við mörkin fær hverja vél til að taka styttri hliðina.
Einn grunnur fyrir þykkt
Breiddin er gefin í rökrænum einingum vettvangsins og umreiknuð innanhúss fyrir skjáþéttleika og einingamun milli véla, svo línan lítur jafn þykk út á raunverulegum tækjum.
Sameiginleg smellprófun
Snertigreining er ekki eftirlátin vélinni. Vikmörk á stærð við fingurgóm eru umreiknuð í metra fyrir núverandi aðdrátt, svo línur haldast jafn auðhittanlegar í hvaða kvarða sem er; línur eftir stystu leið eru prófaðar eftir boganum.
04 · Snerting
onClick tekur við stöðu línunnar og staðsetningunni sem snert var eftir henni. Sú staðsetning er felld að næsta punkti á línunni, svo þú getur sleppt merki þar eða mælt út frá henni.
Staða línunnar sem snert var — lestu lit hennar eða extra-gögnin.
Hnit á línunni: næsti punktur, ekki hrá staðsetning fingursins.
Spássía á stærð við fingurgóm, umreiknuð í metra fyrir núverandi aðdrátt.
// Slepptu merki þar sem snert var
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 }),
})]);
},Bútum utan sýnilega svæðisins er sleppt, svo margar langar leiðir haldast lipur. Þar sem línur skarast vinnur sú næsta.