@wayz/react-gl

安装

npm install --save @wayz/react-gl

or

yarn add @wayz/react-gl

升级

npm update @wayz/react-gl

or

yarn upgrade @wayz/react-gl

API参考

$3

- MapGL
- AMapGL
- BMapGL

$3

- ArcLayer
- GeoHashLayer
- PulseArcLayer
- AnimateArcLayer
- LabeledPolygonLayer
- LabeledGeoJsonLayer
- GeoJsonLayer
- PolygonLayer
- IconLayer
- IconClusterLayer
- IconLayerInViewport
- ScatterplotLayer
- PathLayer
- TextLayer
- HeatmapLayer
- TripsLayer

$3

- useMapGLContext
- MapGLContext

$3

- domToIconMapping (根据数据和自定义html生成函数, 生成iconAtlas和 iconMapping)

使用

引入组件到你的应用中

使用 mapbox 地图底图

``jsx
import { MapGL, ArcLayer, useMapGLContext, MapGLContext, ...} from '@wayz/react-gl'
// MapGL, AMapGL 支持DeckGL配置 https://deck.gl/docs/api-reference/core/deck
const data = [
{
"type": "Feature",
"properties": {
"type": 0,
"ratio": 0.0369,
"lineWidthRatio": 1
},
"geometry": {
"type": "LineString",
"coordinates": [
[
116.405285,
39.904989
],
[
115.482331,
38.867657
]
]
}
}
// .......
]
const example = () => (
// mapbox token mapbox官网申请
MAP_ACCESS_TOKEN=''
mapStyle= 'light',
initialViewState= {
longitude: 116.405285,
latitude: 39.904989,
zoom: 3,
bearing: 0,
pitch: 0,
altitude: 1.5, // 默认可以不传, 值不能设置为0, 否则会抛出错误
}
// 监听viewState变化
onViewStateChange= {viewState => {}}
// 控制台输出, layers便于调试
debug={true}
>
// 所有的配置项参考文档: https://deck.gl/docs/api-reference/layers/arc-layer
id='ArcLayer'
data={data}
visible={true}
getHeight={1}
getSourceColor={(d) => [Math.sqrt(d.ratio * 10000), 140, 0]}
getSourcePosition={(d) => d.geometry.coordinates[0]}
getTargetColor={(d) => [Math.sqrt(d.ratio * 10000), 200, 100]}
getTargetPosition={(d) => d.geometry.coordinates[1]}
// 扩展参数
zIndex={3}
// events
onClick={(info)=> {}}
onHover={(info) => {}}
onDragStart={(info) => {}}
onDrag={(info) => {}}
onDragEnd={(info) => {}}
/>

)
`

在 Typescript 中使用

`tsx
type D = {
type: string
properties: {
type: numer
ratio: number
lineWidthRatio: number
}
geometry: {
type: LineString
coordinates: any
}
}

// 不传默认, 默认解析为数据类型

id="ArcLayer"
data={data}
visible={true}
getHeight={1}
getSourceColor={(d: D) => [Math.sqrt(d.ratio * 10000), 140, 0]}
getSourcePosition={(d) => d.geometry.coordinates[0]}
getTargetColor={(d) => [Math.sqrt(d.ratio * 10000), 200, 100]}
getTargetPosition={(d) => d.geometry.coordinates[1]}
// 扩展参数
zIndex={3}
// events
onClick={(info) => {}}
onHover={(info) => {}}
onDragStart={(info) => {}}
onDrag={(info) => {}}
onDragEnd={(info) => {}}
/>
`

使用高德地图底图

`tsx
import { AMapGL, ArcLayer, useMapGLContext, MapGLContext, ...} from '@wayz/react-gl'
// MapGL, AMapGL 支持DeckGL配置 https://deck.gl/docs/api-ref } from '@wayz/react-gl'
const data = [
{
"type": "Feature",
"properties": {
"type": 0,
"ratio": 0.0369,
"lineWidthRatio": 1
},
"geometry": {
"type": "LineString",
"coordinates": [
[
116.405285,
39.904989
],
[
115.482331,
38.867657
]
]
}
}
// .......
]
const example = () => (
// 高德key
MAP_ACCESS_TOKEN=''
mapStyle= 'light',
initialViewState= {
longitude: 116.405285,
latitude: 39.904989,
zoom: 3,
bearing: 0,
pitch: 0,
altitude: 1.5, // 默认可以不传, 值不能设置为0, 否则会抛出错误
}
// 监听viewState变化
onViewStateChange= {viewState => {}}
// 控制台输出, layers便于调试
debug={true}
// 支持高德地图配置 https://lbs.amap.com/api/javascript-api/reference/map
mapOptions={{}}

>
// 所有的配置项参考文档: https://deck.gl/docs/api-reference/layers/arc-layer
id='ArcLayer'
data={data}
visible={true}
getHeight={1}
getSourceColor={(d) => [Math.sqrt(d.ratio * 10000), 140, 0]}
getSourcePosition={(d) => d.geometry.coordinates[0]}
getTargetColor={(d) => [Math.sqrt(d.ratio * 10000), 200, 100]}
getTargetPosition={(d) => d.geometry.coordinates[1]}
// 扩展参数
zIndex={3}
// events
onClick={(info)=> {}}
onHover={(info) => {}}
onDragStart={(info) => {}}
onDrag={(info) => {}}
onDragEnd={(info) => {}}
/>

)
`

使用百度地图底图

`tsx
import { BMapGL, ArcLayer, useMapGLContext, MapGLContext, ...} from '@wayz/react-gl'
// MapGL, BMapGL 支持DeckGL配置 https://deck.gl/docs/api-ref } from '@wayz/react-gl'
const data = [
{
"type": "Feature",
"properties": {
"type": 0,
"ratio": 0.0369,
"lineWidthRatio": 1
},
"geometry": {
"type": "LineString",
"coordinates": [
[
116.405285,
39.904989
],
[
115.482331,
38.867657
]
]
}
}
// .......
]
const example = () => (
// 高德key
MAP_ACCESS_TOKEN=''
mapStyle= 'light',
initialViewState= {
longitude: 116.405285,
latitude: 39.904989,
zoom: 3,
bearing: 0,
pitch: 0,
altitude: 1.5, // 默认可以不传, 值不能设置为0, 否则会抛出错误
}
// 监听viewState变化
onViewStateChange= {viewState => {}}
// 控制台输出, layers便于调试
debug={true}
// 支持高德地图配置 https://lbs.amap.com/api/javascript-api/reference/map
mapOptions={{}}

>
// 所有的配置项参考文档: https://deck.gl/docs/api-reference/layers/arc-layer
id='ArcLayer'
data={data}
visible={true}
getHeight={1}
getSourceColor={(d) => [Math.sqrt(d.ratio * 10000), 140, 0]}
getSourcePosition={(d) => d.geometry.coordinates[0]}
getTargetColor={(d) => [Math.sqrt(d.ratio * 10000), 200, 100]}
getTargetPosition={(d) => d.geometry.coordinates[1]}
// 扩展参数
zIndex={3}
// events
onClick={(info)=> {}}
onHover={(info) => {}}
onDragStart={(info) => {}}
onDrag={(info) => {}}
onDragEnd={(info) => {}}
/>

)
``