React Native中集成ArcGIS以显示地图、渲染自定义图层和获取地理信息数据

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { MapView } from 'react-native-esri-arcgis';
 
export default class MapViewExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初始化地图视图的中心点和缩放级别
      viewpoint: {
        center: {
          longitude: -122.41,
          latitude: 37.79
        },
        scale: 10000000
      }
    };
  }
 
  render() {
    return (
      <View style={{ flex: 1 }}>
        {/* 地图视图组件 */}
        <MapView
          autoNavigate
          viewpoint={this.state.viewpoint}
          onExtentChanged={(extent) => console.log('Extent changed: ', extent)}
        >
          {/* 在地图上添加自定义图层 */}
          <MapView.GraphicsOverlays>
            {/* 自定义图层组件 */}
            <MapView.GraphicsOverlay id="graphicsLayer">
              {/* 自定义图形组件，例如点、线、多边形 */}
              <MapView.Point
                point={{ x: -122.41, y: 37.79 }}
                onPress={(point) => console.log('Point pressed: ', point)}
              />
            </MapView.GraphicsOverlay>
          </MapView.GraphicsOverlays>
        </MapView>
      </View>
    );
  }
}

这个代码实例展示了如何在React Native应用中集成ArcGIS Runtime SDK for React Native，并在地图上显示一个点。它还演示了如何添加一个自定义图层，并且如何监听地图的缩放和视图变化事件。这个例子提供了一个基本框架，开发者可以在此基础上根据自己的需求添加更多的地图交互和功能。