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

文章目录

前言
一、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库

在线库

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

在这里插入图片描述

创建一个地图元素容器

使用token并配置

mapboxgl.accessToken = '';

创建一个地图示例

const map = new mapboxgl.Map({
    container: 'map', // 地图容器 ID
    style: 'mapbox://styles/mapbox/streets-v12', // 样式url
    center: [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)

完整代码（实例）




    
    
    
    Document
    
    
    
        body,html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    



    


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