文章目录

前言
一、mapbox是什么？
- 官网
- 官网示例效果尝鲜
二、使用步骤
- 1.引入mapbox-gl.js库
- - 在线库
  - npm 形式安装
- 2.使用方法
- - 无账号则申请，有账号则登录
  - 申请完成后，获取token
  - 创建一个地图元素容器
  - 使用token并配置
  - 创建一个地图示例
效果
总结

前言

最近开始入坑前端mapbox地图，跟大家一起慢慢深入学习mapbox

一、mapbox是什么？

官网

https://docs.mapbox.com/mapbox-gl-js/guides/

Mapbox GL JS 是一个客户端JavaScript库，用于使用Mapbox的现代地图技术构建web地图和web应用程序。您可以使用Mapbox GL JS在web浏览器或客户端中显示Mapbox地图，添加用户交互性，并在应用程序中定制地图体验。

官网示例效果尝鲜

二、使用步骤

1.引入mapbox-gl.js库

在线库

<script src='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css' rel='stylesheet' />

npm 形式安装

npm install --save mapbox-gl

然后引入

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

2.使用方法

无账号则申请，有账号则登录

申请地址：https://account.mapbox.com/auth/signup/

申请完成后，获取token

创建一个地图元素容器

<div id='map' style='width: 100%; height: 100%;'></div>

使用token并配置

mapboxgl.accessToken = '<输入你的token>';

创建一个地图示例

const map = new mapboxgl.Map({container: 'map', // 地图容器 IDstyle: 'mapbox://styles/mapbox/streets-v12', // 样式urlcenter: [116.42396,39.91784], // 中心位置[lng, lat]zoom: 16, // 缩放pitch: 35, // 倾斜角度
});

Map配置项

属性	描述
container	Mapbox GL JS将在其中呈现地图的HTML元素，或者元素的字符串id。指定的元素不能有子元素。
style	地图的Mapbox样式。这必须是一个符合Mapbox样式规范中描述的模式的JSON对象，或者该JSON的URL。可以接受空值以允许手动添加样式。要从Mapbox API加载一个样式，你可以使用Mapbox://styles/:owner/:style的URL形式，其中:owner是你的Mapbox帐户名，:style是样式ID。你也可以使用mapbox自有的样式:官网文档
center	地图的初始地理中心点
zoom	地图的初始缩放级别
pitch	地图的初始倾角(倾斜) 范围(0-85)

完整代码（实例）

<!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><script src='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css' rel='stylesheet' /><style>body,html {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head><body><div id='map' style='width: 100%; height: 100%;'></div>
</body>
<script>mapboxgl.accessToken = '<输入你的token>';const map = new mapboxgl.Map({container: 'map', // 地图容器 IDstyle: 'mapbox://styles/mapbox/streets-v12', // 样式urlcenter: [116.42396,39.91784], // 中心位置[lng, lat]zoom: 16, // 缩放pitch: 35, // 倾斜角度});
</script></html>

效果

总结

以上就是今天要讲的内容，本文仅仅简单介绍了mapbox-gl.js的使用，而mapbox-gl.js提供了非常多的地图功能，后续文章，我将带大家慢慢深入了解。

如果觉得有用欢迎点赞关注
有问题私信我！！~~

mapbox一学就会系列：01 第一个地图页面相关推荐

Android Studio 单刷《第一行代码》系列 01 —— 第一战 HelloWorld
前言(Prologue) 本系列将使用 Android Studio 将<第一行代码>(书中讲解案例使用Eclipse)刷一遍,旨在为想入坑 Android 开发,并选择 Android ...
跟我学spring security系列文章第一章实现一个基本的登入
文章目录指定依赖安全配置添加controller测试代码测试源码地址: https://github.com/pony-maggie/spring-security-learn 指定依赖 s ...
python ai 教学_【Python AI教学】从零开始学Python AI开发系列01
原标题:[Python AI教学]从零开始学Python AI开发系列01 欢迎开启新的旅程. 从2016年开始,AI人工智能的热潮扑面而来.而在机器学习和深度学习领域,Python位于最受欢迎的编程 ...
零起点学算法01——第一个程序Hello World！
零起点学算法01--第一个程序Hello World! Description 题目很简单输出"Hello World!"(不含引号),并换行. Input 没有输入 Outpu ...
四小时学python爬虫爬取信息系列（第一天）
四小时学python爬虫爬取信息系列(第一天)(全是干货) 1.安装requests库(可以在电脑python,我是进入anaconda我建的虚拟环境) anaconda虚拟环境法流程: conda ...
PHP扩展开发系列01 - 我要成为一名老司机
PHP扩展开发系列01 - 我要成为一名老司机 1. 关于扩展的教程貌似挺全了,为啥还写? 记录下我写扩展的历程自认为会写的更容易理解我的宗旨就是 "先用再识" 代码写着写着就 ...
Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信（二）
前言上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...
学废了系列 - WebGIS vs WebGL图形编程
前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒 ...
《融智学进阶文集》01：间接计算模型和间接形式化方法
<融智学进阶文集>01: 间接计算模型和间接形式化方法 01-间接计算模型和间接形式化方法_邹晓辉.pdf 怎么采用融智学七遍通方法熟悉原创文本? 对照阅读摘要: 本文旨在:从人机交互界 ...

mapbox一学就会系列：01 第一个地图页面