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
相关推荐
Misha韩19 小时前
React Native 亲切的组件们(函数式组件/class组件)和陌生的样式
react native·函数式组件·class组件
1234Wu19 小时前
React Native 接入 eCharts
javascript·react native·react.js
杨超越luckly2 天前
ArcGISPro应用指南:ArcGISPro制图全流程详解
arcgis·信息可视化·gis·制图·arcgispro
~央千澈~2 天前
UniApp完全支持快应用QUICKAPP-以及如何采用 Uni 模式开发发行快应用优雅草卓伊凡
arcgis
wen's2 天前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
敲敲敲-敲代码2 天前
【ArcGIS10.2】网络数据集构建---最短路径分析
网络·arcgis
朝阳393 天前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
冰冷的bin3 天前
【React Native】自定义倒计时组件CountdownView
react native
人工智能教学实践3 天前
【基于Echarts的地图可视化】
arcgis
Cacciatore->3 天前
Electron 快速上手
javascript·arcgis·electron