React 项目中使用 Mapbox GL JS

简介

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;
}