Как добавить пользовательский маркер по URL-адресу в Mapbox?

Я построил свою карту на примере 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
      }
    });
  }
);

mapbox mapbox-gl-js mapbox-gl mapbox-marker
person Viktoria O    schedule 30.10.2020    source источник
comment
Что-то вроде этого docs.mapbox.com/mapbox-gl- js / example / custom-marker-icons?   -  person Anatoly Sukhanov    schedule 30.10.2020
comment
Я не вижу отношения включенного фрагмента кода к вопросу. Вы спрашиваете о Marker или symbol слоях?   -  person Steve Bennett    schedule 31.10.2020
comment
Включенный фрагмент кода создает маркеры на моей карте. Данные взяты из электронной таблицы CSV. Знаю, как изменить маркер на пользовательский в случае «стандартного» решения (пример Анатолия), когда все данные помещаются непосредственно в код, а не из CSV и превращаются в слой. Это моя борьба.   -  person Viktoria O    schedule 03.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно использовать 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);

});

Затем вам нужно использовать ссылку символьный слой этот значок (в данном случае kitten).

person Steve Bennett    schedule 04.11.2020