世界杯球场地图mapicon

世界杯主题场馆图标显示

需求

在俄罗斯世界杯期间将全部12个场馆定位在11个城市中,图标需要与现有图标进行区分,点击后的展示页需要与运营人员讨论决定,因为涉及到后续地图样式文件频繁更新带来的问题需要与工程师沟通最终实现方案。

方案

在poi数据上加入mapicon的字段,在样式上直接读取mapicon,将样式图标打包压缩成sprite,将球场SVG图标命名成字段内的mapicon相同的名字,这样poi就会自动匹配我们预先设计好的icon。

"layout": {
"icon-image": "ck_{map_icon}_11”}

图标设计

优点

使用mapicon的方案就不用单独将一些数据单独提取出来制作成一个图层并将图层内的poi数据配上icon,因为是在数据层面加上单独的字段,所以数据会自动匹配上我们相应的icon,因为样式文件代码变少,会省掉应用启动时加载的时间。

拓展

因为后期还会有其他的形式的地图,比如知识地图等形式的图层上线,因为数据是一个数据库来源但是需要配置不同的样式文件来在移动端显示不同的风格设计,这样就对mapicon的设计带来一定的挑战,比如一个非常有名的建筑既是世界建筑地图的一个poi点,又是世界名胜古迹的一个点,因为一个地理位置的POI会有不同的mapicon,所以需要分辨如何去匹配。