iMobile for ReactNative, 是SuperMap iMobile推出的一款基于React-Native框架的移动应用开发工具,基于该开发工具,用户可以 使用JavaScript XML开发语言,开发出在Android和iOS操作系统下运行的原声移动GIS应用,入门门槛低,一次开发,处处运行。
iMobile for ReactNative is based on ReactNative.Please ensure that you have initialized the RN project before executing the following command and that it is already under the project path.
$ npm install imobile_for_reactnative --save
-
In XCode, in the project navigator, click
General
➜Linked Frameworks and Libraries
,add Frameworks and c++ library required by iMobile. -
Download SuperMap.framework to imobile_for_reactnative/ios/iPhoneOS.sdk/. Add CocoaAsyncSocket.framework, GLTFSceneKit.framework, JKVValue.framework, RMQClient.framework and ZipArchive.framework from imobile_for_reactnative/ios/iPhoneOS.sdk/SuperMap.framework/Versions/A/Resources/ThirdLib/.
And Embed & Sign these framework.
-
Click
Copy Bundle Resources
, add imobile_for_reactnative/ios/iPhoneOS.sdk/SuperMap.framework/Versions/A/Resources/*.bundle to Framework. -
Write and run your project (
Cmd+R
).
- Add imobile_for_reactnative-release.aar and mediapipe_hand_tracking.aar to imobile_for_reactnative/android/libs.
- Write and run your project (
^+R
).
For this Example.After install the pack we offered, You will easily make a project of map inflating the whole screen by following the steps below.
- Setup the liscense file into the path "./Supermap/licsence".
- Setup the Sample Data into a specified path that will be refer as a argument in the function setServer() of WorkspaceConnection object in the next step;
- type the follow codes in an initiated React Native Project "App.js".
...
import {
SMap,
SMMapView,
} from 'imobile_for_reactnative';
class XXX extends Component {
//Required funtion for obtaining the MapView object.
_onGetInstance = (mapView) => {
this.mapView = mapView;
this._addMap();
}
/**
* 初始化地图 Function for initiating the Map
* @private
*/
_addMap = () => {
try {
//加载工作空间等一系列打开地图的操作
//Operations for loading workspace and opening map
(async function () {
try {
// 打开工作空间
const result = await SMap.openWorkspace({
server: wsPath,
})
// 导入地图文件到工作空间
const importResult = await SMap.openMapName(mapFileName, {
Module: module,
IsPrivate: !isCustomerPath,
})
// 打开地图
importResult && await SMap.openMap(mapName)
} catch (e) {
console.error(e);
}
}).bind(this)();
} catch (e) {
console.error(e);
}
}
render() {
return (
<View style={styles.container}>
<SMMapView ref="mapView" style={styles.map} onGetInstance={this._onGetInstance}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
alignSelf: 'stretch',
},
});