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項目傳送門