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组件传值的四种方法

    react组件传值的四种方法

    本文主要介绍了react组件传值的四种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • ChatGLM 集成LangChain工具详解

    ChatGLM 集成LangChain工具详解

    这篇文章主要为大家介绍了Svelte和React框架使用比较,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 基于React Native 0.52实现轮播图效果

    基于React Native 0.52实现轮播图效果

    这篇文章主要为大家详细介绍了基于React Native 0.52实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Docker部署SpringBoot项目到云服务器的实现步骤

    Docker部署SpringBoot项目到云服务器的实现步骤

    Docker作为一种轻量级的容器化技术,为开发者提供了快速、便捷的部署方案,本文主要介绍了Docker部署SpringBoot项目到云服务器,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • 教你如何实现在react项目中嵌入Blazor

    教你如何实现在react项目中嵌入Blazor

    这篇文章主要介绍了如何实现在react现有项目中嵌入Blazor,通过这个案例我们可以知道 blazor也可以像react那样嵌入在任何的现有项目中,并且使用方便,需要的朋友可以参考下
    2023-01-01
  • React SSG实现Demo详解

    React SSG实现Demo详解

    这篇文章主要为大家介绍了React SSG实现Demo详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-07-07
  • React新文档切记不要滥用Ref

    React新文档切记不要滥用Ref

    这篇文章主要为大家介绍了React新文档滥用Ref出现的问题详解,以及如何正确的使用Ref,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2022-07-07
  • react hooks中的useState使用要点

    react hooks中的useState使用要点

    这篇文章主要为大家介绍了react hooks中的useState使用要点详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • React的特征单向数据流学习

    React的特征单向数据流学习

    这篇文章主要为大家介绍了React的特征单向数据流学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • React中井字棋游戏的实现示例

    React中井字棋游戏的实现示例

    本文主要介绍了React中井字棋游戏的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论