Demo使用指南

初始化Demo

下载

git clone https://github.com/iMobileforJS/SMMobileDemo.git

初始化项目

　　项目根目录（即SMMobileDemo\目录）下执行npm install。

　　iOS版本，SMMobileDemo\ios目录下运行命令pod install。

　　注：pod install时报错，库下载失败，运行命令pod repo list，查看是否有多个语言，若有tsinghua-git-cocoapods除外的其他语言，则运行命令pod repo remove删除后（例pod repo remove trunk），再次运行pod install。

查看语言

下载相关包和示范数据

　　因aar包和示范数据过大，请到云盘下载。地址: https://pan.baidu.com/s/1V9S3j6eL0-qvyVYrZHCTYw，提取码: 6xzc。

　　下载后，将包和数据放入指定位置。

（1）.Android版

　　数据：Navigation_EXAMPLE.zip，放入/SMMobileDemo/android/app/src/main/assets/中。

　　aar包：imobileforreactnative.aar 和 mediapipehandtracking.aar，放入/SMMobileDemo/nodemodules/imobilefor_reactnative/android/libs/中(libs目录需用户创建）。

（1）.iOS版

　　数据：Navigation_EXAMPLE.zip，放入/SMMobileDemo/ios/assets/中。

　　framework库：SuperMap.framework，放入/SMMobileDemo/nodemodules/imobilefor_reactnative/ios/iPhoneOS.sdk下。

　　注：如果需要替换自有数据，在项目工程文件“SMMobileDemo/src/config.ts”中,替换数据名、工作空间、以及地图名。如下格式：

/** 默认导航示范地图包名 */
const DEFAULT_DATA = 'Navigation_EXAMPLE'
/** 默认导航示范地图工作空间名 */
const DEFAULT_DATA_WORKSPACE = 'beijing'
/** 默认导航示范地图名 */
const DEFAULT_DATA_MAP = 'beijing'
  export {
    DEFAULT_DATA,
    DEFAULT_DATA_WORKSPACE,
    DEFAULT_DATA_MAP,
}

项目配置

（1）.Android权限及许可配置

　　配置文件/SMMobileDemo/android/app/src/main/AndroidManifest.xml中，添加许可(可根据实际使用功能，增删许可)。

　　注：文件读取权限、手机状态权限、网络权限为必须（以下前4项）。

<uses-permissionandroid:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.REORDER_TASKS" />
<uses-permissionandroid:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permissionandroid:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
<uses-permissionandroid:name="android.permission.KILL_BACKGROUND_PROCESSES" />
<uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.READ_PROFILE" />
<uses-permissionandroid:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.VIBRATE"/>

<application
<!-- 适配Android Q以上版本,文件储存 -->
android:requestLegacyExternalStorage="true"
<!-- 添加http -->
<uses-library android:name="org.apache.http.legacy"android:required="false" />
</application>

（2）.Android 6.0及其以上版本需要动态申请权限在js中调用

　　配置文件SMMobileDemo/App.tsx。

requestPermission = async() => {
  const results: any = await PermissionsAndroid.requestMultiple([
    'android.permission.READ_PHONE_STATE',
    'android.permission.READ_EXTERNAL_STORAGE',
    'android.permission.WRITE_EXTERNAL_STORAGE',])
}

运行Demo（Android 版）

（1）.连接设备

　　通过USB连接设备后，在命令行执行以下命令。

adb reverse tcp:8081 tcp:8081

（2）.启动服务

　　项目根目录(SMMobileDemo)执行以下命令。

react-native start

（3）.安装Demo

　　注：请使用Android Studio 4.2及以上版本。在android studio中打开工程，运行安装，安装过程中若出现报错Execution failed fortask ‘:app:validateSigningDebug’，可在工程目录下命令行执行以下命令：

keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA –validity 10000；

　　执行命令需输入的密码在SMMobileDemo/app/build.gradle中keyPassword。

signingConfigs {
 debug {
  storeFile file('debug.keystore')
  storePassword 'android'
  keyAlias 'androiddebugkey'
  keyPassword 'android'
 }
}

　　命令执行后将生成文件debug.keystore，将该文件拷贝到工程SMMobileDemo/android/app下，再次运行即可。

　　注：运行demo后，点击申请权限，若未正常申请权限，退出App重启即可。

运行Demo（iOS版）

　　使用Xcode打开工程，连接设备后，直接运行安装即可。

imobileforreactnative导航示例：

import React from 'react'import { SMMapView, SMap, FileTools, WorkspaceType } from 'imobile_for_reactnative'
export default MapView extends React.Component {
  _onGetInstance = () => {
    try {
      const home = await FileTools.appendingHomeDirectory()
      const exampleMapName = 'beijing'
      const path = `${home + ConstPath.ExternalData}/Navigation_EXAMPLE/${exampleMapName}.smwu`
      const mapPath = `${home + ConstPath.UserPath + DEFAULT_USER_NAME}/${ConstPath.RelativeFilePath.Map + exampleMapName}.xml`
      const data = {
        server: path,
        type: WorkspaceType.SMWU,
      }
      let result: string[] = []
      let defaultDataExist = await FileTools.fileIsExist(path)
      let mapFileExist = await FileTools.fileIsExist(mapPath)
      if (defaultDataExist && !mapFileExist) {
        // 导入地图数据
        result = await SMap.importWorkspaceInfo(data)
      }
      if (result) {
        // 打开地图
        let mapInfo = await this.props.openMap({
          name: 'beijing',
          path: mapPath,
        })
        // 获取地图信息
        const mapInfo2 = await SMap.getMapInfo()
      }
    } catch(e) {}
  }
  /** 路径分析 */
  analystRoat = async () => {
    try {
      //添加起点，添加终点 设置室外导航参数 进行室外路径分析
      await SMap.getStartPoint(startPoint.x, startPoint.y, false)
      await SMap.getEndPoint(endPoint.x, startPoint.y, false)
      await SMap.startNavigation(navParams[0])
      const result = await SMap.beginNavigation(
        startPoint.x,
        startPoint.y,
        doorPoint.x,
        doorPoint.y,
      )
    } catch(e) {}
  }
  /** 导航 */
  navigate = () => {
    try {
      // 导航类型 0:真实导航 1:模拟导航
      SMap.outdoorNavigation(1)
    } catch(e) {}
  }
  render() {
    return (
      <SMMapView
        style={{flex: 1}}
        onGetInstance={this._onGetInstance}
      />
    )
  }
}