2

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

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

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

4

2 回答 2

3

出色地...

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

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

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

2）将您的自定义标记/图标上传到图像（只需编辑您的地图单击属性（左下角）->单击任何图层->图标->添加SVG图像，（如果您自己制作了自定义图标，就像我一样使用 Adob​​e 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"

差不多就是这样。

于 2017-03-10T09:55:40.030 回答
2

一些链接：

  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

于 2016-05-23T18:25:48.387 回答