颤振 |如何在 Mapbox 的 markers/symbol 中添加自定义图标

Question

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

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

添加符号（marker）如下：

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 时创建自定义样式。

如果不存在则创建一个新数据集
创建图块集
创建新样式&selectcustomize basic template
创建新图层，为其命名，例如my_sym并添加新创建的数据源
然后单击类型并将其更改为符号
现在点击 my_sym 两次。（第一个将关闭选项菜单，第二个将打开一个带有交易品种属性的新菜单
单击 icon 选项卡和 select 新图标。您也可以上传自己的 svg 图标。
点击发布
点击分享它会显示 urls.
复制 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 中将此图像指定为资产并将 SymbolOptions 中的 iconImage 设置为此路径，它将自动加载。

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

颤振 |如何在 Mapbox 的 markers/symbol 中添加自定义图标

Flutter | how to add custom Icons in Mapbox's markers/symbol

mapbox

flutter