缩放形状子层 | Syncfusion 地图颤动

Question

我在 Flutter 中使用 Syncfusion Map 插件有问题。

我的代码如下所示：

SfMaps(
  layers: [
    MapShapeLayer(
      source: mapSource,
      zoomPanBehavior: _zoomPanBehavior,
      sublayers: [
        MapShapeSublayer(
          source: sublayerSource,
          strokeColor: Colors.white,
        ),
      ],
      strokeColor: Colors.white,
    ),
  ],
);

这很好用，但是我想在 ZoomLevel 大于 2.0 之后显示 MapShapeSublayer，例如。

可能吗？

Answer 1

您可以在缩放级别大于 2.0 后显示 MapShapeSublayer 使用 OnWillZoom callback. The OnWillZoom 具有缩放详细信息。因此，当缩放级别大于 2.0 时，您可以添加子图层。随附示例和代码片段供您参考。

late MapShapeSource _shapeSource;
late MapShapeSource _sublayerSource;
late MapZoomPanBehavior _zoomPanBehavior;
late List<MapSublayer> _sublayers;

@override
void initState() {
  _shapeSource = const MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );

  _sublayerSource = const MapShapeSource.asset(
    'assets/uk.json',
    shapeDataField: 'name',
  );

  _zoomPanBehavior = MapZoomPanBehavior();
  _sublayers = [];
  super.initState();
}

@override
void dispose() {
  _sublayers.clear();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: SfMaps(
      layers: [
        MapShapeLayer(
          source: _shapeSource,
          zoomPanBehavior: _zoomPanBehavior,
          onWillZoom: _handleOnWillZoom,
          sublayers: _sublayers,
          strokeColor: Colors.white,
        ),
      ],
    ),
  );
}

bool _handleOnWillZoom(MapZoomDetails details) {
  setState(() {
    if (_sublayers.isEmpty && details.newZoomLevel! >= 2) {
      _sublayers.add(MapShapeSublayer(
        source: _sublayerSource,
        color: Colors.blue[100],
        strokeWidth: 1,
        strokeColor: Colors.blue[800],
      ));
    } else if (details.newZoomLevel! < 2) {
      _sublayers.clear();
    }
  });
       return true;
}

缩放形状子层 | Syncfusion 地图颤动

Shape Sublayer on zoom | Syncfusion Map Flutter

syncfusion

geojson

flutter