Mapbox GL JS，添加自定义标记

Question

我正在寻找一种方法，可以让我像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"
});

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

任何人都可以建议一种良好且可理解的方式来实现对地图库至关重要的东西吗？

Answer 1

一些链接：

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

Answer 2

好...

解决方案比我想象的要容易，感谢@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）现在你可以参考你的标记/图标，例如我上传的和SVG叫做golf.svg所以当我定义我的图层时我可以这样做："marker-symbol": "golf"

这就是它。