如何在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
      }
    });
  }
);

解决方法

您需要使用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）。