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, SMScaleView } from "rn_supermap";

export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      mapCtrId: false,
    };
  }

  _onGetInstance = (mapView) => {
    this.mapView = mapView;
    this._addMap();
  };

  render() {
    return (
      <View style={styles.container}>
        <SMMapView style={styles.map} onGetInstance={this._onGetInstance} />
        {this.state.mapCtrId && (
          <SMScaleView
            style={styles.legend}
            mapControlId={this.state.mapCtrId}
          />
        )}
      </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();

      this.setState({
        mapCtrId: this.mapControl._SMMapControlId,
      });
    }.bind(this)());
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  map: {
    flex: 1,
    alignSelf: "stretch",
  },
  legend: {
    flex: Platform.OS === "ios" ? 0.001 : 0.05,
    backgroundColor: "transparent",
    alignSelf: "stretch",
  },
});