【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就开始啦~
在这里插入图片描述

相关阅读:
汽车租赁系统毕业设计,汽车租赁管理系统设计与实现,毕业设计论文毕设作品参考
【C++】运算符与表达式（学习笔记）
快速抽取resnet_v2_152中间的特征层
bootstrap前端开发框架
电脑死机重启后服务出现：Failed to start RocketMQ push consumer
数据分析-费米问题
Grab 基于 Apache Hudi 实现近乎实时的数据分析
纳米/荧光/磷脂/荧光探针/聚合物/化合物/磁性纳米粒子修饰AIE微球相关研究
国庆放假作业5
1373. 二叉搜索子树的最大键值和

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

【Mapbox GL JS 入门】Hello world

目录

Mapbox GL JS 简介

安装

Access token

Hello world