dart 如何在Flutter MapboxGL中自定义Map符号？

bz4sfanl 于 2023-06-19 发布在 Flutter

关注(0)|答案(1)|浏览(159)

我目前在我的应用程序中使用Mapbox Flutter GL，我试图将各种用户显示为图像。
目前，这是通过获取位置和个人资料照片，通过addSymbols()将它们显示在Map上，如下所示：

void _setOnlineUserLocationsOnMap() async {
    for (User onlineUser in _onlineUsers) {
      Uint8List profilePhotoBytes = await getImage(onlineUser.photo!);
      // Uint8List markerImage = await loadMarkerImage();
      _mapController.addImage(onlineUser.username!, profilePhotoBytes);
    }

    List<SymbolOptions> symbols =
        _onlineUsers.map((User? onlineUser) {
      if (onlineUser != null) {
        return SymbolOptions(
          geometry: LatLng(
              onlineUser.location!.latitude, onlineUser.location!.longitude),
          iconImage: onlineUser.username,
          iconSize: 0.2,
          draggable: false,
        );
      }
      return SymbolOptions();
    }).toList();

    _mapController.addSymbols(symbols);
  }

然而，“符号”的局限性相当有限。该图像显示为一个正方形图片，因为这是如何上传到数据库，但是-我想添加更多的功能周围的符号。
我想做的主要事情是把“符号”变成一个小部件，你可以添加ClipRect，boxDecoration，可能还有手势识别器。
这在当前版本的Flutter-MapboxGL中是否可行？

dart

来源：https://stackoverflow.com/questions/73520251/how-to-customise-map-symbols-in-flutter-mapboxgl

1条答案

按热度按时间

6yt4nkrj1#

所以，我想出了一个解决这个问题的方法。解决方案是一个名为Screenshot的flutter pub。
整个软件包是一个屏幕热为您的应用程序，但你可以选择它是什么，你想采取截图。这可以是整个页面，页面的一部分，甚至只是一个小部件。
该软件包的优点在于它能够在屏幕外为您构建一个小部件，并将其截图以返回对应于图像的Uint8List字节。
因此，我构建了一个带有普通CircleAvatar小部件边框的小部件，您可以在其中传递其他属性，然后截取小部件的屏幕截图，并在通过addImage()添加到Mapbox mapController时使用它
下面是一个为您完成此任务的util代码示例

import 'package:screenshot/screenshot.dart';

ScreenshotController screenshotController = ScreenshotController();

// Reading bytes from a network image
Future<Uint8List> getImageForUserMarker(
    String firstName, String lastName, String photoUrl) async {
  Uint8List imageBytes =
      await screenshotController.captureFromWidget(UserImageMarker(
    firstName: firstName,
    lastName: lastName,
    photoUrl: photoUrl,
  ));
  return imageBytes;
}

赞(0）回复(0）举报 2023-06-19

我来回答

dart 如何在Flutter MapboxGL中自定义Map符号？

1条答案

相关问题

热门标签

最新问答