mapbox-gl实战教程:单图层POI图标多样性
  f3bWzBI6oP0A 2023年11月02日 54 0

在地图开发中,POI数据是不可或缺的一部分,各类地名、公共设施、商场超市、政府机构等等,都是地图上的POI数据;在业务系统,还有像摄像头、监测设备等POI数据;这些数据在地图上显示时,会形象地以各种图标形式进行显示,方便进行区分。 mapbox-gl支持加载点状数据,并且能够设置点类型显示为图标,当POI类型较多时,可以选择每类POI当做一个图层进行处理,设置成一个图标样式;也可以将几类POI当作一个图层,根据属性设置显示的图标不同,本文讲一下这种处理方式。 mapbox-gl使用图标之前,需要以精灵图或者map.addImage的方式加载进来,如果图标多的情况,建议使用精灵图的方式进行加载,使用图标时,根据图标的唯一key进行赋值。 mapbox-gl加载POI的方式,是以symbol的形式进行加载:

map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'point', // 数据源
'layout': {
'icon-image': 'cat', // 图标的唯一key
'icon-size': 0.25,
... //其他属性
}
});

要实现POI图标的多样性,首先需要在数据源的属性中设置对应的名称,简单的话,直接在数据源中设置图标的名称:

//geojson为例
{
'type': 'Feature',
'geometry': {
...
},
'properties': {iconname:'icon1'},
},
{
'type': 'Feature',
'geometry': {
...
},
'properties': {iconname:'icon2'},
}

在图层中这样设置即可:

'icon-image': ['get', 'iconname']

这样在地图上POI在加载时,就能显示不同类型了。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

f3bWzBI6oP0A