arcgis for Reactive (android)100.1使用

本文主要是介绍arcgis for Reactive (android)100.1使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文只说重点的js编写安卓gis，基础reactive怎么创建android项目请去官网查看

分析:

gradle:

compile "com.android.support:appcompat-v7:23.0.1"compile "com.facebook.react:react-native:+"  // From node_modulescompile(name: 'arcgis-android-100.1.0', ext: 'aar')

上面引用了三个依赖，知道什么是依赖吧?android studio知道怎么用吧，这里引用了facebook的库，gis库，android-ui库，23

gradle官网好像有限制，好像最新只支持2+，android studio的gradle目前4+；构建项目的时候注意一下gradle版本;gradle其他的地方基本不需要什么说的;这是关键的东西;

manifest清单文件：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.abcd"><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><applicationandroid:name=".MainApplication"android:label="@string/app_name"android:icon="@mipmap/ic_launcher"android:allowBackup="false"android:theme="@style/AppTheme"><activityandroid:name=".MainActivity"android:label="@string/app_name"android:configChanges="keyboard|keyboardHidden|orientation|screenSize"android:windowSoftInputMode="adjustResize"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /></application></manifest>

主要有权限，四大组件注册等等。。。

下面是主要的将第三方库过度给js，好让js能操作ku给的api；跟写后台差不多；

 

package com.abcd;import android.app.Application;import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;import java.util.Arrays;
import java.util.List;public class MainApplication extends Application implements ReactApplication {private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {@Overridepublic boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;}@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new ArcgisPackage());}@Overrideprotected ReactInstanceManager createReactInstanceManager() {return super.createReactInstanceManager();}@Overrideprotected String getJSMainModuleName() {return "index";}};@Overridepublic ReactNativeHost getReactNativeHost() {return mReactNativeHost;}@Overridepublic void onCreate() {super.onCreate();SoLoader.init(this, /* native exopackage */ false);}
}

package com.abcd;
import android.support.annotation.Nullable;import com.esri.arcgisruntime.ArcGISRuntimeEnvironment;
import com.esri.arcgisruntime.data.ServiceFeatureTable;
import com.esri.arcgisruntime.geometry.Envelope;
import com.esri.arcgisruntime.geometry.SpatialReference;
import com.esri.arcgisruntime.layers.ArcGISTiledLayer;
import com.esri.arcgisruntime.layers.FeatureLayer;
import com.esri.arcgisruntime.layers.WebTiledLayer;
import com.esri.arcgisruntime.mapping.ArcGISMap;
import com.esri.arcgisruntime.mapping.Basemap;
import com.esri.arcgisruntime.mapping.Viewpoint;
import com.esri.arcgisruntime.mapping.view.MapView;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;public class ArcgisMapManager extends SimpleViewManager<MapView>{public static final String REACT_CLASS = "RCTIMapView";private MapView mMapView;private ArcGISMap mArcGISMap;private ArcgisMapModule mArcgisMapModule;public ArcgisMapManager(ArcgisMapModule arcgisMapModule) {mArcgisMapModule = arcgisMapModule;}@Overridepublic String getName() {return REACT_CLASS;}@Overrideprotected MapView createViewInstance(ThemedReactContext reactContext) {mMapView=new MapView(reactContext);mArcgisMapModule.setMapView(mMapView);return mMapView ;}@ReactProp(name = "license")public void setLicense(MapView mapView,@Nullable String license){ArcGISRuntimeEnvironment.setLicense(license);mapView.setAttributionTextVisible(false);}@ReactProp(name = "tianditu")public void setTianDiTu(MapView mapView,@Nullable ReadableMap readableMap){WebTiledLayer webTiledLayer = null;if (readableMap.getString("url").equals("imge")){webTiledLayer=TiandituWebTitle.CreateTianDiTuTiledLayer(TiandituWebTitle.LayerType.TIANDITU_IMAGE_2000);}else if (readableMap.getString("url").equals("street")){webTiledLayer=TiandituWebTitle.CreateTianDiTuTiledLayer(TiandituWebTitle.LayerType.TIANDITU_VECTOR_2000);}else if (readableMap.getString("url").equals("topographic")){webTiledLayer=TiandituWebTitle.CreateTianDiTuTiledLayer(TiandituWebTitle.LayerType.TIANDITU_TERRAIN_2000);}mArcGISMap=new ArcGISMap();mArcGISMap.setBasemap(new Basemap(webTiledLayer));mMapView.setMap(mArcGISMap);Envelope envelope = new Envelope(readableMap.getDouble("XMin"), readableMap.getDouble("YMin"), readableMap.getDouble("XMax"), readableMap.getDouble("YMax"), SpatialReference.create(readableMap.getInt("SpatialReference")));com.esri.arcgisruntime.geometry.Point point2 = envelope.getCenter();mMapView.setViewpoint(new Viewpoint(point2, readableMap.getDouble("Scale")));for (int a=0;a<readableMap.getArray("layers").size();a++){final ServiceFeatureTable serviceFeatureTable = new ServiceFeatureTable(readableMap.getArray("layers").getString(a));FeatureLayer featureLayer = new FeatureLayer(serviceFeatureTable);mMapView.getMap().getOperationalLayers().add(featureLayer);}}@ReactProp(name = "tile")public void setBaseMap(MapView mapView,@Nullable String tile){mArcGISMap=new ArcGISMap();if (tile.equals("imge")){mArcGISMap.setBasemap(Basemap.createImagery());}else if (tile.equals("street")){mArcGISMap.setBasemap(Basemap.createStreets());}else if (tile.equals("topographic")){mArcGISMap.setBasemap(Basemap.createTopographic());}else {ArcGISTiledLayer arcGISTiledLayer=new ArcGISTiledLayer(tile);mArcGISMap.setBasemap(new Basemap(arcGISTiledLayer));}mapView.setMap(mArcGISMap);}}

