React+Mapbox初实践

本篇博文主要搭建React+Mapbox的测试环境，简单测试Mapbox的调用。

前置环境/条件

• 已经安装在node 、npm或cnpm服务；
• 会React基本操；
• 需要在去mapbox申请注册。

1. 创建工程

• 简便起见，使用手脚架创建项目工程，起名react-mapbox。

create-react-app react-mapbox

创建好基本工程后，安装mapbox相关插件

> cnpm i -D mapbox-gl

创建完工程后，写一份简单的使用案例：

import React, {Component} from 'react';
import mapboxgl from 'mapbox-gl';
import '../assets/style/map.css';

class Map extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        mapboxgl.accessToken = <Your accessToken>;

        //设置地图区域
        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
        });
    }

    render() {
        return (
            <div id="map" className="map">
            </div>
        );
    }
}

export default Map;

mapbox 官网注册

mapbox的访问需要通过一个accessToken，这必须通过去其官网注册，官网地址：https://www.mapbox.com

注册后获取产生一个accessToken，将其赋值给上面的mapboxgl.accessToken即可。

简单的效果图如下：

mapbox提供了其它多种样式，此外，我们还可以根据项目需求使用mapbox studio在线样式生成器，各种炫酷样式轻松搞定

最后，虽然项目简单，但还是附一下项目的git吧。git项目传送门