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,但是在使用的时候发现,在使用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 地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react-router-dom之异步加载路由方式

    react-router-dom之异步加载路由方式

    这篇文章主要介绍了react-router-dom之异步加载路由方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 从零开始最小实现react服务器渲染详解

    从零开始最小实现react服务器渲染详解

    这篇文章主要介绍了从零开始最小实现react服务器渲染详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 解决React报错Cannot find namespace context

    解决React报错Cannot find namespace context

    这篇文章主要为大家介绍了React报错Cannot find namespace context分析解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React中如何设置多个className

    React中如何设置多个className

    这篇文章主要介绍了React中如何设置多个className问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • React+TypeScript+webpack4多入口配置详解

    React+TypeScript+webpack4多入口配置详解

    这篇文章主要介绍了React+TypeScript+webpack4多入口配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • React-Native左右联动List的示例代码

    React-Native左右联动List的示例代码

    本篇文章主要介绍了React-Native左右联动List的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 基于TypeScript 的React 项目创建

    基于TypeScript 的React 项目创建

    本文介绍了如何创建基于TypeScript的React项目,使用Create React App(CRA)工具可以快速搭建开发环境,通过--template typescript参数初始化TS项目,感兴趣的可以了解一下
    2026-05-05
  • React中完整实例讲解Recoil状态管理库的使用

    React中完整实例讲解Recoil状态管理库的使用

    这篇文章主要介绍了React中Recoil状态管理库的使用,Recoil的产生源于Facebook内部一个可视化数据分析相关的应用,在使用React的实现的过程中,因为现有状态管理工具不能很好的满足应用的需求,因此催生出了Recoil,对Recoil感兴趣可以参考下文
    2023-05-05
  • 基于react组件之间的参数传递(详解)

    基于react组件之间的参数传递(详解)

    下面小编就为大家带来一篇基于react组件之间的参数传递(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React从react-router路由上做登陆验证控制的方法

    React从react-router路由上做登陆验证控制的方法

    本篇文章主要介绍了React从react-router路由上做登陆验证控制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论