我们开始分享WebGIS开发之Mapbox零基础入门教程；学完mapbox基础入门教程之后我们将更新一个基于mapbox+L7的开源项目《智慧机场》详细教程，大家可以关注我后续更新动态！
学习课程之前，需要你具备的前置知识：
1、需要大家掌握基础的 HTML-CSS-JavaScript
2、会vscode的简单操作
没有基础的同学带年纪《智慧校园》的教程补充学习
https://blog.csdn.net/yaogis888/article/details/150002249?spm=1001.2014.3001.5501在正式学习mapbox技术栈之前，我们先介绍一下什么是Mapbox
一、什么是mapbox？
mapbox是一个地图框架，不仅提供前端渲染能力，还具备后端服务接口能力。
相较于openlayers，它可构建二维和三维地图，并支持优化导航路线和位置查询等功能。
开发中使用mapbox需引入库文件并设置token，创建地图实例时，需指定容器、加载底图、设置中心位置及缩放级别等。
通过示例代码，可成功在网页上展示地图，并支持3D视图和交互操作。
OpenLayers与Mapbox比较
- OpenLayers仅提供渲染能力，而Mapbox提供前后端接口服务能力。
- Mapbox对OpenLayers的概念进行了封装，但不影响整体认识。
- Mapbox可以构建二维和三维地图，而OpenLayers主要针对二维地图。
- Mapbox提供优化导航路线和位置搜索等功能。
二、Mapbox文档结构
Mapbox文档包括maps、navigation、search、data等分类。
- maps：渲染相关的数据和功能。
- navigation：提供导航路线服务。
- search：查询位置和要素的功能。
Mapbox API Reference
API Reference包含
map、property and options、markers and controls、user interaction、sources、event and fence types、geography and geometry、plugins等部分。
- map：地图实例和相关配置。
- property and options：属性和选项。
- markers and controls：标记和控件。
- user interaction：用户交互操作。
- sources：数据源。
- event and fence types：事件和围栏类型。
- geography and geometry：地理和几何相关功能。
- plugins：官方提供的插件。
三、mapbox中实现地图初始化
一、Mapbox项目实践准备
创建项目目录，并安装npm依赖。
npm init vite
安装Mapbox GL库，并确保使用最新版本。
pnpm i mapbox-gl
准备一个容器元素来放置地图。
width: 100vw
height: 100vh
二、Mapbox地图初始化
引入Mapbox GL库和样式文件。
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import "./style.css";
mapboxgl.accessToken =
"pk.eyJ1IjoiemhvbmdkaxNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2d1dWF1c3AifQ.6v0p1M2N0c_xmJW3aA5ZBA";
创建地图实例
// 创建地图实例
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v9",
center: [114.27, 30.59],
// projection: "globe",
zoom: 4,
});
四、Mapbox服务加载地图
Projection
可以将globe改为平面或3D效果；
3D地图VS平面地图
3D地图VS平面地图
- 3D地图VS平面地图
- style可以理解为默认图层样式。
卫星地图样式
户外地图样式
导航地图样式
底图样式与切换
下面通过编写代码实现下拉框切换不同底图样式，教大家从标准地图到卫星图、户外图等的切换效果，以及如何使用set style API调整默认底图样式。
底图样式：
mapbox内置多种样式，包括standard、spread、dark、navigation等。
这里我们尝试一下切换底图，通过下拉框实现底图样式的切换。
以标准样式为例，创建底图切换按钮：
// 创建地图实例
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/standard-v10",
center: [114.27, 30.59],
projection: "globe",
zoom: 4,
});
const select = document.getElementById("select");
select.onchange = function () {
const value = this.value;
map.setStyle(`mapbox://styles/mapbox/${value}`);
};
标准底图样式：
深夜模式：
五、在mapbox中加载第三方底图如高德地图
需自定义style，包括数据源与图层配置。
主要流程未创建地图实例后，通过定义source加载第三方瓦片服务，如高德地图。将source添加到图层并配置属性，如type、size及resource名称。
最后设置projection为globe及缩放级别、中心点。
第三方底图加载
可以在Mapbox中加载第三方底图，如高德地图。
const map = new mapboxgl.Map({
container: "map",
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: "my-tiles",
type: "raster",
source: "raster-tiles",
},
],
},
projection: "globe",
zoom: 6,
center: [114.27, 30.59],
});
加载高德地图不需要使用token，加载成功后，可显示3D地图并旋转。