mapbox地图动画一键飞行

椰卤工程师

于 2022-12-01 19:15:45 发布

阅读量1.3k

点赞数

分类专栏： mapbox 前端开发 React 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_42224055/article/details/128135579

版权

最近，Mapbox GL JS 从 v2.9 开始支持将地图显示为 3D 地球。

话不多说，马上看看效果怎么样：

mapbox地图动画

我们通过设置投影属性projection：globe，即可将地图更改为地球

const map = new mapboxgl.Map({
   
    container: 'map',
    projection: 'globe'
});

地图基础数据配置

    var map = new mapboxgl.Map({
   
      style: "mapbox://styles/mapbox/satellite-streets-v11",
      // center: [121.42, 31.22], //上海市长宁区
      // zoom: 11.5, //缩放级别
      // minZoom: 9,
      // maxZoom: 19,
      container: "map",
      // pitch: 60, // 俯视
      projection: "globe",
      localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"