Mapbox-底图

加载地图

导入mapbox库和样式
创建渲染容器
创建地图对象

<!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库和样式 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <!-- 2. 创建渲染容器 -->
    <div id="map"></div>
    <script>
      // 设置token
      mapboxgl.accessToken =
        'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA'
      // 3. 创建地图对象
      const map = new mapboxgl.Map({
        container: 'map', // 指定容器id
        style: 'mapbox://styles/mapbox/streets-v12', // 地图风格
        center: [114.3, 30.5], // 中心点坐标
        zoom: 12, // 缩放比例
        projection: 'equalEarth', // 投影方式
      })
    </script>
  </body>
</html>

container
mapbox最终会渲染生成
1. 一个canvas元素显示地图
2. 一系列辅助DOM用于放置各种控件
style: Styles API | API Docs | Mapbox
内置地图风格
projection: Use different map projections for web maps | Mapbox GL JS | Mapbox
内置投影方式
- 3D地球
- 墨卡托投影
- 平等地球投影
- 等等

加载自定义底图

<!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库和样式 -->
    <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>
    <!-- 2. 创建渲染容器 -->
    <div id="map"></div>
    <script>
      // 设置token
      mapboxgl.accessToken =
        'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA'
      // 3. 创建地图对象
      const map = new mapboxgl.Map({
        container: 'map', // 指定容器id
        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.3, 30.5], // 中心点坐标
        zoom: 12, // 缩放比例
      })
    </script>
  </body>
</html>

style对象

属性	类型	描述
version	number	样式规范版本号。
name	string	样式名称。
metadata	object	有关 Mapbox Studio 中使用的样式的信息。
sources	object	数据源对象。每个源定义了地图图层的数据来源，可以是矢量瓦片、栅格瓦片或GeoJSON等。
layers	array	图层对象数组。每个图层定义了地图上显示的样式元素，如背景、标注、道路等。
created	string	创建样式的日期和时间。
id	string	样式的 ID。
modified	string	上次修改样式的日期和时间。
owner	string	样式所有者的用户名。
visibility	string	样式的访问控制，私有样式或公共样式。
protected	boolean	样式是否受保护, 受保护的样式无法编辑和删除。
draft	boolean	样式是草稿还是已发布

地图对象

对于map对象

方法
- flyTo: 移动(相机漫游)
- easeTo: 允许创建一个动画, 使地图的视图从一个状态平滑地过渡到另一个状态，例如放大、缩小、平移或旋转
事件
通过on监听地图事件
- click: 点击事件
- load: 加载完成事件

设置大气层

  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken =
        'pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg'
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/satellite-streets-v12',
        center: [114.3, 30.5],
        zoom: 1,
        projection: 'globe',
      })

      // 设置大气层样式
      map.on('style.load', () => {
        map.setFog({
          /* 设置大气层的颜色 */
          color: '#96C9FF',
          /* 大气层之上的颜色 */
          'high-color': '#245bde',
          //定制化星空的颜色
          'space-color': '#333',
        })
      })
    </script>
  </body>

地球自转

map.easeTo({
  center: [long, lat],       // 新的中心点坐标
  zoom: zoomLevel,           // 新的缩放级别
  bearing: bearingAngle,     // 新的方位角（以度为单位）
  pitch: pitchAngle,         // 新的俯仰角（以度为单位）
  duration: duration,        // 动画持续时间（以毫秒为单位）
  easing: easingFunction     // 一个用于动画的缓动函数
});

center: 地图的新中心点坐标，是一个包含经度和纬度的数组。
zoom: 地图的新缩放级别。
bearing: 地图的新方位角，0表示北方朝上，正值表示顺时针旋转。
pitch: 地图的新俯仰角，0表示正视，正值表示向下倾斜。
duration: 动画的持续时间，以毫秒为单位。默认值为0，表示立即跳转到新状态，没有动画。
easing: 缓动函数，用于控制动画的速度曲线。Mapbox GL JS提供了几个内置的缓动函数，如linear、easeIn、easeOut、easeInOut等。

      function animation() {
        let center = map.getCenter()
        center.lng += 10
        map.easeTo({ center, duration: 1000, easing: (n) => n })
      }
      
      /* 动画执行完毕之后,触发moveend事件 */
      map.on('moveend', () => {
        animation()
      })
      
      animation()

更改:

zoom<5同时用户没有进行操作,才会自转
点击地图时, 停止自转

      let moving = true
      function animation() {
        const zoom = map.getZoom()
        if (zoom < 5 && moving) {
          let center = map.getCenter()
          center.lng += 10
          map.easeTo({ center, duration: 1000, easing: (n) => n })
        }
      }
      /* 动画执行完毕之后,触发moveend事件 */
      map.on('moveend', () => {
        animation()
      })
      animation()

      map.on('click', () => {
        moving = !moving
        if (!moving) {
          map.stop()
        } else {
          animation()
        }
      })

地图控件

用于控制地图的显示, 和用户交互的按钮

常用的控件

全屏

map.addControl(new mapboxgl.FullscreenControl());

导航(缩放)

const nav = new mapboxgl.NavigationControl(
  {
      //是否显示指南针按钮，默认为true
      "showCompass": true,
      //是否显示缩放按钮，默认为true
      "showZoom":true
  }
);
//添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
map.addControl(nav, 'top-left');

比例尺

const scale = new mapboxgl.ScaleControl({
    unit:'metric|imperial' //默认为公里
})
map.addControl(scale);

鼠标位置

#mouse-position{
  position: fixed;
  bottom: 25px;
  right: 0px;
  z-index: 100;
  background-color: white;
}

<div id="map">
  <div id="mouse-position">
    经度:  , 纬度:  
  </div>
</div>

map.on('mousemove', function (e) {
  const {lng,lat} = e.lngLat;
  document.getElementById('mouse-position').innerHTML = `经度:${lng.toFixed(2)}, 纬度:${lat.toFixed(2)}`
  
});

搜索

<script
  src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet"
  href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
  
// Add the control to the map.
map.addControl(
    new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        zoom: 4,
        placeholder: '请输入地址',
        mapboxgl: mapboxgl,
        reverseGeocode: true
    })
);

<!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库和样式 -->
    <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"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <link
      rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"
      type="text/css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <!-- 2. 创建渲染容器 -->
    <div id="map"></div>
    <script>
      // 设置token
      mapboxgl.accessToken =
       'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA'
      // 3. 创建地图对象
      const map = new mapboxgl.Map({
        container: 'map', // 指定容器id
        style: 'mapbox://styles/mapbox/satellite-streets-v12', // 地图风格
        center: [114.3, 30.5], // 中心点坐标
        zoom: 10, // 缩放比例
        projection: 'globe', // 投影方式
      })

      // 1. 全屏控件
      map.addControl(new mapboxgl.FullscreenControl(), 'top-left')
      // 2. 导航控件
      const nav = new mapboxgl.NavigationControl()
      map.addControl(nav, 'top-left')
      // 3. 比例尺
      const scale = new mapboxgl.ScaleControl({})
      map.addControl(scale, 'bottom-right')
      // 4. 搜索控件
      map.addControl(
        new MapboxGeocoder({
          accessToken: mapboxgl.accessToken,
          zoom: 4,
          placeholder: '请输入地址',
          mapboxgl: mapboxgl,
          reverseGeocode: true,
        })
      )
    </script>
  </body>
</html>

posted @ 2024-11-27 23:07 Khru 阅读(32) 评论(0) 编辑收藏举报

刷新页面返回顶部

khrushchefox

Mapbox-底图

加载地图

地图对象

设置大气层

地球自转

地图控件

公告