在 Mapbox 中添加图片 marker 并随地图一起转动、推

• 这个是为了填上 上个项目 的坑，当时我以为没有类似的 API，自己竟然人肉在地图上画了一个箭头（还好当时的图案不复杂，要是画个轮船就完了），现在终于找到相关 API 了
• 在 type 为 symbol 的图层添加 icon-image 点
• 主要是 icon-rotation-alignment 这个属性，当设置为 map 后，icon 就如同画在地图上一样，跟随地图转动、推拉（官方叫 bearing 和 pitch）
• DEMO：船只搜索代号为 test-123

我这里使用的Vue，所以展示使用 Mapbox 组件的相关代码：

export default {
  name: 'Map',
  props: ['shipInfo'],
  data () {
    return {
      mapObject: {},
      shipInfoBoardDisplay: false
    }
  },
  mounted () {
    this.mapObject = this.init()
  },
  methods: {
    init () {
      mapboxgl.accessToken = '官网Token...'
      const map = new mapboxgl.Map({
        container: 'Map-Box',
        style: 'mapbox://styles/mapbox/streets-v11',
        // 设置地图中心
        center: [114.1, 22.2],
        // 设置地图比例
        zoom: 8
      })

      // 地图导航
      let nav = new mapboxgl.NavigationControl()
      map.addControl(nav, 'top-left')

      // 显示比例尺
      let scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'imperial'
      })
      map.addControl(scale)
      scale.setUnit('metric')
      // 全屏按钮
      map.addControl(new mapboxgl.FullscreenControl())

      // 使用定位模块
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true,
          showUserLocation: true,
          zoom: 14
        })
      )
      return map
    },

    // 添加自定义标记点
    addGeoMarker () {
      let map = this.mapObject
      let that = this
      // 引入外部图片
      map.loadImage('/static/images/arrow.png', function (error, image) {
        if (error) throw error
        // 先判断是否加载了该 id 的图片资源，没有则加载
        if (!map.hasImage('shipDirectionArrow')) {
          map.addImage('shipDirectionArrow', image)
        }
        map.addLayer({
          id: that.shipInfo.callsign.value,
          type: 'symbol',
          source: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [{
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: that.shipInfo.local.value
                }
              }]
            }
          },
          layout: {
            // 使用图片资源
            'icon-image': 'shipDirectionArrow',
            // 缩放
            'icon-size': 1,
            // 旋转角度
            'icon-rotate': that.shipInfo.headDirect.value,
            // 偏移量
            'icon-offset': [0, -15],
            // 跟随地图转动，推拉（3d效果那种）Mapbox 中叫 bearing 和 pitch
            'icon-rotation-alignment': 'map',
            'icon-allow-overlap': true,
            'icon-ignore-placement': true
          }
        })
      })
      // 添加 icon 和 名称 标记
      // 创建 div.marker-wrap, div.marker-title, div.marker-wrap 用作定位, div.marker-title 显示标题
      let elWrap = document.createElement('div')
      elWrap.className = 'marker-wrap'
      elWrap.addEventListener('click', function () {
        that.shipInfoBoardDisplay = !that.shipInfoBoardDisplay
        if (map.getZoom() < 6.5) {
          that.flyTo()
        }
      })
      let elTitle = document.createElement('div')
      elTitle.className = 'marker-title'
      elTitle.innerHTML = '<span>' + that.shipInfo.name.value + '</span>'
      elWrap.appendChild(elTitle)
      // 将 div.marker-wrap 加入到 map
      let markerTagObject = new mapboxgl.Marker(elWrap).setLngLat(this.shipInfo.local.value).addTo(map)
    }
  }
}