当前位置：首页 > news >正文

从前端框架到GIS开发系列课程（25）mapbox基础介绍以及加载第三方底图高德地图的实现

news 2025/8/16 10:24:09

我们开始分享WebGIS开发之Mapbox零基础入门教程；学完mapbox基础入门教程之后我们将更新一个基于mapbox+L7的开源项目《智慧机场》详细教程，大家可以关注我后续更新动态！

学习课程之前，需要你具备的前置知识：

1、需要大家掌握基础的 HTML-CSS-JavaScript

2、会vscode的简单操作

没有基础的同学带年纪《智慧校园》的教程补充学习

实战教学|WebGIS开发毕设项目，智慧校园搭建（附项目学习笔记）-CSDN博客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平面地图
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地图并旋转。