package com.abcd;import android.graphics.Color;
import android.graphics.Point;
import android.graphics.drawable.BitmapDrawable;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.view.MotionEvent;import com.esri.arcgisruntime.concurrent.ListenableFuture;
import com.esri.arcgisruntime.data.Feature;
import com.esri.arcgisruntime.data.FeatureQueryResult;
import com.esri.arcgisruntime.data.QueryParameters;
import com.esri.arcgisruntime.data.ServiceFeatureTable;
import com.esri.arcgisruntime.geometry.Geometry;
import com.esri.arcgisruntime.geometry.Polyline;
import com.esri.arcgisruntime.mapping.GeoElement;
import com.esri.arcgisruntime.mapping.view.DefaultMapViewOnTouchListener;
import com.esri.arcgisruntime.mapping.view.Graphic;
import com.esri.arcgisruntime.mapping.view.GraphicsOverlay;
import com.esri.arcgisruntime.mapping.view.IdentifyLayerResult;
import com.esri.arcgisruntime.mapping.view.MapView;
import com.esri.arcgisruntime.symbology.PictureMarkerSymbol;
import com.esri.arcgisruntime.symbology.SimpleLineSymbol;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.WritableNativeArray;
import com.facebook.react.modules.core.DeviceEventManagerModule;import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ExecutionException;public class ArcgisMapModule extends ReactContextBaseJavaModule {private  List<Geometry> geometries=new ArrayList<>();private List<Map<String, Object>> mapList=new ArrayList<>();private MapView mMapView;private Geometry geometry;private Map<String,Object>mMap;private List<GraphicsOverlay> mGraphicsOverlays = new ArrayList<>();private GraphicsOverlay mGraphicsOverlay;public ArcgisMapModule(ReactApplicationContext reactContext) {super(reactContext);}public void setMapView(MapView mapView){this.mMapView=mapView;mMapView.setOnTouchListener(new DefaultMapViewOnTouchListener(getCurrentActivity(),mMapView){@Overridepublic boolean onSingleTapUp(MotionEvent e) {final Point point11 = new Point(Math.round(e.getX()), Math.round(e.getY()));final ListenableFuture<List<IdentifyLayerResult>> layerResults = mMapView.identifyLayersAsync(point11, 10, false, 1);layerResults.addDoneListener(new Runnable() {@Overridepublic void run() {try {List<IdentifyLayerResult> identifyLayerResults = layerResults.get();if (identifyLayerResults != null && identifyLayerResults.size() > 0) {for (IdentifyLayerResult identifyLayerResult : identifyLayerResults) {for (GeoElement geoElement : identifyLayerResult.getElements()) {mMap = geoElement.getAttributes();geometry = geoElement.getGeometry();}if (identifyLayerResult.getElements() != null && identifyLayerResult.getElements().size() > 0) {if (mGraphicsOverlays != null && mGraphicsOverlays.size() > 0) {for (GraphicsOverlay graphicsOverlay : mGraphicsOverlays) {graphicsOverlay.getGraphics().clear();mMapView.getGraphicsOverlays().remove(graphicsOverlay);}mGraphicsOverlays.clear();}PictureMarkerSymbol pictureMarkerSymbol = new PictureMarkerSymbol((BitmapDrawable) ContextCompat.getDrawable(getReactApplicationContext(), R.mipmap.ic_action_location));Graphic graphic = null;if (geometry instanceof Polyline) {SimpleLineSymbol simpleLineSymbol = new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, Color.BLUE, 1);graphic = new Graphic(geometry, simpleLineSymbol);} else {graphic = new Graphic(geometry.getExtent().getCenter(), pictureMarkerSymbol);}mGraphicsOverlay = new GraphicsOverlay();mGraphicsOverlay.getGraphics().add(graphic);mGraphicsOverlays.add(mGraphicsOverlay);mMapView.getGraphicsOverlays().add(mGraphicsOverlay);mMapView.setViewpointGeometryAsync(geometry);showOnClickMsg(mMap);}}}} catch (InterruptedException e1) {e1.printStackTrace();} catch (ExecutionException e1) {e1.printStackTrace();}}});return super.onSingleTapUp(e);}});}@Overridepublic String getName() {return "ArcgisMapModule";}public void showOnClickMsg(Map<String,Object>map){WritableMap writableMap= Arguments.makeNativeMap(map);getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("onClick",writableMap);}@ReactMethodpublic void search(@Nullable final String search, @Nullable ReadableArray readableArray){if (mapList!=null&&mapList.size()>0){mapList.clear();}if (geometries!=null&&geometries.size()>0){geometries.clear();}for (int a = 0; a < readableArray.size(); a++) {final ServiceFeatureTable serviceFeatureTable = new ServiceFeatureTable(readableArray.getString(a));serviceFeatureTable.loadAsync();serviceFeatureTable.addDoneLoadingListener(new Runnable() {@Overridepublic void run() {QueryParameters queryParameters = new QueryParameters();queryParameters.setWhereClause(search);final ListenableFuture<FeatureQueryResult> featureQueryResultListenableFuture = serviceFeatureTable.queryFeaturesAsync(queryParameters, ServiceFeatureTable.QueryFeatureFields.LOAD_ALL);featureQueryResultListenableFuture.addDoneListener(new Runnable() {@Overridepublic void run() {try {FeatureQueryResult features = featureQueryResultListenableFuture.get();Iterator<Feature> iterator=features.iterator();while (iterator.hasNext()){Feature feature=iterator.next();if (feature instanceof Feature){Map<String, Object> mQuerryString = feature.getAttributes();mapList.add(mQuerryString);geometries.add(feature.getGeometry());}}WritableNativeArray writableNativeArray=Arguments.makeNativeArray(mapList);getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("search",writableNativeArray);} catch (InterruptedException e) {e.printStackTrace();} catch (ExecutionException e) {e.printStackTrace();}}});}});}}}

