如何在Mapbox中通过网址添加自定义标记？

Question

我根据地图框示例创建了地图。那里的标记设置为“圆圈”。在以下代码的情况下，如何通过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
      }
    });
  }
);

Answer 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）。