如何在 Mapbox 中通过 url 添加自定义标记？答案

【问题标题】：How to add a custom marker by url in Mapbox?如何在 Mapbox 中通过 url 添加自定义标记？
【发布时间】：2020-10-30 13:32:48
【问题描述】：

我的地图基于 mapbox 示例。那里的标记设置为“圆圈”。如果出现以下代码，如何通过url添加自定义标记？

function makeGeoJSON(csvData) {
csv2geojson.csv2geojson(
  csvData,
  {
    latfield: "Latitude",
    lonfield: "Longitude",
    delimiter: ","
  },
  function(err, data) {
    data.features.forEach(function(data, i) {
      data.properties.id = i;
    });

    geojsonData = data;
    // Add the the layer to the map
    map.addLayer({
      id: "locationData",
      type: "circle",
      source: {
        type: "geojson",
        data: geojsonData
      },
      paint: {
        "circle-radius": 5, // size of circles
        "circle-color": "green", // color of circles
        "circle-stroke-color": "white",
        "circle-stroke-width": 1,
        "circle-opacity": 0.7
      }
    });
  }
);

【问题讨论】：

类似docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons ?
我看不到包含的代码 sn-p 与问题的相关性。你问的是Markers 还是symbol 层？
包含的代码 sn-p 在我的地图上创建标记。数据取自 CSV 电子表格。在“标准”解决方案（Anatoly 示例）的情况下，知道如何更改自定义标记，其中所有数据都直接放在代码中，而不是来自 CSV 并转换为图层。这就是我的奋斗目标。

标签： mapbox mapbox-gl-js mapbox-gl mapbox-marker

【解决方案1】：

您需要使用map.loadImage 和map.addImage 来添加自定义图标，如以下 Mapbox 示例：

map.loadImage('http://placekitten.com/50/50', function(error, image) {

    if (error) throw error;
    // Add the loaded image to the style's sprite with the ID 'kitten'.
    map.addImage('kitten', image);

});

那么您需要使用 symbol layer 引用该图标（在本例中为 kitten）。

【讨论】：