@wayz/react-gl

# @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参考 ### 地图组件 - MapGL - AMapGL - BMapGL ### 图层组件 - [ArcLayer](https://deck.gl/docs/api-reference/layers/arc-layer) - GeoHashLayer - PulseArcLayer - AnimateArcLayer - LabeledPolygonLayer - LabeledGeoJsonLayer - [GeoJsonLayer](https://deck.gl/docs/api-reference/layers/geojson-layer) - [PolygonLayer](https://deck.gl/docs/api-reference/layers/polygon-layer) - [IconLayer](https://deck.gl/docs/api-reference/layers/icon-layer) - IconClusterLayer - IconLayerInViewport - [ScatterplotLayer](https://deck.gl/docs/api-reference/layers/scatterplot-layer) - [PathLayer](https://deck.gl/docs/api-reference/layers/path-layer) - [TextLayer](https://deck.gl/docs/api-reference/layers/text-layer) - HeatmapLayer - [TripsLayer](https://deck.gl/docs/api-reference/geo-layers/trips-layer) ### Context组件 - useMapGLContext - MapGLContext ### 工具函数 - 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 = () => ( <MapGL // 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 <ArcLayer 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) => {}} /> </MapGL> ) ``` 在 Typescript 中使用 ```tsx type D = { type: string properties: { type: numer ratio: number lineWidthRatio: number } geometry: { type: LineString coordinates: any } } // 不传默认, 默认解析为数据类型 <ArcLayer<D> 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 = () => ( <AMapGL // 高德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 <ArcLayer 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) => {}} /> </AMapGL> ) ``` 使用百度地图底图 ```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 = () => ( <BMapGL // 高德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 <ArcLayer 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) => {}} /> </BMapGL> ) ```