2025年Mapbox零基础入门教程（1）地图初始化

什么是mapbox？

mapbox是一个地图框架，不仅提供前端渲染能力，还具备后端服务接口能力。

相较于openlayers，它可构建二维和三维地图，并支持优化导航路线和位置查询等功能。

开发中使用mapbox需引入库文件并设置token，创建地图实例时，需指定容器、加载底图、设置中心位置及缩放级别等。

通过示例代码，可成功在网页上展示地图，并支持3D视图和交互操作。

Mapbox官网介绍

Mapbox官网首页介绍，包括查询文档地址。访问文档可能需要代理工具，取决于网络访问速度。 Mapbox是一个比OpenLayers更大的框架，提供浏览器渲染和服务能力。

OpenLayers与Mapbox比较

1.OpenLayers仅提供渲染能力，而Mapbox提供前后端接口服务能力。 

2.Mapbox对OpenLayers的概念进行了封装，但不影响整体认识。 

3.Mapbox可以构建二维和三维地图，而OpenLayers主要针对二维地图。 

4.Mapbox提供优化导航路线和位置搜索等功能。

Mapbox文档结构

Mapbox文档包括maps、navigation、search、data等分类。 

1.maps：渲染相关的数据和功能。 

2.navigation：提供导航路线服务。 

3.search：查询位置和要素的功能。

Mapbox API Referenc

API Reference包含map、property and options、markers and controls、user interaction、sources、event and fence types、geography and geometry、plugins等部分。 

1.map：地图实例和相关配置。 

2.property and options：属性和选项。 

3.markers and controls：标记和控件。 

4.user interaction：用户交互操作。 

5.sources：数据源。

6.event and fence types：事件和围栏类型。 

7.geography and geometry：地理和几何相关功能。 

8.plugins：官方提供的插件。

Mapbox项目实践准备

1.创建项目目录，并安装npm依赖。 

npm init vite            

2.安装Mapbox GL库，并确保使用最新版本。 

pnpm i mapbox-gl            

3.准备一个容器元素来放置地图。

width: 100vw            
height: 100vh            

Mapbox地图初始化

1.引入Mapbox GL库和样式文件。 

import mapboxgl from "mapbox-gl";            
import "mapbox-gl/dist/mapbox-gl.css";            

import "./style.css";            
mapboxgl.accessToken =            
  "pk.eyJ1IjoiemhvbmdkaxNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2d1dWF1c3AifQ.6v0p1M2N0c_xmJW3aA5ZBA";            

2.创建地图实例

// 创建地图实例            
const map = new mapboxgl.Map({            
    container: "map",            
    style: "mapbox://styles/mapbox/streets-v9",            
    center: [114.27, 30.59],            
    // projection: "globe",            
    zoom: 4,            
});            

需要完整教程看下面