mapbox / mapbox/mapbox-maps-flutter
[Android] Strange map rendering problems when 3D terrain is enabled
Nessuno ha ancora preso questa issue.
- Lingua principale
- Dart
- Stelle
- 380
- Fork
- 204
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
We have a custom style with 3D terrain enabled and clustered data on the map. When user clicks on the cluster we get the maximum expansion zoom and zoom to that location to uncluster data. If there is more clustered data on that zoom we repeat the step until certain zoom level or until there is no more clustered data and then zoom to level 19 and show some information accordingly. But sometimes when we zoom to certain location it seems like the tiles are failing to load (assumed) until we zoom out to certain level.
In the repro code bellow i removed the clusters logic to simplify it but the problem is reproducible even with 1 feature, and happens only with 3D terrain enabled.
Reproduction code:
```dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
late MapboxMap _map;
void _mapCreated(MapboxMap map) {
_map = map;
}
void _styleLoaded(StyleLoadedEventData event) async {
// not actually needed but we are using mercator projection in the recording
// and in Outdoors v12 style default is globe.
await _map.style.setProjection('mercator');
// This is enabled in Mapbox studio in our apps style.
await _map.style.addSource(RasterDemSource(
id: 'mapbox-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
maxzoom: 14,
tileSize: 512,
));
await _map.style.setStyleTerrain(jsonEncode({'source': 'mapbox-dem', 'exaggeration': 1}));
await _map.style.addSource(GeoJsonSource(
id: 'ex_source_id',
data: jsonEncode(data),
));
await _map.style.addLayer(SymbolLayer(
id: 'ex_layer_id',
sourceId: 'ex_source_id',
// we are using custom icon in the recording but issue is the same
iconImage: 'airport',
iconAnchor: IconAnchor.CENTER,
));
}
Future _onTap(ScreenCoordinate coord) async {
final QueriedFeature? feature = await _getRenderedFeature(coord);
if(feature == null)
return;
Position center = Position.fromJson(
(feature.feature['geometry'] as Map)['coordinates']!.cast(),
);
final CameraOptions camOpt = CameraOptions(
center: Point(coordinates: center).toJson(),
zoom: 19,
);
await _map.flyTo(
camOpt,
MapAnimationOptions(duration: 1000),
);
}
Future _getRenderedFeature(ScreenCoordinate coord) async {
final ScreenCoordinate conv = await _map.pixelForCoordinate(
Point(coordinates: Position(coord.y, coord.x)).toJson(),
);
final List features = await _map.queryRenderedFeatures(
RenderedQueryGeometry(
value: jsonEncode(conv.encode()),
type: Type.SCREEN_COORDINATE,
),
RenderedQueryOptions(layerIds: ['ex_layer_id']),
);
if(features.isEmpty)
return null;
return features.first;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Mapbox Example')),
body: MapWidget(
resourceOptions: ResourceOptions(
accessToken: ,
),
styleUri: 'mapbox://styles/mapbox/outdoors-v12',
onMapCreated: _mapCreated,
onStyleLoadedListener: _styleLoaded,
onTapListener: _onTap,
),
),
);
}
}
const Map data = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'id': 1,
'geometry': {
'type': 'Point',
'coordinates': [0, 0],
},
},
],
};
```
Here is the screen recording of the issue. In the example above there are some differences to the screen recording but still, the issue is the same. The issue is more reproducible when clicking on the feature from higher zoom levels but it happens even on lower zoom levels.
https://user-images.githubusercontent.com/76993460/219371733-f3c41311-36c7-4faa-ab69-bbb9cd43bb49.mp4
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia con il codice di riproduzione, in particolare _styleLoaded, la configurazione del terreno di RasterDemSource e la chiamata a flyTo in _onTap. Riproduci il problema con il MapWidget e la configurazione del terreno forniti, quindi verifica che i tile continuino a essere renderizzati correttamente durante lo zoom fino al livello 19 con il terreno 3D abilitato.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- dart, flutter
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100