react-mapbox-vis是基于mapbox-gl-js进行了包装。
- 📦 开箱即用的高质量 React 组件。
- 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
- 🌈 基于 React 框架对
mapbox-gl-js进行组织抽象，能更好地融合于项目。
- 现代浏览器。
mapbox-gl最低版本^1.12.0。react最低版本^16.13.1。react-dom最低版本^16.13.1。- v1.2.0 版本后，取消了对结束了对 Internet Explorer 11 的支持。
typescript最低版本^3.8.3。
react-mapbox-vis中，通过 React Context 内置了 map 实例。通过<Map />组件构建地图实例，其它的地图图层，标记，弹框等已自动绑定地图实例，并且其都在<Map> ... </Map> 内部创建，作为其子组件，不用额外添加属性map。
import Map, { Marker } from 'react-mapbox-vis'
<Map mapboxOptions={{
accessToken: "xxxxxx",
center: [115.8962, 28.673558],
style: "mapbox://styles/cl61tau52007016mvi60z4sew",
zoom: 13,
pitch: 45,
}} className="map">
<Marker lngLat={[115.415, 27.68857]}>MapMarker</Marker>
</Map>
- ✅ Layer 创建地图图层，支持
"symbol" | "circle" | "line" | "background" | "fill-extrusion" | "fill" | "heatmap" | "hillshade" | "raster"类型的图层。 - ✅
Image用作图标icon-image的图像添加到地图中； - ✅
Marker创建标记。 - ✅
Popup弹窗。