Mapbox之sprite精灵图

最新推荐文章于 2026-06-06 10:41:06 发布

原创最新推荐文章于 2026-06-06 10:41:06 发布 · 2.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

mapbox地图

一、 sprite精灵图组成要素

1. 一张排满了小图标的.png图片

mapbox为android提供的样式有如下几种:

// 街道图
public static final String MAPBOX_STREETS = "mapbox://styles/mapbox/streets-v11";
// 户外图
public static final String OUTDOORS = "mapbox://styles/mapbox/outdoors-v11";
// 高亮图
public static final String LIGHT = "mapbox://styles/mapbox/light-v10";
// 夜间图
public static final String DARK = "mapbox://styles/mapbox/dark-v10";
// 卫星图
public static final String SATELLITE = "mapbox://styles/mapbox/satellite-v9";
// 卫星街道图
public static final String SATELLITE_STREETS = "mapbox://styles/mapbox/satellite-streets-v11";
// 路况高亮图
public static final String TRAFFIC_DAY = "mapbox://styles/mapbox/traffic-day-v2";
// 路况夜间图
public static final String TRAFFIC_NIGHT = "mapbox://styles/mapbox/traffic-night-v2";

1.1 不同的样式可能使用的相同的sprite精灵图，也可能使用不同的sprite精灵图

举个例子：例如高亮图和夜间图，根据官方精灵图地址https://www.mapbox.com/maki-icons/你会发现列表里都是黑色的图标符号，这在高亮图上展示没有问题，但在夜间图就会和黑色背景融合看不见，所以夜间图的地图样式一定会有自己的一套sprite精灵图。

1.2 如何查找mapbox某种地图样式的sprite精灵图有哪些

精灵图必然是一张.png的图片，但由于找不到官方样式的精灵图图片，这里就没有展示。

但是可以尝试用Mapbox Studio创建一个与android样式对应的基础图，然后在images列表里查看精灵图列表，列表里以-11和-15结尾的android基本也能用，其它像素大小的肯定没有。这里以一个黑色主题的基础图为例，能看到它的精灵图是黑色边框白色填充的图片：
在这里插入图片描述

2. 一个配置了所有小图标起始位置和宽高的.json文件

.json文件会以如下的格式配置每一个小图标，其中"poi"就是小图标的名字，使用时只传入名字就可以使用，里面的xy为起始位置，还有宽高就可以完全确定小图标：

{
    "poi": {
        "width": 32,
        "height": 32,
        "x": 0,
        "y": 0,
        "pixelRatio": 1
    }
}

二、 sprite精灵图如何使用

地图样式中只要通过"sprite": "对应精灵图的地址"配置了精灵图，那么在任何图层都可以使用其中的图标，可以使用的属性有background-pattern, fill-pattern, line-pattern, fill-extrusion-pattern, icon-image。android端最常用的就是icon-image了。如下为一段使用示例，里面的volcano-15就是对火山图标的使用，示例是添加在DARK样式里：

String pointSID = "aiorhawgieg_one";
String pointLID = "aouhguioeawhuifhawip_one";
GeoJsonSource source = mapboxMap.getStyle().getSourceAs(pointSID);
if (source == null) { // 首次添加
      source = new GeoJsonSource(pointSID);
      List<Feature> features = new ArrayList<>();
      features.add(Feature.fromGeometry(Point.fromLngLat(latLng.getLongitude(), latLng.getLatitude())));
      source.setGeoJson(FeatureCollection.fromFeatures(features));
      mapboxMap.getStyle().addSource(source);

      SymbolLayer layer = new SymbolLayer(pointLID, pointSID);
      layer.withProperties(
              PropertyFactory.iconImage("volcano-15"),
              PropertyFactory.iconAllowOverlap(true),
              PropertyFactory.iconAnchor(Property.ICON_ANCHOR_BOTTOM)
      );
      mapboxMap.getStyle().addLayer(layer);
}

maobox是可以加载自定义的地图样式，那么在使用sprite精灵图时就要清楚自定义的样式使用的是哪套图，使用时只能用对应.json文件里配置的图标名字。

三、如何使用精灵图外的其它图片

对于android项目中又设计的图标，只能先用mapboxMap.addImage(@NonNull String name, @NonNull Bitmap image);把图片添加到MapboxMap对象中，不过这种图标不是对应样式，而是对应MapboxMap对象，只要MapboxMap对象未销毁，图标就能使用。这是对Mapbox老版本的理解，新版本用mapboxMap.getStyle().addImage(@NonNull String name, @NonNull Bitmap image);就不清楚切换样式会不会销毁图片了。

使用方法和上面一样传入name即可。