快捷導(dǎo)航

React Native 集成 ArcGIS 地圖的詳細過程

更新時間：2024年06月21日 09:37:35 作者：kongxx

ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫,本文給大家介紹React Native 集成 ArcGIS 地圖的詳細過程,感興趣的朋友跟隨小編一起看看吧

ArcGIS官方提供了 JavaScript SDK，也提供了 ArcGIS-Runtime-SDK-iOS，但是并沒有提供 React Native的版本，所以這里使用了 react-native-arcgis-mapview 庫，這個庫比較老，支持的 ArcGIS-Runtime-SDK-iOS 版本是100.4，但是在使用的時候發(fā)現(xiàn)，在使用pod install安裝的時候總是會下載失敗，所以后面手動將 ArcGIS-Runtime-SDK-iOS 的版本改為 100.14.1。

創(chuàng)建工程

初始化工程（需要科學(xué)上網(wǎng)）

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