Mapbox GL基础（九）：图标的加载与动画

最新推荐文章于 2024-07-06 11:30:09 发布

原创最新推荐文章于 2024-07-06 11:30:09 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

实际项目中，时常会遇到具体点位以图片的形式展示，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,
})