package com.abcd;import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;public class ArcgisPackage implements ReactPackage {@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule>list=new ArrayList<>();list.add(new ArcgisMapModule(reactContext));return list;}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {ArcgisMapModule arcgisMapModule =new ArcgisMapModule(reactContext);return Arrays.<ViewManager>asList(new ArcgisMapManager(arcgisMapModule));}
}

package com.abcd;import com.facebook.react.ReactActivity;public class MainActivity extends ReactActivity {/*** Returns the name of the main component registered from JavaScript.* This is used to schedule rendering of the component.*/@Overrideprotected String getMainComponentName() {return "abcd";}
}

package com.abcd;import com.esri.arcgisruntime.arcgisservices.LevelOfDetail;
import com.esri.arcgisruntime.arcgisservices.TileInfo;
import com.esri.arcgisruntime.geometry.Envelope;
import com.esri.arcgisruntime.geometry.Point;
import com.esri.arcgisruntime.geometry.SpatialReference;
import com.esri.arcgisruntime.layers.WebTiledLayer;import java.io.Serializable;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;/*** @author Mr Huang 2018/3/27* @version 1.0*/public class TiandituWebTitle implements Serializable {//定义天地图相关参数private static final List<String> SubDomain = Arrays.asList(new String[]{"t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"});private static final String URL_VECTOR_2000 = "http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}";private static final String URL_VECTOR_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}";private static final String URL_VECTOR_ANNOTATION_ENGLISH_2000 = "http://{subDomain}.tianditu.com/DataServer?T=eva_c&x={col}&y={row}&l={level}";private static final String URL_IMAGE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=img_c&x={col}&y={row}&l={level}";private static final String URL_IMAGE_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cia_c&x={col}&y={row}&l={level}";private static final String URL_IMAGE_ANNOTATION_ENGLISH_2000 = "http://{subDomain}.tianditu.com/DataServer?T=eia_c&x={col}&y={row}&l={level}";private static final String URL_TERRAIN_2000 = "http://{subDomain}.tianditu.com/DataServer?T=ter_c&x={col}&y={row}&l={level}";private static final String URL_TERRAIN_ANNOTATION_CHINESE_2000 = "http://{subDomain}.tianditu.com/DataServer?T=cta_c&x={col}&y={row}&l={level}";private static final String URL_VECTOR_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=vec_w&x={col}&y={row}&l={level}";private static final String URL_VECTOR_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cva_w&x={col}&y={row}&l={level}";private static final String URL_VECTOR_ANNOTATION_ENGLISH_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=eva_w&x={col}&y={row}&l={level}";private static final String URL_IMAGE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=img_w&x={col}&y={row}&l={level}";private static final String URL_IMAGE_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cia_w&x={col}&y={row}&l={level}";private static final String URL_IMAGE_ANNOTATION_ENGLISH_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=eia_w&x={col}&y={row}&l={level}";private static final String URL_TERRAIN_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=ter_w&x={col}&y={row}&l={level}";private static final String URL_TERRAIN_ANNOTATION_CHINESE_MERCATOR = "http://{subDomain}.tianditu.com/DataServer?T=cta_w&x={col}&y={row}&l={level}";private static final int DPI = 96;private static final int minZoomLevel = 1;private static final int maxZoomLevel = 18;private static final int tileWidth = 256;private static final int tileHeight = 256;private static final String LAYER_NAME_VECTOR = "vec";private static final String LAYER_NAME_VECTOR_ANNOTATION_CHINESE = "cva";private static final String LAYER_NAME_VECTOR_ANNOTATION_ENGLISH = "eva";private static final String LAYER_NAME_IMAGE = "img";private static final String LAYER_NAME_IMAGE_ANNOTATION_CHINESE = "cia";private static final String LAYER_NAME_IMAGE_ANNOTATION_ENGLISH = "eia";private static final String LAYER_NAME_TERRAIN = "ter";private static final String LAYER_NAME_TERRAIN_ANNOTATION_CHINESE = "cta";private static final SpatialReference SRID_2000 = SpatialReference.create(4490);private static final SpatialReference SRID_MERCATOR = SpatialReference.create(102100);private static final double X_MIN_2000 = -180;private static final double Y_MIN_2000 = -90;private static final double X_MAX_2000 = 180;private static final double Y_MAX_2000 = 90;private static final double X_MIN_MERCATOR = -20037508.3427892;private static final double Y_MIN_MERCATOR = -20037508.3427892;private static final double X_MAX_MERCATOR = 20037508.3427892;private static final double Y_MAX_MERCATOR = 20037508.3427892;private static final Point ORIGIN_2000 = new Point(-180, 90, SRID_2000);private static final Point ORIGIN_MERCATOR = new Point(-20037508.3427892, 20037508.3427892, SRID_MERCATOR);private static final Envelope ENVELOPE_2000 = new Envelope(X_MIN_2000, Y_MIN_2000, X_MAX_2000, Y_MAX_2000, SRID_2000);private static final Envelope ENVELOPE_MERCATOR = new Envelope(X_MIN_MERCATOR, Y_MIN_MERCATOR, X_MAX_MERCATOR, Y_MAX_MERCATOR, SRID_MERCATOR);private static final double[] SCALES = {2.958293554545656E8, 1.479146777272828E8,7.39573388636414E7, 3.69786694318207E7,1.848933471591035E7, 9244667.357955175,4622333.678977588, 2311166.839488794,1155583.419744397, 577791.7098721985,288895.85493609926, 144447.92746804963,72223.96373402482, 36111.98186701241,18055.990933506204, 9027.995466753102,4513.997733376551, 2256.998866688275,1128.4994333441375};private static final double[] RESOLUTIONS_MERCATOR = {78271.51696402048, 39135.75848201024,19567.87924100512, 9783.93962050256,4891.96981025128, 2445.98490512564,1222.99245256282, 611.49622628141,305.748113140705, 152.8740565703525,76.43702828517625, 38.21851414258813,19.109257071294063, 9.554628535647032,4.777314267823516, 2.388657133911758,1.194328566955879, 0.5971642834779395,0.298582141738970};private static final double[] RESOLUTIONS_2000 = {0.7031249999891485, 0.35156249999999994,0.17578124999999997, 0.08789062500000014,0.04394531250000007, 0.021972656250000007,0.01098632812500002, 0.00549316406250001,0.0027465820312500017, 0.0013732910156250009,0.000686645507812499, 0.0003433227539062495,0.00017166137695312503, 0.00008583068847656251,0.000042915344238281406, 0.000021457672119140645,0.000010728836059570307, 0.000005364418029785169};public enum LayerType {/*** 天地图矢量墨卡托投影地图服务*/TIANDITU_VECTOR_MERCATOR,/*** 天地图矢量墨卡托中文标注*/TIANDITU_VECTOR_ANNOTATION_CHINESE_MERCATOR,/*** 天地图矢量墨卡托英文标注*/TIANDITU_VECTOR_ANNOTATION_ENGLISH_MERCATOR,/*** 天地图影像墨卡托投影地图服务*/TIANDITU_IMAGE_MERCATOR,/*** 天地图影像墨卡托投影中文标注*/TIANDITU_IMAGE_ANNOTATION_CHINESE_MERCATOR,/*** 天地图影像墨卡托投影英文标注*/TIANDITU_IMAGE_ANNOTATION_ENGLISH_MERCATOR,/*** 天地图地形墨卡托投影地图服务*/TIANDITU_TERRAIN_MERCATOR,/*** 天地图地形墨卡托投影中文标注*/TIANDITU_TERRAIN_ANNOTATION_CHINESE_MERCATOR,/*** 天地图矢量国家2000坐标系地图服务*/TIANDITU_VECTOR_2000,/*** 天地图矢量国家2000坐标系中文标注*/TIANDITU_VECTOR_ANNOTATION_CHINESE_2000,/*** 天地图矢量国家2000坐标系英文标注*/TIANDITU_VECTOR_ANNOTATION_ENGLISH_2000,/*** 天地图影像国家2000坐标系地图服务*/TIANDITU_IMAGE_2000,/*** 天地图影像国家2000坐标系中文标注*/TIANDITU_IMAGE_ANNOTATION_CHINESE_2000,/*** 天地图影像国家2000坐标系英文标注*/TIANDITU_IMAGE_ANNOTATION_ENGLISH_2000,/*** 天地图地形国家2000坐标系地图服务*/TIANDITU_TERRAIN_2000,/*** 天地图地形国家2000坐标系中文标注*/TIANDITU_TERRAIN_ANNOTATION_CHINESE_2000}public static WebTiledLayer CreateTianDiTuTiledLayer(LayerType layerType) {WebTiledLayer webTiledLayer = null;String mainUrl = "";String mainName = "";TileInfo mainTileInfo = null;Envelope mainEnvelope = null;boolean mainIs2000 = false;try {switch (layerType) {case TIANDITU_VECTOR_2000:mainUrl = URL_VECTOR_2000;mainName = LAYER_NAME_VECTOR;mainIs2000 = true;break;case TIANDITU_VECTOR_MERCATOR:mainUrl = URL_VECTOR_MERCATOR;mainName = LAYER_NAME_VECTOR;break;case TIANDITU_IMAGE_2000:mainUrl = URL_IMAGE_2000;mainName = LAYER_NAME_IMAGE;mainIs2000 = true;break;case TIANDITU_IMAGE_ANNOTATION_CHINESE_2000:mainUrl = URL_IMAGE_ANNOTATION_CHINESE_2000;mainName = LAYER_NAME_IMAGE_ANNOTATION_CHINESE;mainIs2000 = true;break;case TIANDITU_IMAGE_ANNOTATION_ENGLISH_2000:mainUrl = URL_IMAGE_ANNOTATION_ENGLISH_2000;mainName = LAYER_NAME_IMAGE_ANNOTATION_ENGLISH;mainIs2000 = true;break;case TIANDITU_IMAGE_ANNOTATION_CHINESE_MERCATOR:mainUrl = URL_IMAGE_ANNOTATION_CHINESE_MERCATOR;mainName = LAYER_NAME_IMAGE_ANNOTATION_CHINESE;break;case TIANDITU_IMAGE_ANNOTATION_ENGLISH_MERCATOR:mainUrl = URL_IMAGE_ANNOTATION_ENGLISH_MERCATOR;mainName = LAYER_NAME_IMAGE_ANNOTATION_ENGLISH;break;case TIANDITU_IMAGE_MERCATOR:mainUrl = URL_IMAGE_MERCATOR;mainName = LAYER_NAME_IMAGE;break;case TIANDITU_VECTOR_ANNOTATION_CHINESE_2000:mainUrl = URL_VECTOR_ANNOTATION_CHINESE_2000;mainName = LAYER_NAME_VECTOR_ANNOTATION_CHINESE;mainIs2000 = true;break;case TIANDITU_VECTOR_ANNOTATION_ENGLISH_2000:mainUrl = URL_VECTOR_ANNOTATION_ENGLISH_2000;mainName = LAYER_NAME_VECTOR_ANNOTATION_ENGLISH;mainIs2000 = true;break;case TIANDITU_VECTOR_ANNOTATION_CHINESE_MERCATOR:mainUrl = URL_VECTOR_ANNOTATION_CHINESE_MERCATOR;mainName = LAYER_NAME_VECTOR_ANNOTATION_CHINESE;break;case TIANDITU_VECTOR_ANNOTATION_ENGLISH_MERCATOR:mainUrl = URL_VECTOR_ANNOTATION_ENGLISH_MERCATOR;mainName = LAYER_NAME_VECTOR_ANNOTATION_ENGLISH;break;case TIANDITU_TERRAIN_2000:mainUrl = URL_TERRAIN_2000;mainName = LAYER_NAME_TERRAIN;mainIs2000 = true;break;case TIANDITU_TERRAIN_ANNOTATION_CHINESE_2000:mainUrl = URL_TERRAIN_ANNOTATION_CHINESE_2000;mainName = LAYER_NAME_TERRAIN_ANNOTATION_CHINESE;mainIs2000 = true;break;case TIANDITU_TERRAIN_MERCATOR:mainUrl = URL_TERRAIN_MERCATOR;mainName = LAYER_NAME_TERRAIN;break;case TIANDITU_TERRAIN_ANNOTATION_CHINESE_MERCATOR:mainUrl = URL_TERRAIN_ANNOTATION_CHINESE_MERCATOR;mainName = LAYER_NAME_TERRAIN_ANNOTATION_CHINESE;break;}List<LevelOfDetail> mainLevelOfDetail = new ArrayList<LevelOfDetail>();Point mainOrigin = null;if (mainIs2000 == true) {for (int i = minZoomLevel; i <= maxZoomLevel; i++) {LevelOfDetail item = new LevelOfDetail(i, RESOLUTIONS_2000[i - 1], SCALES[i - 1]);mainLevelOfDetail.add(item);}mainEnvelope = ENVELOPE_2000;mainOrigin = ORIGIN_2000;} else {for (int i = minZoomLevel; i <= maxZoomLevel; i++) {LevelOfDetail item = new LevelOfDetail(i, RESOLUTIONS_MERCATOR[i - 1], SCALES[i - 1]);mainLevelOfDetail.add(item);}mainEnvelope = ENVELOPE_MERCATOR;mainOrigin = ORIGIN_MERCATOR;}mainTileInfo = new TileInfo(DPI,TileInfo.ImageFormat.PNG24,mainLevelOfDetail,mainOrigin,mainOrigin.getSpatialReference(),tileHeight,tileWidth);webTiledLayer = new WebTiledLayer(mainUrl,SubDomain,mainTileInfo,mainEnvelope);webTiledLayer.setName(mainName);webTiledLayer.loadAsync();} catch (Exception e) {e.getCause();e.printStackTrace();}return webTiledLayer;}
}

