地图框架之——mapbox（一）

最新推荐文章于 2025-04-16 15:22:24 发布

@小张在努力

最新推荐文章于 2025-04-16 15:22:24 发布

阅读量1.1k

点赞数 16

分类专栏： mapbox 文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_45751819/article/details/143486169

版权

mapbox 专栏收录该内容

10 篇文章

订阅专栏

这两天在写一个地图demo，用的是mapbox+vue3框架写的，之前工作中学习过一点mapbox，正好现在好好的操练一下，顺便记录一下，算是记录自己，也帮助他人！

废话不多说，直接操练。

一、地图初始化

步骤：

1、引入依赖

2、导入token（这个token很重要，但是现在貌似不能申请了，我是在淘宝买的，所以大家如果按照我这个学习的话，最好先去买个token，或者百度一下解决办法）

3、实例化map

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入依赖 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
    //2、导入token
        mapboxgl.accessToken = '你的token'
    //3、实例化地图
        const map = new mapboxgl.Map({
            container: "map",
            /* style layers */
            style: "mapbox://styles/mapbox/streets-v12",
            center: [114.30, 30.50],
            zoom: 14
        })
        
    </script>
</body>

</html>

上面这段代码是mapbox地图初始化的代码，这里有一个小坑，就是一定要给’map‘容器设置宽高，否则不显示地图

二、加载高德地图

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- 1、导入mapbox的依赖 js+css -->
      <script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
      <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />

      <style>
            * {
                  margin: 0;
                  padding: 0
            }

            #map {
                  width: 100vw;
                  height: 100vh;
            }
      </style>
</head>

<body>
      <!-- 2、设置地图容器的挂载点 -->
      <div id="map">

      </div>
      <script>
            /* 3、实例化地图 */
              mapboxgl.accessToken = '你的token';
            const map = new mapboxgl.Map({
                  /* 将地图挂载到对应的DOM上 相当于ol的target */
                  container: "map",
                  /* 相当于ol的layers */
                  style: {
                        "version": 8,
                        "sources": {
                              "raster-tiles": {
                                    "type": "raster",
                                    "tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
                                    "tileSize": 256
                              }
                        },
                        "layers": [{
                              "id": "simple-tiles",
                              "type": "raster",
                              "source": "raster-tiles",
                              "minzoom": 0,
                              "maxzoom": 22
                        }]
                  },
                  center: [114.30, 30.50],
                  zoom: 6,
                  projection:'globe'
            })
      </script>
</body>

</html>

三、设置大气层

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      /* token */
      mapboxgl.accessToken = '你的token'
      const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: [116.391361, 39.90431], // starting position [lng, lat]
        zoom: 2 // starting zoom
      })
      map.on('style.load', () => {
        map.setFog({
          color: 'white',
          'high-color': 'lightblue',
          'low-color': 'lightblue',
          'horizon-blend': 0.3,
          'space-color': 'lightblue',
          'star-intensity': 0.6
        })
      })
    </script>
  </body>
</html>

四、禁止双击地图放大

map.on("style.load", () => {
  /* 禁止双击地图放大 */
  map.doubleClickZoom.disable()
})

五、相机角度

这是默认的地图角度

1、pitch俯仰角

现在通过pitch修改俯仰角

//方式一
const map = new mapboxgl.Map({
      //俯仰角 默认是0 取值范围0~90
      //90度呈水平方向显示
      pitch: 90
})
//方式二
map.setPitch(70)

2、bearing水平角

取值-180度——180度

//方式一
const map = new mapboxgl.Map({
      // 水平角 默认是0 取值范围-180~180
      bearing:90
})
//方式二
map.setBearing(90)

3、相机漫游

(1)、flyTo()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      /* token */
      mapboxgl.accessToken = '你的token'
      const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: [116.391361, 39.90431], // starting position [lng, lat]
        zoom: 5, // starting zoom
        pitch: 70
      })
      map.on('click', (e) => {
        let lngLat = e.lngLat
        let { lng, lat } = lngLat
        map.flyTo({
          center: [lng, lat], //object {lng,lat}  array
          zoom: 13,

          pitch: 80,
          /* 0~1 值越小越慢 */
          speed: 0.5
        })
      })
    </script>
  </body>
</html>

easeTo（）

map.on("click", (evt) => {
            let lngLat = evt.lngLat;
            let { lng, lat } = lngLat;
            map.easeTo({
                center: lngLat,
                duration: 2000,
                // zoom: 13
            })
        })

jumpto()

    map.on("click", (evt) => {
            let lngLat = evt.lngLat;
            let { lng, lat } = lngLat;
            /* jumpTo没有动画 */
            map.jumpTo({
                center: lngLat
            })
        })

今天就先到这里，你已经掌握了地图的初始化及位置跳转