0

我使用 flutter_map 库，并且我有一个我命名为 POI（兴趣点）的对象数组，这些对象显示在地图上。每个 poi 都有一个名为 type 的值，可以是“map_eglise”、“map_basilique”等……它们都显示在我的地图上，当显示很多 poi 时会导致很多滞后。

我只想在地图上显示关于缩放级别的某种类型的 poi。我知道如何获得缩放级别（在我的mapController.zoom），但我不知道如何pois使用缩放级别过滤我的数组和对象。我编写了一个名为的函数getFiltersByZoom，我认为它可能很有用，但目前我没有找到使用它的方法。

Widget build(BuildContext context) {
    return Scaffold(
        extendBody: true,
        body: FlutterMap(
          options: MapOptions(
            center: LatLng(43.69653967432033, 7.27036144753221),
            zoom: 15.0,
            minZoom: 4.0,
            maxZoom: 18.0,
            interactiveFlags: InteractiveFlag.all & ~InteractiveFlag.rotate,
          ),
          mapController: mapController,
          layers: [
            TileLayerOptions(
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png',
                subdomains: ['a', 'b', 'c'],
            ),
            MarkerLayerOptions(
              markers: [
                for (var poi in pois)...[
                  Marker(
                    point: LatLng(double.parse(poi.latitude), double.parse(poi.longitude)),
                    builder: (context) => Image.asset('assets/markers/pin_${poi.type}.png'),
                  ),
                ]
              ]//markers
            ),
          ],
        ),
    );

List<String> getFiltersByZoom(zoom) {
  switch (zoom) {
    case 6:
    case 7:
    case 8:
      return ["map_basilique", "map_cathedrale"];
    case 9:
    case 10:
      return ["map_basilique", "map_cathedrale", "special_paroisse"];
    case 11:
      return ["map_basilique", "map_cathedrale", "special_paroisse", "map_eglise"];
    default:
      return ["detail_art", "map_basilique", "map_cathedrale", "map_chapelle", "map_eglise", "map_hotel", "map_monastere", "map_oratoire", "map_sanctuaire", "special_paroisse"];
  }
}
4

1 回答 1

1

您应该更新标记层选项

MarkerLayerOptions(
              markers: [
                for (var poi in pois)...[
                  Marker(
                    point: LatLng(double.parse(poi.latitude), double.parse(poi.longitude)),
                    builder: (context) => Image.asset('assets/markers/pin_${poi.type}.png'),
                  ),
                ]
              ]
            ),

像这样：

MarkerLayerOptions(markers: filteredMarkers(zoom.toInt(), pois)),

这是要实现的功能：

List<Marker> filteredMarkers(int zoom, List<Poi> pois) {
List<Marker> markers = [];
List<String> filtered = getFiltersByZoom(zoom);

pois.forEach((poi) {
  if (filtered.contains(poi.type)) {
      markers.add(
        Marker(
          point: LatLng(double.parse(poi.latitude), double.parse(poi.longitude)),
          builder: (context) => Image.asset('assets/markers/pin_${poi.type}.png'),
        ),
      );
  }
});
return markers;
于 2021-05-19T14:18:57.913 回答