注意，上面封装的天地图，只支持100.2之前的，并且url后台需要拼接参数&tk=“你的米尺”

project gradle：

// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {repositories {jcenter()}dependencies {classpath 'com.android.tools.build:gradle:2.2.3'// NOTE: Do not place your application dependencies here; they belong// in the individual module build.gradle files}
}allprojects {repositories {mavenLocal()jcenter()maven {// All of React Native (JS, Obj-C sources, Android binaries) is installed from npmurl "$rootDir/../node_modules/react-native/android"}}
}

js：

import PropTypes from 'prop-types';
import {requireNativeComponent,View} from 'react-native';
var iface = {name: 'ArcgisView',propTypes: {...View.propTypes,tile: PropTypes.string,license:PropTypes.string,tianditu:PropTypes.shape({url:PropTypes.string,XMin:PropTypes.double,YMin:PropTypes.double,XMax:PropTypes.double,YMax:PropTypes.double,SpatialReference:PropTypes.int,Scale:PropTypes.double,layers:PropTypes.arrayOf(PropTypes.string)}),},
};
module.exports = requireNativeComponent('RCTIMapView', iface);

import { AppRegistry } from 'react-native';
import App from './App';AppRegistry.registerComponent('abcd', () => App);

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, {Component} from 'react';import {Platform,StyleSheet,View,Text,Dimensions,NativeModules,Image,FlatList,DeviceEventEmitter} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Swiper from 'react-native-swiper';//const {width, height} = Dimensions.get('window');var k = Dimensions.get('window').width;var g = Dimensions.get('window').height;var ArcgisView = require('./arcgisMap');var tdt = "imge"var arr = ["http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/1","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/2","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/4","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/6","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/7","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/9","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/11","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/12","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/14","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/15"]var init = {XMin: -2.5619086977627527E7,YMin: -6556282.473844509,XMax: 2.5619086977627527E7,YMax: 2.330510492803532E7,SpatialReference: 3857,Scale: 9027.977411}
var tianditu = {url: 'imge',XMin: 113.39091069824356,YMin: 22.515851273866833,XMax: 113.40038095304676,YMax: 22.5192658004102,SpatialReference: 4490,Scale: 144447.92746804963,layers: ["http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/1","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/2","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/4","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/6","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/7","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/9","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/11","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/12","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/14","http://127.0.0.1:6080/arcgis/rest/services/dmpc/MapServer/15"]}const instructions = Platform.select({ios: 'Press Cmd+R to reload,\n' +'Cmd+D or shake for dev menu',android: 'Double tap R on your keyboard to reload,\n' +'Shake or press menu button for dev menu',
});type Props = {};
export default class App extends Component<Props> {componentWillMount() {//监听事件名为EventName的事件DeviceEventEmitter.addListener('onClick', (message) => {alert(message.BZDM);});DeviceEventEmitter.addListener('search', (message) => {alert(message[0].DMLB);});}constructor() {super();this.state = {url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",licenses: "runtimelite,1000,rud7659408794,none,ZZ0RJAY3FY0GEBZNR002",selectTab: "首页"}}render() {return (<TabNavigator style={styles.container}><TabNavigator.Itemselected={this.state.selectTab === "首页"}title={"首页"}renderIcon={() => <Image style={styles.imges} source={require('./res/img/main.png')}></Image>}onPress={()=>this.setState({selectTab: "首页"})}><View style={{flex: 1,flexDirection: "column"}}><View style={{width:k,height:150}}><Swiperstyle={{width:k,height:150}}horizontal={true}autoplay={true}showsButtons={false}paginationStyle={{bottom: 10}}><Image source={require('./res/img/one.png')} style={{width:k,height:150}}></Image><Image source={require('./res/img/two.png') } style={{width:k,height:150}}></Image></Swiper></View><View style={{ flex:1,width:k,height:70,flexDirection: "row",justifyContent: "flex-start"}}><View style={{flex:1,width:50,height:70,flexDirection: "column",justifyContent: "center",alignItems: 'center' }}><Image source={require('./res/img/progress.png') } style={{width:50,height:50}}></Image><Text style={{top:2}}>订单进度</Text></View><View style={{flex:1,width:50,height:70,flexDirection: "column",justifyContent: "center",alignItems: 'center'}}><Image source={require('./res/img/order.png') } style={{width:50,height:50}}></Image><Text style={{top:2}}>我的订单</Text></View><View style={{flex:1,width:50,height:70,flexDirection: "column",justifyContent: "center",alignItems: 'center'}}><Image source={require('./res/img/resever.png') } style={{width:50,height:50}}></Image><Text style={{top:2}}>我的预订</Text></View><View style={{flex:1,width:50,height:70,flexDirection: "column",justifyContent: "center",alignItems: 'center' }}><Image source={require('./res/img/recharge.png') } style={{width:50,height:50}}></Image><Text style={{top:2}}>会员充值</Text></View><View style={{flex:1,width:50,height:70,flexDirection: "column",justifyContent: "center",alignItems: 'center' }}><Image source={require('./res/img/look.png') } style={{width:50,height:50}}></Image><Text style={{top:2}}>观看菜园</Text></View></View></View></TabNavigator.Item><TabNavigator.Itemselected={this.state.selectTab === "菜园"}title={"菜园"}renderIcon={() => <Image style={styles.imges} source={require('./res/img/garden.png')}></Image>}onPress={()=>this.setState({selectTab: "菜园"})}><View><Text>菜园</Text></View></TabNavigator.Item><TabNavigator.Itemselected={this.state.selectTab === "菜篮子"}title={"菜篮子"}renderIcon={() => <Image style={styles.imges} source={require('./res/img/car.png')}></Image>}onPress={()=>this.setState({selectTab: "菜篮子"})}><View><Text>菜篮子</Text></View></TabNavigator.Item><TabNavigator.Itemselected={this.state.selectTab === "我的"}title={"我的"}renderIcon={() => <Image style={styles.imges} source={require('./res/img/my.png')}></Image>}onPress={()=>this.setState({selectTab: "我的"})}><View><Text>我的</Text></View></TabNavigator.Item></TabNavigator>);}
}const styles = StyleSheet.create({container: {flex: 1,padding: 20,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},box1: {width: k,height: g,backgroundColor: '#FF0000'},box2: {width: k,height: 50,marginRight: 200,backgroundColor: '#00FF00'},imges:{width:25,height:25,}});

上面js界面做了修改，加载地图方法列示，渲染一下就可以了;

js第一次看也是没懂，和c语言的形参有点列示，哈哈

 

这篇关于arcgis for Reactive (android)100.1使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---