mapbox-gl | 1.7 球形地图

简述

随着mapbox不断更迭，终于支持了以球形展示地图的方式。在21年下半旬，mapbox便有分支对球形地图进行了尝试，mapbox2.9也终于将这个功能上线。

初始化球形地图

与平常mapbox无异，只需要在初始化时设置投影为 global

const map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.5, 40],
      zoom: 5,
      projection: "globe", // 球
    });

需要注意的是，如果不设置projection，使用的style是v12结尾，会默认为球形地图。 为了让效果更加美观，可以增加一下“雾气”

    map.on("load", () => {
      map.setFog({
        range: [1.0, 8.0],
        color: "white",
        "horizon-blend": 0.01,
      });
    });

Fog

Fog本身是指雾气，在原本平面地图下，setFog 给当前地图加一层雾气，但这里的雾气指的是大气层的“发光”效果，以及星空效果。

球形地图下的其他功能

目前所有功能都在global下进行了一定适配，比如marker，增加了朝向球心的属性设置

new mapboxgl.Marker({
element: el,
// Point markers toward the nearest horizon
rotationAlignment: 'horizon',
offset: [0, -size / 2]
})
.setLngLat(marker.geometry.coordinates)
.addTo(map);

官方实例

除此之外，需要关注的是customLayer，以往mapbox与three等结合，都是在同一个平面下，如今有一个变成了球，矩阵如何转换可能需要研究一下，自己还没有看过相关代码，不好下结论。

总结

球形版本的出现，给了我们学习更多底层的机会，当然，想要完全掌握他变得更加困难，不过对于走mapbox这条技术线的人来说，多了解总归是没坏处的。相比较Cesium，mapbox需要增加对大场景的支持，如3dTiles文件，让引擎拥有更多的可能性。 对于刚入门的同学来讲，不要害怕新功能的增加，功能的增多只会让社区生态更加丰富，当下需要做的仍是掌握上层的api,随后慢慢扩展和深入，找到适合自己的开发方向。