react-native-mapbox-gl在RN中的使用 --学习笔记
搭建好react-native环境后，初始化项目
参见官方搭建环境
这里引入react-native-mapbox-gl也分新旧两个版本（旧的已经不维护了），推荐使用新的，功能模块也比较多
然后引入react-native-mapbox-gl
1、旧版本
旧仓库地址
步骤
1. npm install https://github.com/nitaliano/react-native-mapbox-gl/tarball/master
2.在android/build.gradle配置如下
allprojects {
repositories {
jcenter()
maven { url "$rootDir/../node_modules/react-native/android" }
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
}
}
3.android/app/build.gradle加入
dependencies {
implementation project(':mapbox-react-native-mapbox-gl')
}
4.得保证android sdk 28版本
找到目录android\build.gradle查看
compileSdkVersion 28
buildToolsVersion "28.0.3"
targetSdkVersion 26
5.进入android/settings.gradle 加入
include ':mapbox-react-native-mapbox-gl'
project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl')
6.进入android\app\src\main\java\com\awesomeproject\MainApplication.java修改
在顶部添加
import com.facebook.react.shell.MainReactPackage;
import com.mapbox.rctmgl.RCTMGLPackage;
找到
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
修改成
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTMGLPackage()
);
}
使用方式
import MapboxGL from '@mapbox/react-native-mapbox-gl'; //地图插件
this.state = {
GeoOneGeosjon: {
id: 'GeoOneGeosjon',
url: 'https:/www.sadsadad.com/geo.geojson',
},
GeoTwoGeosjon: {
type: 'FeatureCollection',
features: [],
},
}
<MapboxGL.MapView
id="Map"
ref={c => (this.map = c)}
style={{flex: 1}}
minZoomLevel={16} //最小缩放级别
maxZoomLevel={18} //最大缩放级别
centerCoordinate={this.state.centerCoordinate} //中心点坐标
styleURL="mapbox://styles/smirk/ck4nnjhco37491co3s9c71ack" //底图样式
logoEnabled={false} //禁用地图上的徽标。
attributionEnabled={false} //Mapbox服务条款
compassEnabled={false}> //禁用指南针在地图上显示
<MapboxGL.ShapeSource {...this.state.GeoOneGeosjon}> //自己的geojson数据,这里有两种引用形式，这里引用geojson是用ulr的形式，第二种看下面
<MapboxGL.FillLayer
id="GeoOneGeosjon"
style={styles.geojsonstyle} //填充的样式
filter={[
'all',
['==', '$type', 'Polygon'],
['!=', 'type', 'disable'],
]}
/>
<MapboxGL.ShapeSource
id="GeoTwo"
shape={this.state.GeoTwoGeosjon}> //这是第二种引入方式
<MapboxGL.FillLayer
id="GeoTwoGeosjon"
style={styles.geojsonstyle} //填充的样式
filter={[
'all',
['==', '$type', 'Polygon'],
['!=', 'type', 'disable'],
]}
/>
</MapboxGL.MapView>
这里大致说一下上面的style geojsonstyle（旧仓库的形式）
const styles= MapboxGL.StyleSheet.create({
normalstyle: {
fillColor: '#dcf3f3', //这是纯粹的普通填充形式，全部为改颜色
},
geojsonstyle: MapboxGL.StyleSheet.source( //这是从数据源的properties中筛选出属性为arr的不同值并为他们分别填充不同颜色
[
['A', '#f9fdfc'],
['B', '#f9fdfc'],
['C', '#f3f6ff'],
['D', '#fcfbf6'],
['other', '#fceeee'],
],
'arr',
MapboxGL.InterpolationMode.Categorical,
),
})
2、新版本
react-native-mapbox-gl/map
新版本就不用配置这么多，这么麻烦了
直接npm install 他的库就好了新仓库地址
使用方式
<MapboxGL.MapView
id="Map"
onRegionDidChange={this.onRegionDidChange}
ref={c => (this.map = c)}
style={{flex: 1}}
styleURL="mapbox://styles/smirk/ck4nnjhco37491co3s9c71ack"
logoEnabled={false}
attributionEnabled={false}
compassEnabled={false}>
<MapboxGL.Camera
minZoomLevel={16}
maxZoomLevel={22}
pitch={20}
centerCoordinate={this.state.centerCoordinate}
ref={c => (this.camera = c)}
/>
<MapboxGL.ShapeSource {...this.state.GeoOneGeosjon}> //自己的geojson数据,这里有两种引用形式，这里引用geojson是用ulr的形式，第二种看下面
<MapboxGL.FillLayer
id="GeoOneGeosjon"
style={styles.geojsonstyle} //填充的样式
filter={[
'all',
['==', '$type', 'Polygon'],
['!=', 'type', 'disable'],
]}
/>
<MapboxGL.ShapeSource
id="GeoTwo"
shape={this.state.GeoTwoGeosjon}> //这是第二种引入方式
<MapboxGL.FillLayer
id="GeoTwoGeosjon"
style={styles.geojsonstyle} //填充的样式
filter={[
'all',
['==', '$type', 'Polygon'],
['!=', 'type', 'disable'],
]}
/>
</MapboxGL.MapView>
跟旧仓库不同的是，中心点坐标以及缩放比例等抽出来放在了MapboxGL.Camera这个组件里面
还有就是style的不一样
const layerstyle = {
normalstyle: {
fillColor: '#dcf3f3', //普通形式
},
geojosonstyle: { //筛选分别填充
fillColor: [
'case',
['==', ['get', 'arr'], 'A'],
'#dcf3f3',
['==', ['get', 'arr'], 'B'],
'#dcf3f3',
['==', ['get', 'arr'], 'C'],
'#e8efff',
['==', ['get', 'arr'], 'D'],
'#fff6e6',
['==', ['get', 'arr'], 'other'],
'#fceeee',
'#eeeeed',
],
},
}