# @aerisweather/react-mapsgl 中文文档

规范地址：https://npmcn.com/package/%40aerisweather/react-mapsgl/

版本：0\.1\.2
npm 元数据更新时间：2026-10-07T22:20:38.729Z
中文译文更新时间：2026-11-06T07:46:48.006Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aerisweather/react-mapsgl
原文对照：https://npmcn.com/package/%40aerisweather/react-mapsgl/?lang=original
项目主页：https://www.aerisweather.com/

弃用说明：This package has moved to @xweather/react-mapsgl\. Please upgrade your dependecies to use the latest versions\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：167 MB，24087 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0，react-dom ^18\.0\.0，@aerisweather/mapsgl ^1\.1\.2
- 首次发布：2023-02-09T22:04:07.371Z
- 最新版本发布：2023-02-21T17:02:27.215Z
- 近 30 天下载量：4087（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

[![MapsGL](https://www.aerisweather.com/img/graphics/mapsgl-logo.png)](https://www.aerisweather.com/products/mapsgl/)

## 安装

```sh
npm install @aerisweather/react-mapsgl
```

也可以使用：`pnpm add @aerisweather/react-mapsgl`、`yarn add @aerisweather/react-mapsgl`、`bun add @aerisweather/react-mapsgl`

## README

[![MapsGL](https://www.aerisweather.com/img/graphics/mapsgl-logo.png)](https://www.aerisweather.com/products/mapsgl/)

# 反应-映射gl

**反应-映射gl** 我们的反光包装 [地图GL 服务和 SDK](https://www.aerisweather.com/products/mapsgl/),一个Javascript SDK,它允许您轻松地自定义并整合各种高质量的,以矢量为基础的天气数据,图像,以及可视化到您的应用程序和自定义解决方案中.

### 支持的绘图图书馆

MapsGL支持以下第三方绘图库:

-   [映射框](https://docs.mapbox.com/mapbox-gl-js/guides/) (直接或通过) [反应-映射框-gl](https://github.com/alex3165/react-mapbox-gl)(中文(简体) )
-   [地图libre](https://maplibre.org/projects/maplibre-gl-js/)
-   [谷歌地图](https://developers.google.com/maps/documentation/javascript)
-   [传单](https://leafletjs.com/)

## 开始

```bash
yarn add @aerisweather/react-mapsgl
```

### 实例

ES6为 `react-mapbox-gl`数字 :

```typescript
import React, { useState } from 'react';
import ReactMapboxGL from 'react-mapbox-gl';
import * as mapsgl from '@aerisweather/mapsgl';
import ReactMapsGL, { 
    Timeline,
    WeatherLayer,
    DataInspector,
    LegendControl 
} from '@aerisweather/react-mapsgl';

import 'mapbox-gl/dist/mapbox-gl.css';
import '@aerisweather/mapsgl/dist/mapsgl.css';

// Mapbox factory
const Map = ReactMapboxGL({
    accessToken: `MAPBOX_TOKEN`
});

// MapsGL factory
const MapController = ReactMapsGL({
    accessKeys: {
        id: `AERIS_CLIENT_ID`,
        secret: `AERIS_CLIENT_SECRET`
    }
});

interface Props {
    center?: { lat: number; lon: number; };
    zoom?: number;
}

const MapView = ({
    center = { lat: 40, lon: -93 },
    zoom = 3
}: Props): React.ReactElement => {
    const [map, setMap] = useState<any>();
    const [playing, setPlaying] = useState(false);

    // store the Mapbox map reference when loaded so it can be provided to the MapsGL controller
    const onMapLoad = (mapEl: any) => {
        setMap(mapEl);
    };

    return (
        <>
            <Map
                center={[center.lon, center.lat]}
                zoom={[zoom]}
                onStyleLoad={onMapLoad}
                style='mapbox://styles/mapbox/light-v9'
                containerStyle={{
                    width: '800px',
                    height: '600px'
                }}
            >
                <MapController strategy="mapbox" map={map}>
                    <Timeline
                        start={new Date(Date.now() - (3600 * 12 * 1000))}
                        duration={6}
                        isPlaying={playing}
                        onPlay={() => console.log('playing')}
                        onStop={() => console.log('stopped')}
                    />
                    <DataInspector event="move" />
                    <LegendControl />
                    <WeatherLayer id="temperatures" quality={mapsgl.DataQuality.low} paint={{
                        sample: {
                            colorscale: {
                                interval: 1,
                                interpolate: false
                            }
                        }
                    }} />
                    <WeatherLayer id="wind-particles" />
                </MapController>
            </Map>
        </>
    );
};

export default MapView;
```

#### 自定义图层

以下示例将自定义 GeoJSON 数据源和相关地层添加到地图中,类似于 我们文档中的例子。 。 。 .

```typescript
import React, { useState } from 'react';
import ReactMapboxGL from 'react-mapbox-gl';
import * as mapsgl from '@aerisweather/mapsgl';
import ReactMapsGL, { 
    Source,
    Layer 
} from '@aerisweather/react-mapsgl';

import 'mapbox-gl/dist/mapbox-gl.css';
import '@aerisweather/mapsgl/dist/mapsgl.css';

// Mapbox factory
const Map = ReactMapboxGL({
    accessToken: `MAPBOX_TOKEN`
});

// MapsGL factory
const MapController = ReactMapsGL({
    accessKeys: {
        id: `AERIS_CLIENT_ID`,
        secret: `AERIS_CLIENT_SECRET`
    }
});

interface Props {
    center?: { lat: number; lon: number; };
    zoom?: number;
}

const MapView = ({
    center = { lat: 40, lon: -8 },
    zoom = 5
}: Props): React.ReactElement => {
    const [map, setMap] = useState<any>();

    // store the Mapbox map reference when loaded so it can be provided to the MapsGL controller
    const onMapLoad = (mapEl: any) => {
        setMap(mapEl);
    };

    return (
        <>
            <Map
                center={[center.lon, center.lat]}
                zoom={[zoom]}
                onStyleLoad={onMapLoad}
                style='mapbox://styles/mapbox/light-v9'
                containerStyle={{
                    width: '800px',
                    height: '600px'
                }}
            >
                <MapController strategy="mapbox" map={map}>
                    <Source
                        id="country-region"
                        type="geojson"
                        options={{
                            data: {
                                type: 'FeatureCollection',
                                features: [{
                                    type: 'Feature',
                                    properties: {
                                        type: 'Sovereign country',
                                        name: 'Portugal',
                                        continent: 'Europe',
                                        region_un: 'Europe',
                                        subregion: 'Southern Europe',
                                        region_wb: 'Europe & Central Asia'
                                    },
                                    geometry: {
                                        type: 'Polygon',
                                        coordinates: [
                                            [
                                                [-9.034817674180246, 41.88057058365967],
                                                [-8.67194576662672, 42.13468943945496],
                                                [-8.263856980817792, 42.28046865495034],
                                                [-8.013174607769912, 41.790886135417125],
                                                [-7.422512986673795, 41.79207469335983],
                                                [-7.251308966490824, 41.91834605566505],
                                                [-6.668605515967656, 41.883386949219584],
                                                [-6.389087693700915, 41.381815497394655],
                                                [-6.851126674822552, 41.11108266861753],
                                                [-6.864019944679385, 40.33087189387483],
                                                [-7.026413133156595, 40.184524237624245],
                                                [-7.066591559263529, 39.71189158788277],
                                                [-7.498632371439725, 39.62957103124181],
                                                [-7.098036668313128, 39.03007274022378],
                                                [-7.374092169616318, 38.37305858006492],
                                                [-7.029281175148796, 38.07576406508977],
                                                [-7.166507941099865, 37.803894354802225],
                                                [-7.537105475281024, 37.42890432387623],
                                                [-7.453725551778092, 37.09778758396607],
                                                [-7.855613165711985, 36.83826854099627],
                                                [-8.382816127953689, 36.97888011326246],
                                                [-8.898856980820327, 36.86880931248078],
                                                [-8.746101446965554, 37.65134552667661],
                                                [-8.839997524439879, 38.26624339451761],
                                                [-9.287463751655224, 38.3584858261586],
                                                [-9.526570603869715, 38.73742910415491],
                                                [-9.446988898140232, 39.39206614842837],
                                                [-9.048305223008427, 39.75509308527877],
                                                [-8.977353481471681, 40.15930613866581],
                                                [-8.768684047877102, 40.76063894303019],
                                                [-8.79085323733031, 41.18433401139126],
                                                [-8.99078935386757, 41.54345937760364],
                                                [-9.034817674180246, 41.88057058365967]
                                            ]
                                        ]
                                    }
                                }]
                            }
                        }}
                    />
                    <Layer
                        id="region-fill"
                        type="fill"
                        sourceId="country-region"
                        paint={{
                            fill: {
                                color: '#ff0000',
                                opacity: 0.5
                            }
                        }}
                    />
                    <Layer
                        id="region-outline"
                        type="line"
                        sourceId="country-region"
                        paint={{
                            stroke: {
                                color: '#ff0000',
                                thickness: 5
                            }
                        }}
                    />
                </MapController>
            </Map>
        </>
    );
};

export default MapView;
```

### 示例项目

对于目前支持的不同第三方映射库如何使用React MapsGL的基本例子,请在 `/examples` 目录 :

```bash
> cd ./examples
> yarn install
> yarn develop
```

您需要重命名 `.env.txt` 改为 `.env` 并添加必要的 AerisWeather 和第三方映射密钥 `yarn develop`。 。 。 .

打开 `examples/src/index.ts` 根据您想要的映射库, 文件并互换已提供组件 :

```typescript
import { createRoot } from 'react-dom/client';
import ReactMapboxMap from './ReactMapboxMap';
// import MapboxMap from './MapboxMap';
// import MaplibreMap from './MaplibreMap';
// import GoogleMap from './GoogleMap';
// import LeafletMap from './LeafletMap';

const container = document.querySelector('#app');
const root = createRoot(container!);

root.render(<ReactMapboxMap />);
```

## 使用量

由于 React MapsGL 是用 Typescript 写成的,所以您可以参考与库内每个组件对应的选项界面 `src/` 目录( 例如 ). `MapControllerOptions`, (中文(简体) ), `DataInspectorControlOptions`, (中文(简体) ), `LegendControlOptions` 财务报告和审定财务报表 `TimelineOptions`用于支持属性清单及其要求.

另见 [地图GL 文档](https://www.aerisweather.com/docs/mapsgl/) 用于完整使用文件和关于与MapsGL合作和使用它的信息.

## 地图GL 资源

使用以下的 MapsGL 资源来更多地了解 SDK 和 广泛的定制选项, 或查看各种演示和实例 :

-   [开始](https://www.aerisweather.com/docs/mapsgl/getting-started/)
-   [地图GL 文档](https://www.aerisweather.com/docs/mapsgl/)
-   演示词: [媒体](https://demos.aerisweather.com/map-app/mapsgl-media/), (中文(简体) ), [严重](https://demos.aerisweather.com/map-app/mapsgl-severe/)
-   [实例](https://www.aerisweather.com/docs/mapsgl/)

## 支助

关于与此有关的问题和专题请求 **反应-映射gl** 图书馆,请提交 Github 问题.

对于所有 MapsGL 特定支持, [提交新票](https://helpdesk.aerisweather.com/) 包含任何问题、错误报告或特性建议。 你也可以在推特上联系我们 [@ AerisWeather (英语)](https://twitter.com/AerisWeather)。 。 。 .

## 常见问题

### 如何安装 @aerisweather/react-mapsgl？

在项目目录运行 npm install @aerisweather/react-mapsgl，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0）、react-dom（^18\.0\.0）、@aerisweather/mapsgl（^1\.1\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aerisweather/react-mapsgl 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aerisweather/react-mapsgl 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @aerisweather/react-mapsgl 可以商用吗？

@aerisweather/react-mapsgl 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @aerisweather/react-mapsgl 的下载量有多少？

根据 npm 官方下载统计，@aerisweather/react-mapsgl 在 2026/10/05 – 2026/11/03 这 30 天内被下载 4,087 次，日均约 136 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aerisweather/react-mapsgl 还在维护吗？

最新版本 0\.1\.2 发布于 2023/02/22（3 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/02/10。作者已将其标记为弃用，新项目建议寻找替代方案。