Mapbox GL JS，添加自定义标记答案

【问题标题】：Mapbox GL JS, Add custom markersMapbox GL JS，添加自定义标记
【发布时间】：2016-05-22 18:10:52
【问题描述】：

我正在寻找一种方法，可以像Mapbox JS 那样为我的地图创建一个简单的自定义标记。

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

尝试使用Mapbox Studio 进行了几次尝试，但仍然没有运气，因为很难理解如何上传自定义 SVG 并能够引用它们。

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

我想这不仅对我来说非常重要，而且对于很多刚刚开始学习新知识的人来说，比如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"
});

你可以猜到，我的地图没有显示任何图标。

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

【问题讨论】：

你如何初始化你的地图？
我自己确实找到了答案，很快就会发布答案。将为像我这样的菜鸟提供一个小指南。

标签： mapbox-gl mapbox-gl-js

【解决方案1】：

嗯……

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

我发现最简单的方法就是按照这些简单的步骤进行操作。

1) 使用Mapbox Studio创建自定义地图

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

3) 像这样引用您在 JavaScript 文件中创建的地图

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-symbol": "golf"

差不多就是这样。

【讨论】：

【解决方案2】：

一些链接：

这里有关于在 Studio 中创建自定义标记并将它们添加到 Mapbox GL JS 地图的文档：https://www.mapbox.com/help/custom-markers/
虽然我不赞成这样做，但这里有一个使用自定义 DOM 元素在地图上绘制点的示例：http://bl.ocks.org/tristen/10b69f89b600ca0433fdc472db6a6cab
此评论（和讨论！）提供了有关为什么显示自定义标记之类的用例需要几个额外步骤的背景故事：https://github.com/mapbox/mapbox-gl-js/issues/656#issuecomment-216305579

【讨论】：