Mapbox之sprite精灵图
一、 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
即可。
Mapbox之sprite精灵图相关推荐
- CSS Sprite “精灵图“
CSS Sprite CSS Sprites叫 CSS精灵或者雪碧图,是一种网页图片应用处理方式. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中. 再利用CSS的" ...
- UE 某图局部 展UV 图标 / CSS 精灵图(sprite) 好像
CSS精灵图(sprite) 另:字体图标 三十二.精灵图&字体图标 - 简书 一般美术负责展UV 程序会进行简单的展UV 比如图标 UE 截取某图局部展示在屏幕/canvas/画布中 展U ...
- 如何在基于vue-cli的项目中,使用精灵图 css sprite
新钛云服已为您服务1236天 CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图. 就是将多张比较小的图片有规则的合并成一张背景图,然后再 ...
- sprite(雪碧图,也叫精灵图)
1.css sprite 中文名为 雪碧图,也叫精灵图,是基于background-image和background-position 实现的显示技术 就是将一个有很多图标的图片,通过控制图片显示位置 ...
- 精灵图(sprite)实现动画
精灵图(sprite)实现动画 用精灵图做一个二哈奔跑的动画. 1.精灵图制作 将每一帧图片按动画序列顺序放好,然后调出PhotoShop的网格,调好每一帧的位置,同一行每一帧之间的距离等距,上下两行 ...
- css3:精灵图sprite的使用
文章目录 精灵图sprite 简介 原理 优缺点 实例 通过精灵图实现一个导航栏 精灵图sprite 简介 CSS精灵技术(也称CSS Sprites.CSS雪碧),简单来说就是从一张有各种小图标的大 ...
- CSS学习笔记——精灵图(sprite)
CSS学习笔记目录 一.什么是精灵图? 二.精灵图的优点 三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现 总结 一.什么是精灵图? 所谓精灵图就是图片 ...
- CSS精灵图(sprite)
说到精灵图(雪碧图),大家肯定和我一样觉得这个很新鲜.在学习了有关精灵图(雪碧图)的一些知识后,就来和大家讨论一下,我个人对精灵图(雪碧图)的一些理解和实现方法吧. 1.精灵图技术产生的目的:很多大型 ...
- CSS第六天-高级技巧(元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形)
ps 今天这是html和css初级部分的最后一份文章了,下次发的就是HTML5和CSS3的一些基础知识.越学到后面,感觉越有意思.到后面可以自己去尝试做一些比较炫酷的动画了,还是蛮期待的. CSS高级 ...
最新文章
- IoT数据分析可能需要混合方法
- JS中setTimeout()的使用方法具体解释
- Zedboard学习(八):zedboard移植opencv
- Scala可变数组ArrayBuffer:查询/修改/遍历/增加/删除
- HAProxy实现负载均衡及高可用集群(corosync+pacemaker)
- jquery完成界面无刷新加载登陆注册
- oracle错误ORA-00604 递归sql级别1出现错误 ora-00942 表或试图不存在 ORA-06512 在line 11...
- python day 10
- 优化-SQL Server 05 的动态管理视图DMV和函数DMF
- MATLAB中一些特殊的函数
- 【2019南昌邀请赛网络赛 B Greedy HOUHOU BZOJ 2957 楼房重建】线段树+二分
- java实现cas单点登录_CAS单点登录实现步骤
- Error: Incorrect contents fetched, please reload.
- 【JZOJ 杂题选讲】【UER #8】打雪仗
- java计算机毕业设计ssm+vue酒店VIP客户管理系统
- Java——重写hashCode()和euqals()方法
- 2022-2028年全球与中国热电堆和微测辐射热计红外探测器行业发展趋势及投资战略分析
- 卧槽,又来一个Python神器!!
- sqlserver还原.bak文件
- 数据时代的大数据技术,主要包括哪些内容?
热门文章
- 对抖音流量明星主页全部视频信息进行抓取
- 每日做题总结——day01
- 渗透测试信息收集之域名信息、子域名信息、IP信息、端口信息
- jtopo node.text换行_求助:jtopo node文字换行问题
- html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容
- 编程题:寻找无限循环小数的循环节及长度
- 三阶魔方入门解法--层先法
- ajax中fileelementid,使用 ajaxFileUpload 进行图片上传
- Portraiture 4.0.3 for windows/Mac简体中文版(ps人像磨皮滤镜插件)
- 解决电脑WiFi已连接,可是无法上网办法