颤振如何在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是一个字符串，是一个字段，其中应该包含有关图标的数据（显然），但是给定的example repository并未阐明所需的参数（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资源。