实际项目中,时常会遇到具体点位以图片的形式展示,Mapbox官网提供很多图片样例,但是为了稳定并且满足原型设计的要求,我们需要将自己本地的图片上传到服务器然后实现加载,下面将对其进行说明。
1.加载服务器上的图标
大致流程为:
1.获取点位的经纬度以及其他的属性信息;
2.将本地图片上传到服务器,注意跨域的配置;
3.构建geojson格式的数据;
4.服务器图片的加载以及添加;
5.数据在地图上加载显示。
具体的代码和展示效果如下所示:
let pointList = [
{lon:'125.37858',lat:'43.97377',color:'red'},
{lon:'125.39490',lat:'43.97842',color:'green'},
]
let picUrl = '图片服务器上的地址'
let jsonData = {
'type':'FeatureCollection',
'features':[]
}
pointList.forEach(point => {
let Feature = {
type: "Feature",
geometry: {
type: "Point",
coordinates: [parseFloat(point.lon),parseFloat(point.lat)]
},
properties:point
}
jsonData.features.push(Feature)
})
mapBoxMap.loadImage(picUrl, (error, image) => {
if (error) throw error;
if (!mapBoxMap.hasImage('picName')) mapBoxMap.addImage('picName', image);
mapBoxMap.addSource('pointPicSource', {
'type': 'geojson',
'data': jsonData
});
mapBoxMap.addLayer({
'id': 'pointPicLayer',
'type': 'symbol',
'source': 'pointPicSource',
'layout':{
"icon-image":'picName',
"icon-allow-overlap": true,
},
});
});
2.图标颜色的更改
时常会出现点位信息的颜色值(状态值)会有所不同,可能为了明显且美观,显示不同颜色的图片,如果采用加载多张图片的方式,显然不是最好的选择。Mapbox提供了一定的配置,来实现图标颜色的自定义,但是也要注意尽量选择实色且简单的图片文件。代码和效果如下:
if (!mapBoxMap.hasImage('picName')) mapBoxMap.addImage('picName', image,{ sdf: true });
//加入颜色配置
'paint':{
'icon-color': ['get', 'color']
}
3.图标实现跳动
为了达到展示效果,时常需要实现选中点位的跳动,大致流程如下:
1.获取第一个跳动点位的经纬度以及其他的属性信息;
2.构建geojson格式的数据;
3.服务器图片的加载以及添加;
4.数据在地图上加载显示;
5.设置定时器,实现点位上下的跳动。
具体的代码和展示效果如下所示:
let jsonDataAnimated = {
'type':'FeatureCollection',
'features':[]
}
let FeatureAnimated = {
type: "Feature",
geometry: {
type: "Point",
coordinates: [parseFloat(pointList[0].lon),parseFloat(pointList[0].lat)]
},
properties:pointList[0]
}
jsonDataAnimated.features.push(FeatureAnimated)
mapBoxMap.loadImage(picUrl, (error, image) => {
if (error) throw error;
if (!mapBoxMap.hasImage('animatedPoint')) mapBoxMap.addImage('animatedPoint', image,{ sdf: true });
mapBoxMap.addSource('animatedPointJson', {
'type': 'geojson',
'data': jsonDataAnimated
});
mapBoxMap.addLayer({
'id': 'animatedPointJson',
'type': 'symbol',
'source': 'animatedPointJson',
'layout':{
"icon-image":'animatedPoint',
"icon-allow-overlap": true,
"icon-offset": [0, 0],
},
'paint':{
'icon-color': ['get', 'color']
}
});
let nowOffset= [0, 0]
let jiajian = -4
let animatedPoint = setInterval(()=>{
nowOffset= [nowOffset[0],nowOffset[1]+jiajian]
mapBoxMap.setLayoutProperty('animatedPointJson',"icon-offset",nowOffset)
if(nowOffset[1] == -20){
jiajian = 4
}else if(nowOffset[1] == 0){
jiajian = -4
}
},100)
});
4.根据选取,更改跳动点位
通常情况下,点位的跳动时常与右侧表格进行联动,当右侧选取其他点位时,此时要实现选取点位的跳动,具体实现代码如下
//animatedPoint 为选取点位的信息
let geojsonSource = mapBoxMap.getSource('animatedPointJson');
if(geojsonSource){
geojsonSource.setData({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": animatedPoint,
"geometry": {
"type": "Point",
"coordinates": [ animatedPoint.lon, animatedPoint.lat ]
}
}]
});
}
mapBoxMap.flyTo({
center:[ animatedPoint.lon, animatedPoint.lat ],
zoom:17,
})
总结
本文主要针对加载自己服务器的图标、颜色的变化和图标的跳动进行了说明,以后如果遇到新的功能再进行补充,接下来的章节将继续探索Mapbox。
欢迎关注星林社区,文章将同步更新在星林社区中!