反应-映射gl
反应-映射gl 我们的反光包装 地图GL 服务和 SDK,一个Javascript SDK,它允许您轻松地自定义并整合各种高质量的,以矢量为基础的天气数据,图像,以及可视化到您的应用程序和自定义解决方案中.
支持的绘图图书馆
MapsGL支持以下第三方绘图库:
开始
yarn add @aerisweather/react-mapsgl
实例
ES6为 react-mapbox-gl数字 :
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 数据源和相关地层添加到地图中,类似于 我们文档中的例子。 。 。 .
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 目录 :
> cd ./examples
> yarn install
> yarn develop
您需要重命名 .env.txt 改为 .env 并添加必要的 AerisWeather 和第三方映射密钥 yarn develop。 。 。 .
打开 examples/src/index.ts 根据您想要的映射库, 文件并互换已提供组件 :
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 文档 用于完整使用文件和关于与MapsGL合作和使用它的信息.
地图GL 资源
使用以下的 MapsGL 资源来更多地了解 SDK 和 广泛的定制选项, 或查看各种演示和实例 :
支助
关于与此有关的问题和专题请求 反应-映射gl 图书馆,请提交 Github 问题.
对于所有 MapsGL 特定支持, 提交新票 包含任何问题、错误报告或特性建议。 你也可以在推特上联系我们 @ AerisWeather (英语)。 。 。 .