React Native for Arcgis 地图开发 GraphicCtrl （十三）

GraphicCtrl 的使用
import React, {useState, useEffect} from ‘react’;
 import {View, Text, ScrollView, StyleSheet} from ‘react-native’;
 import {Button, List, Switch} from ‘@ant-design/react-native’;
 import {GraphicCtrl, GraphicLayerCtrl, LayerManager, MapManager, MapView} from ‘@haibalai/react-native-arcgis’;
 import {connect} from ‘react-redux’;
 import WidthDrawer from ‘…/…/…/…/components/WithDrawer/index’;
 import {Colors} from ‘react-native/Libraries/NewAppScreen’;
 const MapId = ‘baseMap’;
 const GraphicLayerId = ‘graphic点’;
 const MapImageLayerId = ‘水闸-MapImageLayer’;
 const FeatureLayerId = ‘水闸-featurelayer’;
 const MapImageLayerIds = [
 ‘水闸-MapImageLayer’,
 ‘原水管线-MapImageLayer’,
 ‘海堤-MapImageLayer’,
 ‘海洋环境区划-MapImageLayer’,
 ];
 const FeatureLayerIds = [
 ‘水闸-featurelayer’,
 ‘原水管线-featurelayer’,
 ‘原水管线-featurelayer’,
 ‘海洋环境区划-featurelayer’,
 ];
 const GraphicLayerIds = [‘graphic点’, ‘graphic线’, ‘graphic面’];
 const GeoX = 1.2664272368526626e7;
 const GeoY = 2595847.2157473154;
 const Geo4490X = 113.78868474700005;
 const Geo4490Y = 22.693641836999973;
 const layerName = ‘test’;
 const graphicStrs = [
 {geometry: {type: ‘point’, x: 113.868676, y: 22.487838, z: 0, spatialReference: {wkid: 4326}}},
 {geometry: {type: ‘point’, x: 113.768676, y: 22.587838, z: 0, spatialReference: {wkid: 4326}}},
 {geometry: {type: ‘point’, x: 113.868676, y: 22.587838, z: 0, spatialReference: {wkid: 4326}}},
 ];
 let graphicId = ‘’;
 let graphicIds = [‘’];
 const symbolStr = {
 angle: 0,
 color: [40, 135, 255, 255],
 outline: {color: [14, 98, 230, 255], style: ‘solid’, type: ‘esriSLS’, width: 1.5},
 size: 9,
 style: ‘circle’,
 type: ‘esriSMS’,
 xoffset: 0,
 yoffset: 0,
 };
 const selected = true;
 const visible = true;
 const geometryStr = ‘’;
 const attributesStr = ‘’;
 const zIndex = 1;
 /** sideBar组件
 *@param {*} renderCb renderCb是一个函数, 每次触发并且向里面传值(对象)，content组件就以sideBarData的属性去接受
 */
 const SideBar = ({renderCb, Home}: any) => {
 const [content, changeContent] = useState(‘’);
 const [errorContent, changeErrorContent] = useState(‘’);
 const [singleMapImageLayerStatus, setSingleMapImageLayerStatus] = useState(false);
 const [multiMapImageLayerStatus, setMultiMapImageLayerStatus] = useState(false);
 const [singleFeatureLayerStatus, setSingleFeatureStatus] = useState(false);
 const [multiFeatureLayerStatus, setMultiFeatureLayerStatus] = useState(false);
 const [singleGraphicLayerStatus, setSingleGraphicLayerStatus] = useState(false);
 const [multiGraphicLayerStatus, setMultiGraphicLayerStatus] = useState(false);
 useEffect(() => {
 renderCb({content, errorContent});
 }, [content, errorContent, renderCb]);
 const getGeoX = () => {
 let coordinate = Home.coordinate;
 if (coordinate === ‘4490’) {
 return Geo4490X;
 } else {
 return GeoX;
 }
 };
 const getGeoY = () => {
 let coordinate = Home.coordinate;
 if (coordinate === ‘4490’) {
 return Geo4490Y;
 } else {
 return GeoY;
 }
 };
 const onSwitchSingleMapImageLayer = (e: boolean) => {
 if (e) {
 LayerManager.showLayer(MapId, MapImageLayerId);
 } else {
 LayerManager.hideLayer(MapId, MapImageLayerId);
 }
 setSingleMapImageLayerStatus(e);
 };
 const onSwitchMultiMapImageLayer = (e: boolean) => {
 if (e) {
 LayerManager.showLayers(MapId, MapImageLayerIds);
 } else {
 LayerManager.hideLayers(MapId, MapImageLayerIds);
 }
 setMultiMapImageLayerStatus(e);
 };
 const onSwitchSingleFeatureLayer = (e: boolean) => {
 if (e) {
 LayerManager.showLayer(MapId, FeatureLayerId);
 } else {
 LayerManager.hideLayer(MapId, FeatureLayerId);
 }
 setSingleFeatureStatus(e);
 };
 const onSwitchMultiFeatureLayer = (e: boolean) => {
 if (e) {
 LayerManager.showLayers(MapId, FeatureLayerIds);
 } else {
 LayerManager.hideLayers(MapId, FeatureLayerIds);
 }
 setMultiFeatureLayerStatus(e);
 };
 const onSwitchSingleGraphicLayer = (e: boolean) => {
 setSingleGraphicLayerStatus(e);
 //加载单个图层的graphics
 };
 const onSwitchMultiGraphicLayer = (e: boolean) => {
 setMultiGraphicLayerStatus(e);
 //加载多个图层的graphics
 };
 const onAddGraphics = () => {
 GraphicLayerCtrl.addGraphics(MapId, layerName, graphicStrs)
 .then((r: any) => {
 graphicIds = r;
 graphicId = graphicIds[0];
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onRemoveGraphic = () => {
 GraphicCtrl.removeGraphic(graphicId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onRemoveGraphics = () => {
 GraphicCtrl.removeGraphics(graphicIds)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetSymbol = () => {
 GraphicCtrl.getSymbol(graphicId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetSymbol = () => {
 GraphicCtrl.setSymbol(graphicId, symbolStr)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onIsSelected = () => {
 GraphicCtrl.isSelected(graphicId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent(r.toString());
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetSelected = () => {
 GraphicCtrl.setSelected(graphicId, selected)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onIsVisible = () => {
 GraphicCtrl.isVisible(graphicId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent(r.toString());
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetVisible = () => {
 GraphicCtrl.setVisible(graphicId, visible)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetAttributes = () => {React Native for Arcgis 地图开发 － 小专栏