React Native 集成 ArcGIS 地图的详细过程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并没有提供 React Native的版本,所以这里使用了 react-native-arcgis-mapview 库,这个库比较老,支持的 ArcGIS-Runtime-SDK-iOS 版本是100.4,但是在使用的时候发现,在使用pod install安装的时候总是会下载失败,所以后面手动将 ArcGIS-Runtime-SDK-iOS 的版本改为 100.14.1。
创建工程
初始化工程(需要科学上网)
npx react-native init MyReactNativeApp
安装依赖
cd MyReactNativeApp/ios pod install
安装react-native-arcgis-mapview
使用 npm 安装 react-native-arcgis-mapview 库
cd MyReactNativeApp npm install react-native-arcgis-mapview
修改 ios/Podfile 文件,在最后添加
pod 'RNArcGISMapView', :path => "../node_modules/react-native-arcgis-mapview/ios"
编辑 node_modules/react-native-arcgis-mapview/ios/RNArcGISMapView.podspec,修改 dependency 版本为 100.14.1。
s.dependency 'ArcGIS-Runtime-SDK-iOS', '100.4' => s.dependency 'ArcGIS-Runtime-SDK-iOS', '100.14.1'
使用 pod install 安装 ArcGIS-Runtime-SDK-iOS
cd MyReactNativeApp/ios pod install
使用 react-native-arcgis-mapview
在 App.js 中使用 react-native-arcgis-mapview 库,完整代码如下
import React, {useRef, useState}from 'react' import {View, Text, Button, StyleSheet } from 'react-native' import ArcGISMapView, { setLicenseKey } from 'react-native-arcgis-mapview' function App() { const key = '<key>' setLicenseKey(key) const mapView = useRef(null) const basemap = 'https://www.arcgis.com/home/item.html?id=6b6b9cea06964cb38d8a654964c347ab' return ( <View style={styles.container}> <ArcGISMapView style={styles.map} initialMapCenter={[{latitude: 32.788, longitude: -79.940, scale: 10000.0}]} basemapUrl={basemap} ref={mapView} /> <Button title="Test" onPress={() => { console.log(mapView.current.props.basemapUrl) }} /> </View> ); } var styles = StyleSheet.create({ container: { flex: 1, }, map: { flex: 1, }, }) export default App
验证
运行项目,验证是否成功。
npm start
到此这篇关于React Native 集成 ArcGIS 地图的文章就介绍到这了,更多相关React Native ArcGIS 地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Docker部署SpringBoot项目到云服务器的实现步骤
Docker作为一种轻量级的容器化技术,为开发者提供了快速、便捷的部署方案,本文主要介绍了Docker部署SpringBoot项目到云服务器,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
最新评论