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。

创建工程

  • 初始化工程(需要科学上网)
shell 复制代码
npx react-native init MyReactNativeApp
  • 安装依赖
shell 复制代码
cd MyReactNativeApp/ios
pod install

安装react-native-arcgis-mapview

  • 使用 npm 安装 react-native-arcgis-mapview 库
shell 复制代码
cd MyReactNativeApp
npm install react-native-arcgis-mapview
  • 修改 ios/Podfile 文件,在最后添加
shell 复制代码
pod 'RNArcGISMapView', :path => "../node_modules/react-native-arcgis-mapview/ios"
  • 编辑 node_modules/react-native-arcgis-mapview/ios/RNArcGISMapView.podspec,修改 dependency 版本为 100.14.1。
shell 复制代码
s.dependency 'ArcGIS-Runtime-SDK-iOS', '100.4'
=>
s.dependency 'ArcGIS-Runtime-SDK-iOS', '100.14.1'
  • 使用 pod install 安装 ArcGIS-Runtime-SDK-iOS
shell 复制代码
cd MyReactNativeApp/ios
pod install

使用 react-native-arcgis-mapview

  • 在 App.js 中使用 react-native-arcgis-mapview 库,完整代码如下
JavaScript 复制代码
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

验证

  • 运行项目,验证是否成功。
shell 复制代码
npm start
相关推荐
咔咔库奇21 小时前
【react】react Native
前端·react native·react.js
赵钰老师1 天前
【SWAT模型应用】AI辅助下基于ArcGIS Pro的SWAT模型全流程高效建模实践与深度进阶应用
人工智能·arcgis·chatgpt·数据分析
白水先森3 天前
ArcGIS Pro中创建最低成本路径的详尽教程
经验分享·arcgis·arcgispro
小仙有礼了3 天前
ArcGis for js 4.x实现测量,测距,高程的功能
javascript·算法·arcgis
白水先森3 天前
ArcGIS Pro中打造精美高程渲染图的全面指南
经验分享·arcgis·信息可视化·arcgispro
GIS瞧葩菜3 天前
ArcGis和Super Map
arcgis·supermap
白水先森4 天前
ArcGIS Pro在洪水淹没分析中的应用与实践
经验分享·arcgis
十步杀一人_千里不留行4 天前
React Native 下拉选择组件首次点击失效问题的深入分析与解决
javascript·react native·react.js
m0_748232644 天前
鸿蒙NEXT(五):鸿蒙版React Native架构浅析
react native·架构·harmonyos
白水先森4 天前
ArcGIS Pro热力图制作指南:从基础到进阶
经验分享·arcgis·信息可视化