3f335bcfd286030b4771414e30b0582c84dc12000efa5ad019765ec55339860d 中文文档教程

Question

react-map-gl

react-map-gl 提供了一个React 友好的 围绕 Mapbox GL JS 的 API 包装器。 一个webGL 基于矢量瓦片映射库。

警告：这个项目是新的，API 可能会改变。 也可能有 Mapbox 尚未公开的 API。

查看交互式文档：https://uber.github.io/react-map-gl

Overview

Installation

npm install react-map-gl --save

关于捆绑的注意事项： react-map-gl 已通过 browserify 进行了广泛测试， 然而，一些用户在使用捆绑他们的应用程序时报告了问题 <代码>网页包。 作为第一步，请咨询 官方 mapbox webpack 配置。 问题中还有一些有用的信息和 请求帮助。

Usage

import MapGL from 'react-map-gl';

<MapGL width={400} height={400} latitude={37.7577} longitude={-122.4376}
  zoom={8} onChangeViewport={(viewport) => {
    const {latitude, longitude, zoom} = viewport;
    // Optionally call `setState` and use the state to update the map.
  }}
/>

Using overlays

react-map-gl 提供了一个 overlay API，所以你可以使用内置的可视化 覆盖，或创建自己的。 这是使用内置的示例 散点图叠加。

import {ScatterplotOverlay} from 'react-map-gl';
// ...
<MapGL {...viewport}>
  <ScatterplotOverlay
    {...viewport}
    locations={locations}
    dotRadius={4}
    globalOpacity={1}
    compositeOperation="screen" />
  // Add additional overlays here...
])

Built-in Overlays

1. ChoroplethOverlay
2. ScatterplotOverlay
3. DraggablePointsOverlay
4. SVGOverlay
5. CanvasOverlay

注意：这些叠加层目前与透视模式不兼容。

deck.gl overlays

deck.gl 是一个配套模块 react-map-gl 提供了一些经典的数据可视化叠加 （散点图、等值线图等）在 WebGL 中实现。 这些叠加层是 适用于大型或动态数据集，或用于透视模式 应用程序

Third party overlays

也可以创建第三方覆盖。 例如， heatmap-overlay 使用 webgl-heatmap 创建地理 热图。

示例用法：

import HeatmapOverlay from 'react-map-gl-heatmap-overlay';
import cities from 'example-cities';
// ...
    render() {
      return <MapGL {...viewport}>
        return <HeatmapOverlay locations={cities} {...viewport}/>
      </MapGL>;
    }

想要创建和分享您的自己的覆盖？ 分叉 react-map-gl-example-overlay 项目开始。

Perspective Mode

使用 pitch 和 bearing 属性显示透视模式 （均默认为 0），这将显示地图“倾斜”pitch 度 （头顶为 0 度），朝向 方位（0 度为北）。

此外，perspectiveEnabled 属性（默认值：false） 将激活鼠标处理程序，允许用户更改 pitch 和 bearing 在按住“command”键的同时使用鼠标。

如果 perspectiveEnabled 未设置为 true，则用户将无法 更改俯仰和方位，这意味着默认道具将显示 一个高架地图，并且只在该地图上启用标准的平移和缩放鼠标操作。

注意： Mapbox-gl-js 将俯仰角限制为 60 度。

注意：使用 pitch 时，会在 onViewportChange 回调，确保将所有收到的道具传回 组件。

注意：并非所有叠加层都与透视模式兼容。 对于一组适用于透视模式的叠加层，请查看 deck.gl。

Transitions

react-map-gl 不公开 mapbox-gl-js 的转换 API 因为它被设计为无状态组件。

相反，建议使用单独的模块，如 反应运动 动画属性。 一个示例：

<Motion style={{
  latitude: spring(viewport.latitude, { stiffness: 170, damping: 26, precision: 0.000001 }),
  longitude: spring(viewport.longitude, { stiffness: 170, damping: 26, precision: 0.000001 })
}}>
  {({ latitude, longitude }) => <MapGL
    {...viewport}
    latitude={latitude}
    longitude={longitude}
    mapStyle={mapboxStyle}
  />}
</Motion>

ImmutableJS all the things

MapGL 的 mapStyle 属性以及几个内置的 覆盖属性必须提供为 ImmutableJS 对象。 这允许 库要快，因为计算道具的变化只涉及检查 如果不可变对象是同一个实例。

Use with Redux

如果您使用的是 redux，则将此组件连接到 将状态存储在 redux 状态树中。 最简单的方法就是把所有 传递给 onChangeViewport 函数属性的属性并添加它们 直接进入商店。 然后可以将此状态传递回 react-map-gl 没有任何改造。 你可以使用这个包 redux-map-gl 以节省编写此内容 自己编码。

Development

要在此组件上进行开发，请安装依赖项，然后构建并观察 静态文件。

$ npm install

提供示例应用程序：

$ npm start &
$ open "http://localhost:9966/?access_token="`echo $MapboxAccessToken`

echo $MapboxAccessToken 返回您的 Mapbox 访问令牌。

完成后，您可以在浏览器中查看该组件，网址为 本地主机:9966。 您所做的任何更改都会 自动运行编译器再次构建文件。

Testing

很难为这个组件编写测试，因为它使用 WebGL。 test/ 中有一些测试，但大部分是作为新功能 添加后，我们通常通过运行 npm run start 和 玩演示。

Contributing

欢迎投稿。 虽然不是必需的，但检查一下可能会有所帮助 维护者在打开你的 PR 之前。 此外，您还需要完成一个短开 在您的请求请求可以被接受之前，源贡献表格。

CHANGE LOG

查看变更日志