背景

在项目中产品需要进入项目时展示一个地球仪然后旋转定位到中国的效果 ,调研时发现mapbox-gl 2.0.9版本已经新增地球仪模式 :::warning 只有mapbox-gl 2.9.1以上版本才支持地球仪模式 ::: 效果如下面视频
20221011213412-convert.gif

一、地球仪模式使用

  1. let mapboxInstance = new mapboxgl.Map({ 
  2.   //设置地图投影模式 mapbox默认投影模式为mercator(墨卡托) 
  3.   projection: { 
  4.     //globe 为地球3d模式  
  5.     name: 'globe', 
  6.   }, 
  7. })

Mapbox 投影模式 projection官方文档 Projections | Mapbox GL JS

二、在运行时切换投影模式

  1. map.setProjection({ 
  2.     name: 'mercator', 
  3.     center: [41.33, 123.45], 
  4.     parallels: [30, 50] 
  5. });

三、修改地球初始位子

Mapbox 地球仪模式 - 图2
如图所示 地图默认的位子为整个图层的正中心 但由于右边添加了一部分内容我们希望地图往左下偏移位子,但mpabox在初始化时是没有提供位子偏移的参数。所以需要初始化完成后使用flyTo 

  1. let mapboxInstance = new mapboxgl.Map({ 
  2.         projection: { 
  3.           name: 'globe', 
  4.         }, 
  5.       }) 
  6.   //地图初始化完成后调整地图的位置 
  7.   mapboxInstance.flyTo({ 
  8.      padding: { top: 200, right: 500 }, 
  9.   })

调整后地图的位置
Mapbox 地球仪模式 - 图3

四、地球旋转到指定位子旋转结束后切换投影模式

  1. data() { 
  2.     return { 
  3.       flying: false, //地图是否在飞行 
  4.     } 
  5.  } 
  6.      // 监听地图移动结束事件 
  7.       map.on('moveend', async (e) => { 
  8.         // 当在飞行状态 
  9.         if (this.flying) { 
  10.           map.setProjection({ 
  11.             // 设置地图投影模式 
  12.             name: 'mercator', 
  13.           }) 
  14.           map.flyTo({ 
  15.             pitch: 40, 
  16.           }) 
  17.           this.flying = false 
  18.         } 
  19.       }) 
  21.        let that = this 
  22.        map.flyTo({ 
  23.           //要飞行到的中心点 
  24.         center: [108.61194123242186, 36.03849120504327], 
  25.         //层级 
  26.         zoom: 3.7, 
  27.         //飞行速度 
  28.         speed: 0.5, 
  29.         //飞行曲线 
  30.         curve: 1, 
  31.         easing(t) { 
  32.           // 飞行时会触发此方法 
  33.           that.flying = true 
  34.           return t 
  35.         }, 
  36.       })