mapbox / mapbox/mapbox-maps-flutter
Tapped layer color change using layer's id within properties
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- Dart
- Sterne
- 380
- Forks
- 204
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
I am trying to change the tapped layer color only using pond_id inside my layer response.. when i tap the feature state returns true but the color is not changing "#E27E1E", my featuredata of tapped layer id :
Tapped feature ID: {type: Feature, id: 22, geometry: {type: Polygon, coordinates: [[[81.4860383, 16.5046304], [81.4888948, 16.5045532], [81.4888412, 16.5036197], [81.4868027, 16.5036557], [81.4862716, 16.5036248], [81.4860383, 16.5046304]]]}, properties: {pond_id: 16108c29-e6eb-4ee6-94a1-56c8a16cc167}}
`await mapboxMap?.style.addLayer(
FillLayer(
id: 'pond_boundary_tile1_fill',
sourceId: 'pond_boundary_tile1_source',
sourceLayer: 'ponds_WG_b2-2ttlya',
fillColorExpression: [
'case',
[
'boolean',
['feature-state', 'selected'],
false
],
"#E27E1E",
[
"in",
["get", "pond_id"],
["literal", allPondIds]
],
"#004fbb",
"#DBDBDB",
],
),
);
Future onTapListener(MapContentGestureContext context,
Function(bool) onFeatureSelected) async {
final touchPosition = context.touchPosition;
// print("Coordinates: (${touchPosition.x}, ${touchPosition.y})");
final List<QueriedRenderedFeature?> features =
await mapboxMap!.queryRenderedFeatures(
RenderedQueryGeometry(
value: jsonEncode(touchPosition.encode()),
type: Type.SCREEN_COORDINATE,
),
RenderedQueryOptions(
layerIds: ['pond_boundary_tile1_fill'], filter: null),
);
if (features.isNotEmpty) {
final QueriedFeature selectedFeature = features.first!.queriedFeature;
final featureData = selectedFeature.feature;
final featureModel = FeatureModel.fromJson(
Map<String, dynamic>.from(featureData),
);
isLoading.value = true;
final pondId = featureModel.tappedId;
print("Tapped feature properties ID: $pondId");
featureId.value = selectedFeature.feature['id'].toString();
print("Tapped feature ID: $featureData");
appController.setFeatureId = submittedId;
// selectedFeatureId = featureId.value;
if (selectedFeatureId != null && selectedFeatureId != pondId) {
mapboxMap?.setFeatureState(
'pond_boundary_tile1_source',
'ponds_WG_b2-2ttlya',
selectedFeatureId!,
jsonEncode({'selected': false}),
);
}
print("Setting feature state for pondId: $pondId");
mapboxMap?.setFeatureState(
'pond_boundary_tile1_source',
'ponds_WG_b2-2ttlya',
pondId,
jsonEncode({'selected': true}),
);
final featureState = await mapboxMap?.getFeatureState(
'pond_boundary_tile1_source',
'ponds_WG_b2-2ttlya',
pondId,
);
print("Updated Feature state: $featureState");
}
}
}`
please help me to fix asap.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginnen Sie am Einstiegspunkt onTapListener und verfolgen Sie den FillLayer fillColorExpression zusammen mit den setFeatureState-Aufrufen für pond_boundary_tile1_source und ponds_WG_b2-2ttlya. Überprüfen Sie, ob die für den Status verwendete Kennung des angetippten Features mit der vom Layer erwarteten Kennung übereinstimmt, und bestätigen Sie anschließend, dass der ausgewählte Teich zu #E27E1E wechselt, während die anderen Teiche ihre Farben behalten.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- dart, flutter
- Bereich
- mobile-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 42/100