【Mapbox GL JS 入门】（1）Hello world

GIS程序媛—椰子

已于 2022-11-28 10:01:17 修改

阅读量668

点赞数 1

文章标签： javascript 前端开发语言

于 2022-11-21 10:54:56 首次发布

原文链接：https://docs.mapbox.com/mapbox-gl-js/guides/

版权

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>

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

GIS程序媛—椰子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Mapbox GL JS 入门】（1）Hello world

是一个客户端JavaScript库，为了web开发人员可以在web浏览器中动态绘制地图，在网页和移动设备上嵌入动态、交互式、可定制的地图，并将矢量瓦片和3D渲染技术相结合自定义地图样式快速绘制矢量图与其他Mapbox工具兼容图形库，可以在任何兼容的web浏览器中使用OpenGL将2D和3D Mapbox地图渲染为动态视觉图形，而无需使用其他插件。
复制链接

扫一扫