你正要离开Mapbox中国网站

并非所有mapbox.com的服务在中国提供

概述

Mapbox GL JS

Current version: v1.1.1 View changelog

  • 自定义地图样式
  • 快速矢量地图
  • 和其他 Mapbox 工具兼容

Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tilesMapbox styles 为来源,将它们渲染成互动式地图。它是 Mapbox GL 生态系统的一部分,其中还包括 Mapbox mobile,它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。

快速开始

开始前,你需要获得一个 access token 和一个 style URL。你可以从我们的专业设计样式中选择一个,或者使用 Mapbox Studio 创造属于你自己的样式。

Include the JavaScript and CSS files in the <head> of your HTML file.

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />

Include the following code in the <body> of your HTML file.

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'undefined';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9'
});
</script>

CSP 指令

作为跨站脚本和其他网站安全漏洞的缓解方法,你可以使用 Content Security Policy (CSP) 来为你的网站指定安全策略。如果你这样做,Mapbox GL JS 需要以下 CSP 指令:

worker-src blob: ;
child-src blob: ;
img-src data: blob: ;

请求 Mapbox 或其他服务的样式,需要额外的指令。对于 Mapbox,你可以使用 connect-src 指令:

connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com

对于没有启用 worker-src blob: ; child-src blob: 的严格 CSP 环境,有一个独立的 Mapbox GL JS bundle (mapbox-gl-csp.js and mapbox-gl-csp-worker.js),它需要手动设置路径:

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl-csp.js'></script>
<script>
mapboxgl.workerUrl = "https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl-csp-worker.js";
...
</script>

Mapbox CSS

Quickstart 中的 CSS 是用来设置 Mapbox 代码创建的 DOM 元素风格的。如果没有这个 CSS,Popups 和 Markers 等元素将无法使用。

导入这个 CSS 最简便的方法,是在文档的 head 元素中包含一个 <link> 元素,指向 Mapbox CDN。同时,它也捆绑在 Mapbox 模块中,意味着如果你有一个可以处理 CSS 的捆绑器,你可以从mapbox-gl/dist/mapbox-gl.css导入CSS。

请注意,如果第一次渲染时 CSS 还不在,后面一旦此 CSS 有了,所有依赖它的 DOM 元素会恢复过来。