时间戳

首页 > 解决方案 > 如何在 Mapbox 中通过 url 添加自定义标记？

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

问题描述

我的地图基于 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
      }
    });
  }
);

标签： mapboxmapbox-gl-jsmapbox-glmapbox-marker

解决方案

您需要使用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（在本例中）。

推荐阅读