mapbox-gl - Mapbox GL JS，添加自定义标记

Question

我正在寻找一种方法，允许我像 Mapbox JS 一样为我的 map 创建一个简单的自定义标记。

深入浏览了网络，似乎没有明显或非常直接的方法来实现这一目标。我猜这是一个被错过的功能。

尝试过使用Mapbox Studio，但仍然没有成功，因为很难理解如何上传自定义 SVG 以及如何引用它们。

举个例子，我使用 Mapbox Studio 创建了一个自定义 map ，据我所知，没有可以使用的图标。确实尝试过寻找一种称为 Sprite 表的东西，但由于我从未使用过这种方法，所以我不知道该怎么做。

我想这不仅对我来说非常重要，而且对很多刚刚开始学习像 Mapbox GL JS 这样的新东西的人来说，附上一份很好的指南非常重要。

这是我的一些关于创建一些自定义标记的代码

markers = {

  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "marker-symbol": "golf",
      "type": "journey-step",
      "previous": "0",
      "current": "1",
      "next": "2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.98114013671872,
        19.70207180765683
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "music",
      "type": "journey-step",
      "previous": "1",
      "current": "2",
      "next": "3"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.67352294921875,
        19.01278705937288
      ]
    }
  }, {
    "type": "Feature",
    "properties": {

      "icon-symbol": "Four",
      "type": "journey-step",
      "previous": "2",
      "current": "3",
      "next": "4"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.2423095703125,
        19.42644883261674
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "theatre",
      "type": "journey-step",
      "previous": "3",
      "current": "4",
      "next": "5"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.10223388671875,
        19.698193071745962
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "alcohol-shop-12",
      "type": "journey-step",
      "previous": "4",
      "current": "5",
      "next": "6"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.38787841796872,
        20.04303061200023
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "theatre",
      "type": "journey-step",
      "previous": "5",
      "current": "6",
      "next": "7"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.8575439453125,
        20.229986070955245
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "theatre",
      "type": "journey-step",
      "previous": "6",
      "current": "7",
      "next": "8"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.89599609375,
        19.46400263520258
      ]
    }
  }]

};
map.addSource("markers", {
  "type": "geojson",
  "data": markers
});

map.addLayer({
  "id": markers,
  "type": "symbol",
  "source": "markers"
});

正如您所猜到的，我的 map 没有显示任何图标。

任何人都可以提出一种良好且易于理解的方法来实现对 map 库至关重要的功能吗？

Answer 1

嗯...

解决方案比我想象的要容易，感谢@tristen 发布有用的链接，我真的希望人们发现它们有用。

我发现最简单的方法就是遵循这些简单的步骤。

1) 使用Mapbox Studio创建自定义 map

2) 将自定义标记/图标上传到图像(只需编辑 map 单击属性(左下角)-> 单击任意图层-> 图标-> 添加 SVG 图像，(如果您自己制作了自定义图标，就像我使用 Adob​​e Illustrator 所做的那样，确保以旧格式保存它们(旧的东西......)，否则你的图标将是黑白的)->并点击保存)

3) 引用您在 JavaScript 文件中创建的 map ，如下所示

map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/username/aasdasdassdfsdfsdfsdf131', //stylesheet location
      center: [ -115.15628814697266,
          36.173079792635654], // starting position
      zoom: 10.5
        // starting zoom
    });

4) 现在您可以引用您的标记/图标，例如我已经上传了名为 golf.svg 的 SVG，因此当我定义图层时，我可以执行以下操作:"marker-符号”:“高尔夫”

差不多就是这样了。