npm 包 @terraeclipse/react-mapbox 使用教程

介绍

@terraeclipse/react-mapbox 是一款基于 Mapbox GL JS 的 React 组件库，它可以方便地在 React 应用中使用 Mapbox 地图功能。本文将介绍如何使用这个 npm 包。

安装

使用 npm 安装：

npm install @terraeclipse/react-mapbox

教程

引入库

首先，需要在组件中引入库并创建一个 Map 组件：

import ReactMapboxGL, { Layer, Feature } from '@terraeclipse/react-mapbox';

const Map = ReactMapboxGL({
  accessToken: 'YOUR ACCESS TOKEN',
});

accessToken 是你的 Mapbox Access Token。

添加地图样式

接下来，需要添加地图样式。可以使用 Mapbox Studio 创建一个数据集和地图样式，然后通过样式 URL 或 style 的 JSON 对象添加地图样式。

// 使用样式 URL
<Map style="mapbox://styles/USER/STYLE">

// 使用 style JSON 对象
<Map style={{ "version": 8, "name": "My Style", ... }}>

其中 USER 和 STYLE 分别是你的 Mapbox 用户名和样式名称。

添加图层和要素

然后可以添加图层和要素。以下示例代码添加了一个图层和一个要素。

// www.javascriptcn.com code example
<Map
  style="mapbox://styles/USER/STYLE"
  center={[lng, lat]}
  zoom={[zoom]}
  containerStyle={{
    height: '100%',
    width: '100%',
  }}>
  <Layer
    type="symbol"
    id="marker"
    layout={{ 'icon-image': 'marker-15' }}>
    <Feature coordinates={[lng, lat]} />
  </Layer>
</Map>

其中，lng、lat 和 zoom 分别是经度、纬度和缩放等级。

添加控件

可以在 Map 组件中添加一些内置的控件，例如缩放控件、比例尺、导航等控件：

// www.javascriptcn.com code example
<Map
  style="mapbox://styles/USER/STYLE"
  center={[lng, lat]}
  zoom={[zoom]}
  containerStyle={{
    height: '100%',
    width: '100%',
  }}>
  <ZoomControl />
  <ScaleControl />
  <NavigationControl />
</Map>

添加事件

@terraeclipse/react-mapbox 还支持添加事件监听器，例如用户单击地图时触发事件：

// www.javascriptcn.com code example
<Map
  style="mapbox://styles/USER/STYLE"
  center={[lng, lat]}
  zoom={[zoom]}
  containerStyle={{
    height: '100%',
    width: '100%',
  }}
  onClick={(map, evt) => {
    console.log(evt.lngLat);
  }}>
  <Layer
    ...
  </Layer>
</Map>

完整示例代码

// www.javascriptcn.com code example
import ReactMapboxGL, { Layer, Feature, ZoomControl, NavigationControl, ScaleControl } from '@terraeclipse/react-mapbox';

const Map = ReactMapboxGL({
  accessToken: 'YOUR ACCESS TOKEN',
});

const lng = 0;
const lat = 0;
const zoom = 8;

function App() {
  return (
    <Map
      style="mapbox://styles/USER/STYLE"
      center={[lng, lat]}
      zoom={[zoom]}
      containerStyle={{
        height: '100%',
        width: '100%',
      }}
      onClick={(map, evt) => {
        console.log(evt.lngLat);
      }}>
      <Layer
        type="symbol"
        id="marker"
        layout={{ 'icon-image': 'marker-15' }}>
        <Feature coordinates={[lng, lat]} />
      </Layer>
      <ZoomControl />
      <ScaleControl />
      <NavigationControl />
    </Map>
  );
}

export default App;

结论

使用 npm 包 @terraeclipse/react-mapbox 可以方便地在 React 应用中使用 Mapbox 地图功能。本文介绍了如何引入库、添加地图样式、添加图层和要素、添加控件，以及添加事件。希望这篇文章对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbd81e8991b448da4f6