rn_supermap/test_mode/App(地图展示).js

rn_supermap 一款基于React-Native框架的移动应用开发工具。基于该开发工具，用户可以使用JavaScript开发语言，开发出在Android和IOS操作系统下运行的原生移动GIS应用，入门门槛低，一次开发，处处运行。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { StyleSheet, View, Platform } from "react-native";
import { Workspace, SMMapView, Utility } from "rn_supermap";

export default class App extends Component<{}> {
  _onGetInstance = (mapView) => {
    this.mapView = mapView;
    this._addMap();
  };

  render() {
    return (
      <View style={styles.container}>
        <SMMapView style={styles.map} onGetInstance={this._onGetInstance} />
      </View>
    );
  }

  _addMap = () => {
    var workspaceModule = new Workspace();
    (async function () {
      this.workspace = await workspaceModule.createObj();
      this.mapControl = await this.mapView.getMapControl();
      this.map = await this.mapControl.getMap();

      var filePath = "/SampleData/China400/China400.smwu";
      if (Platform.OS === "ios") {
        filePath = await Utility.appendingHomeDirectory(
          "/Documents/China400.smwu"
        );
      }

      var openWk = await this.workspace.open(filePath);
      await this.map.setWorkspace(this.workspace);
      var mapName = await this.workspace.getMapName(0);
      await this.map.open(mapName);
      await this.map.refresh();
    }.bind(this)());
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  map: {
    flex: 1,
    alignSelf: "stretch",
  },
});