如何在Mapbox中添加自定义图标？

在Mapbox中添加自定义图标通常涉及几个步骤：

1. **准备图标**：首先，你需要创建一个SVG (Scalable Vector Graphics) 文件，或者使用其他矢量图形工具设计你的地图标记图标。确保图标简洁且易于识别，并尽可能小以便于加载。

2. **转换为Base64编码**：将SVG文件转换为Base64格式的数据，因为Mapbox GL JS需要数据作为内嵌资源。有许多在线工具可以帮助你完成这个转换，例如`data:image/svg+xml;base64,...`这样的格式。

3. **在Mapbox配置中引用**：在你的Mapbox项目的样式 `.mapboxgl-style.json` 中，找到 `icon-image` 属性并替换为你的Base64编码的URL。例如：

{
  "markers": {
    "icon-size": 20,
    "icon-image": "url('data:image/svg+xml;utf8,<svg>...</svg>')"
  }
}

4. **使用Marker功能**：当你在JavaScript中创建`L.mapbox.marker()` 或 Mapbox GL JS 的 Marker 实例时，可以指定自定义图标：

   L.mapbox.marker([yourLatitude, yourLongitude], {
     iconImage: 'url("your_base64_icon_url")',
   }).addTo(map);

或者在GL JS：

   new mapboxgl.Marker().setLngLat([lng, lat])
       .setImage('url("your_base64_icon_url")')
       .addTo(map);

5. **测试和调整**：在浏览器或Mapbox GL JS沙箱中测试你的图标是否显示正常，如果需要的话，你可以调整大小、旋转等属性。