在 React 项目中使用 Mapbox GL JS

Mapbox GL JS是有着出色显示效果的前端地图框架。它的相关信息可以在 Mapbox GL JS 英文文档 、Mapbox GL JS 中文文档 、Mapbox GL JS 的 Github 页面 中找到。

需要注意的是，Mapbox GL JS的前端代码是开源的，但它一般依赖Mapbox的后端服务，这个服务是有免费限额的。所以在使用 Mapbox GL JS 之前我们一般需要注册 Mapbox 账号并在 账户页面 获得一个 token，这个 token 是一个 pk.开头的字符串。

本文主要介绍如何在最简单的 React 项目中使用Mapbox GL JS。

首先我们使用 create-react-app 来创建一个 React 项目

使用 npm 安装 Mapbox GL JS：

之后我们在 src 中新建一个 MyMap 组件，并把它加入到index.js中替换掉原来的 “App"
MyMap.jsx：

import React from 'react'
import mapboxgl from 'mapbox-gl';

class MyMap extends React.Component {
  constructor() {
    super();
  }

  componentDidMount() {

    mapboxgl.accessToken = 'pk.eyJ1IjoiemhhbmdqaW5neXVhbiIsImEiOiJja2R5cHhoNXYycGVtMnlteXkwZGViZDc2In0.UhckH-74AgPwMsDhPjparQ';
    
    const map = new mapboxgl.Map({
    container: this.mapContainer,
    style: 'mapbox://styles/mapbox/satellite-v9',
    center: [110, 30],
    zoom: 4,
    scrollZoom: false,
    });

    var nav = new mapboxgl.NavigationControl();
    map.addControl(nav, 'top-left');
  }

  render() { 
    return (
      <div>
        {/* 引入样式文件 */}
        <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
        {/* 地图容器 */}
        <div ref={el => this.mapContainer = el} style={{height: '100vh', width:'100vw', position: 'absolute'}} />
      </div>
    );
  }
}

export default MyMap;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MyMap from './MyMap';

ReactDOM.render(
  <React.StrictMode>
    <MyMap />
  </React.StrictMode>,
  document.getElementById('root')
);

效果如下：

这样地图对象就被挂载到DOM中显示。

但多数时候我们需要对地图对象进行动态修改。这样我们可以把地图对象放在state中。例如：

import React from 'react'
import mapboxgl from 'mapbox-gl';

class MyMap extends React.Component {
  constructor() {
    super();
    this.state = {
      //  把地图对象存在这里
      map: ()=>({}),
    };
  }

  //  初始化
  componentDidMount() {

    mapboxgl.accessToken = 'pk.eyJ1IjoiemhhbmdqaW5neXVhbiIsImEiOiJja2R5cHhoNXYycGVtMnlteXkwZGViZDc2In0.UhckH-74AgPwMsDhPjparQ';
    
    const map = new mapboxgl.Map({
    container: this.mapContainer,
    style: 'mapbox://styles/mapbox/satellite-v9',
    center: [110, 30],
    zoom: 4,
    scrollZoom: false,
    });

    var nav = new mapboxgl.NavigationControl();
    map.addControl(nav, 'top-left');
	
	//	把地图对象传入state
    this.setState({map: map});
  }

  //  事件
  fn(){
  	  //  在这里可以访问到地图对象
      console.log(this.state.map)
  }

  render() { 
    return (
      <div>
        {/* 引入样式文件 */}
        <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
        {/* 地图容器 */}
        <div ref={el => this.mapContainer = el} style={{height: '100vh', width:'100vw', position: 'absolute'}} />
      </div>
    );
  }
}

export default MyMap;