react-native-mapbox-gl 的使用介绍

作者：三爻

2024-05-27
湖北
本文字数：1683 字
阅读完需：约 6 分钟

1.背景

在进行开发地图的时候，老项目使用的国内的 ract-native-amap 高德 sdk, 随着业务的发展，与使用要求精度提高，加上与 web 端定制的地图天地图与高德 sdk 地图精度不一样，坐标需要转换，会出现坐标精度丢失，需要进行改造地图模块的改造，

2. SDK 的选择

在市面上常见的几个厂商地图商，国内有,高德, 百度,腾讯,要使用天地图所以放弃国内的，国外不太了解知道有 Google Map 和 mapbox , Esri ArcGIS，CartoDB，google map 某些原因无法使用，esri 对 react-native 的支持非常局限，所以最后选择了 mapbox 使用。

这里提一句最开始改造时，没有考虑会单独使用一些定制地图坐标系为 epsg:4490 的地图，mapbox 无法支持 4490 的坐标系，范围是全球范围，在使用自定义地图的时候，大小范围某部分的切片。

3. react-native-mapbox-gl 引用

rn 版本的 mapbox 从 v7 版本分为了两个库 nitaliano/react-native-mapbox-gl: A Mapbox GL react native module for creating custom maps (github.com) 和 rnmapbox/maps: A Mapbox react native module for creating custom maps (github.com)。重要区别在于对 react native 的版本支持， nmapbox 这个里面版本功能最新。
直接运行 ❯ npm i @mapbox/react-native-mapbox-gl ,进行安装,之后需要在 Android ios 目录下分别处理

a. Android

需要运行下 npx link @mapbox/react-native-mapbox-gl ,进行依赖，具体会自动处理，如果无法自动，就需要手动处理

b. ios

在 podfile 添加 pod 'react-native-mapbox-gl', :path => '../node_modules/@mapbox/react-native-mapbox-gl' 并运行 pod i

在 app 入口路由处，添加 MapboxGL.setAccessToken(MAPBOX_DOWNLOADS_TOKEN); MAPBOX_DOWNLOADS_TOKEN 为申请的 key

4. mapbox 的使用

1. 地图显示

 const raster_vec_w={    id: 'raster_vec_w',    url: 'https://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的key',    // url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=你的key',    tileSize: 256,    minZoomLevel:1,    maxZoomLevel:20,  }               

             

                <MapboxGL.MapView                    ref={(c) => (this.map = c)}                    style={StyleSheet.absoluteFill}                    animated={true}                    zoomLevel={9}                    onPress={this.onPress}                    onLongPress={this.onLongPress}                    centerCoordinate={SF_NB_COORDINATE}                    minZoomLevel={7}                    maxZoomLevel={20}                    // showUserLocation={true}                    // onUserLocationUpdate={this.onUserLocationUpdate}                    // userTrackingMode={MapboxGL.UserTrackingModes.FollowWithHeading}                    onRegionDidChange={this.onRegionDidChange}                    localizeLabels={true}                    // styleURL=''  //底图样式 无效                    logoEnabled={false}                    rotateEnabled={false}                    attributionEnabled={false}                    compassEnabled={false}                >                                          {/* 天地图 */}        <MapboxGL.RasterSource {...raster_vec_w}>            <MapboxGL.RasterLayer                id="raster_vec_w"                sourceID="raster_vec_w"                style={{ rasterOpacity: 1 }}            />        </MapboxGL.RasterSource>                     </MapboxGL.MapView>