Mapbox GL JS 简介

官网：https://www.mapbox.com/
git：https://github.com/mapbox/mapbox-gl-js/
是一个客户端JavaScript库，为了web开发人员可以在web浏览器中动态绘制地图，在网页和移动设备上嵌入动态、交互式、可定制的地图，并将矢量瓦片和3D渲染技术相结合

自定义地图样式
快速绘制矢量图
与其他Mapbox工具兼容

GL(Graphics Library)： 图形库，可以在任何兼容的web浏览器中使用OpenGL将2D和3D Mapbox地图渲染为动态视觉图形，而无需使用其他插件。

安装

npm install --save mapbox-gl

Access token

1、需要在mapbox网站创建账号
2、登录 token管理页查看自己的默认token
在这里插入图片描述

Hello world

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Display a map on a webpage</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = '你的accessToken';
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
            style: 'mapbox://styles/mapbox/streets-v11', // style URL
            center: [107.0132554, 22.1441921], // starting position [lng, lat]
            zoom: 9, // starting zoom
            projection: 'globe' // display the map as a 3D globe
        });
    </script>
</body>
</html>