【Mapbox GL JS 入门】Hello world

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
1

Access token

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

Hello world

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Display a map on a webpagetitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

打开html文件，就会得到下图。后续会详细讲解各个组件及其属性。那么，我们的Mapbox GL就开始啦~
在这里插入图片描述

相关阅读:
thinkphp websocket 开发实时聊天系统的用户群组与订阅功能实现 (一)
kafka简述
基于jsp+ssm的驾校预约管理系统-计算机毕业设计
ElementUI自定义主题
代码随想录算法训练营第四十六天| 完全背包、518.零钱兑换 II 、377.组合总和 Ⅳ
使用Pytorch实现深度学习的主要流程
虹科方案 | AR助力仓储物流突破困境：规模化运营与成本节约
(标签-ios|关键词-封装)
kubernetes 之 Pod 控制器 Deployment
iOS/iPadOS18Beta是否值得升级体验？Bug汇总和升级办法分享！

原文地址：https://blog.csdn.net/OTTOkongbai/article/details/127959671

【Mapbox GL JS 入门】Hello world

目录

Mapbox GL JS 简介

安装

Access token

Hello world