颤动|如何在 Mapbox 的标记/符号中添加自定义图标

Question

我想知道如何在 Flutter-Mapbox 插件的标记中使用自己的图标？

没有默认的标记图标（没有提供的图标 - 无标记）， 并且没有足够的关于如何使用自定义图像的文档。

添加符号（标记）如下：

mapController.addSymbol(
      SymbolOptions(
           geometry:LatLng(0.0, 0.0), // location is 0.0 on purpose for this example
           iconImage: "pin"
         )
      );

而

IconImage

（一个字符串）是应该包含有关图标的数据的字段（显然），但是给定的 示例存储库 没有阐明所需的参数（url、路径等）。

提供资产路径不起作用（与其他小部件不同）。在示例中，他们为 IconImage 字段提供值

airport-15

，并且在运行应用程序时，它实际上可以工作，但我似乎找不到资源的位置（它不在 @drawables 或我的资产文件夹中，或任何项目中的其他地方）

Answer 1

您必须使用

MapBox Studio

创建自定义样式。

1. 创建一个新的数据集（如果尚不存在）
2. 创建图块集
3. 创建新样式并选择

   customize basic template

4. 创建新图层，为其命名，例如

   my_sym

   并添加新创建的数据源
5. 然后单击类型并将其更改为符号
6. 现在点击

   my_sym

   两次。 （第一个将关闭选项菜单，第二个将打开一个包含符号属性的新菜单
7. 单击

   icon

   选项卡并选择新图标。您还可以上传自己的 svg 图标。
8. 点击发布
9. 点击分享，它会显示网址。
10. 复制 url 类型并设置

    styleString

    属性。

欲了解更多信息，请按照此处的步骤操作 https://docs.mapbox.com/help/tutorials/add-points-pt-1/

API参考： https://docs.mapbox.com/mapbox-gl-js/api/

Answer 2

从版本 0.0.5 开始，可以为标记加载自定义图标图像。我们的想法是将图标图像添加到您的资产文件夹中（例如：

assets/symbols/custom-icon.png

）。如果您在 pubspec.yaml 中将此图像指定为资产，并将

iconImage

中的

SymbolOptions

设置为此路径，它将自动加载。

关于

airport-15

，这是插件的 Android 实现提供的图标。它是 Mapbox 中使用的 Maki 图标的一部分。因为这些图标是 Android 实现的一部分，所以您找不到示例应用程序的 Flutter 资源或 Android 资源。

Answer 3

1. 安装

   flutter_svg

   ：

flutter pub add flutter_svg

2. 将图标文件放入

   ./assets/images/pin.svg

3. 将资产添加到

   pubspec.yaml

   :

flutter:
  assets:
    - assets/images/pin.svg

3. 转换 svg:

  Future<void> _addCustomIcon() async {
    const String svgPath = 'assets/images/pin.svg';
    final rawSvg = await rootBundle.loadString(svgPath);
    final PictureInfo pictureInfo =
        await vg.loadPicture(SvgStringLoader(rawSvg), null);

    final Canvas canvas = Canvas(ui.PictureRecorder());
    canvas.drawPicture(pictureInfo.picture);

    final ui.Image image = await pictureInfo.picture.toImage(25, 25);
    final ByteData? byteData =
        await image.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List uint8List = byteData!.buffer.asUint8List();

    mapController.addImage('pin', uint8List);
  }

4. 使用图标：

mapController.addSymbol(SymbolOptions(
                  ...,
                  iconImage: 'pin');