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

一些链接：

此处有关于在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

Answer 2

嗯...

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

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

1）使用Mapbox Studio

创建自定义地图

2）将自定义标记/图标上传到图片（只需编辑地图点击属性（左下角） - ＆gt;点击任意图层 - ＆gt;图标 - ＆gt;添加SVG图片，（如果您已自定义）图标本身，就像我使用Adobe Illustrator一样，确保以旧格式保存它们（传统的东西......），或者你的图标将是黑白的） - ＆gt;并点击保存）

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"

这就是它。

Mapbox GL JS，添加自定义标记

2 个答案: