简介
Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tiles 和 Mapbox styles 为来源,将它们渲染成互动式地图。它是 Mapbox GL 生态系统的一部分,其中还包括 Mapbox mobile,它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。
Mapbox GL JS是有着出色显示效果的前端地图框架。它的相关信息可以在 Mapbox GL JS 英文官网 、Mapbox GL JS 中文官网 、Mapbox GL JS 的 Github 页面 中找到。
需要注意的是,Mapbox GL JS的前端代码是开源的,但它一般依赖Mapbox的后端服务,这个服务是有免费限额的。所以在使用 Mapbox GL JS 之前我们一般需要注册 Mapbox 账号并在 账户页面 获得一个 token,这个 token 是一个 pk.开头的字符串。
下载安装 npm 包
npm install mapbox-gl --save
基本使用
index.js
import React from 'react'
import mapboxgl from 'mapbox-gl';
import './App.css'
export default function App () {
React.useEffect(() => {
// 使用浏览器 API 更新文档标题
mapboxgl.accessToken = 'pk.eyJ1IjoiaG91YmlhbyIsImEiOiJjajdnNjVicDYxNHAzMndvMmI4NGgzaTZrIn0.ZvpHO1bVunIhgsBq_nVYFQ';
//设置地图区域
let bounds = [
[118.21, 28.11], // Southwest coordinates,西南坐标
[122.40, 31.33] // Northeast coordinates,东北坐标
];
new mapboxgl.Map({
style: 'mapbox://styles/mapbox/streets-v10',
center: [120.15, 30.3], //地图中心经纬度
zoom: 11.5, //缩放级别
minZoom: 9,
maxZoom: 19,
pitch: 45,
bearing: -17.6,
container: 'map',
maxBounds: bounds
});
});
return (
<div>
{/* 也可以添加style样式 包含 GL JS CSS 文件 */}
{/* <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' /> */}
<div id="map" style={{ width: "100%", height: "100%" }} className="marker">
</div>
</div>
)
}
css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.marker {
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}