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
相关推荐
清纯世纪10 小时前
Arcgis 10.7 矢量的分区统计
arcgis
猫头虎11 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip
谢尔登14 小时前
【React Native】布局和 Stack 、Slot
javascript·react native·react.js
Misha韩14 小时前
React Native 基础tabBar和自定义tabBar - bottom-tabs
android·react native
杨超越luckly1 天前
ArcGISPro应用指南:使用ArcGIS Pro创建与优化H3六边形网格
arcgis·信息可视化·数据可视化·shp·h3网格
柳晓黑胡椒1 天前
Cesium源码打包
arcgis
xa138508691 天前
ARCGIS PRO DSK 颜色选择控件(ColorPickerControl)的调用
arcgis
wayne2142 天前
从零开始学习 Redux:React Native 项目中的状态管理
学习·react native·react.js
OEC小胖胖2 天前
React Native 在 Web 前端跨平台开发中的优势与实践
前端·react native·react.js·前端框架·web
henujolly2 天前
react native学习record one month
学习·react native·react.js