React Native for Arcgis 地图开发 MapImageLayer （六）

针对MapImageLayer 的封装demo 案例

• MapImageLayerCtrl

```javascript
import React, {useEffect, useState} from 'react';
import {Clipboard, ScrollView, StyleSheet, Text, View} from 'react-native';
import {Button, List, Switch} from '@ant-design/react-native';
import {ImageFormat, LayerManager, MapImageLayerCtrl, MapManager, MapView} from '@haibalai/react-native-arcgis';
import {connect} from 'react-redux';
import WidthDrawer from '../../../../components/WithDrawer/index';

const MapId = 'baseMap';
// const MapImageLayerId3857 = '易涝点-MapServer';
// const MapImageLayerId4490 = '雨水口-MapImageLayer';
const MapImageLayerId3857 = '排水渠道-MapImageLayer';
// const MapImageLayerId3857 = '二级水源保护区';
const MapImageLayerId4490 = '排水渠道-MapImageLayer';

/** sideBar组件
*

• @param {*} renderCb renderCb是一个函数, 每次触发并且向里面传值(对象)，content组件就以sideBarData的属性去接受
• @param Home
  */
  const SideBar = ({renderCb, Home}: any) => {
  const [content, changeContent] = useState('');
  const [errorContent, changeErrorContent] = useState('');
  const [singleMapImageLayerStatus, setMapImageLayerStatus] = useState(false);
  const [PopupEnabled, setPopupEnabled] = useState(false);
  const [LabelsEnabled, setLabelsEnabled] = useState(false);
  const [ScaleSymbols, setScaleSymbols] = useState(false);
  useEffect(() => {
  renderCb({content, errorContent, changeContent, changeErrorContent});
  }, [content, errorContent, renderCb]);
  const getLayerId = () => {
  let coordinate = Home.coordinate;
  if (coordinate === '4490') {
  return MapImageLayerId4490;
  } else {
  return MapImageLayerId3857;
  }
  };
  const getRender = () => {
  return {
  field1: 'type',
  fieldDelimiter: ',',
  type: 'uniqueValue',
  uniqueValueInfos: [
  {
  label: 'GS',
  symbol: {
  color: [235, 0, 0, 255],
  style: 'esriSLSSolid',
  type: 'esriSLS',
  width: 1,
  },
  value: 'GS',
  },
  {
  label: 'HS',
  symbol: {
  color: [0, 191, 77, 255],
  style: 'esriSLSSolid',
  type: 'esriSLS',
  width: 1,
  },
  value: 'HS',
  },
  {
  label: 'WS',
  symbol: {
  color: [255, 0, 135, 255],
  style: 'esriSLSSolid',
  type: 'esriSLS',
  width: 1,
  },
  value: 'WS',
  },
  {
  label: 'YS',
  symbol: {
  color: [0, 0, 255, 255],
  style: 'esriSLSSolid',
  type: 'esriSLS',
  width: 1,
  },
  value: 'YS',
  },
  ],
  };
  };
  const getDefinitionExpression = () => {
  return '';
  };
  const onSwitchVectorTiledLayerStatus = (e: boolean) => {
  if (e) {
  LayerManager.showLayer(MapId, getLayerId());
  } else {
  LayerManager.hideLayer(MapId, getLayerId());
  }
  setMapImageLayerStatus(e);
  };
  const onSwitchLabelsEnabled = (value: boolean) => {
  MapImageLayerCtrl.setLabelsEnabled(MapId, getLayerId(), value)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  setLabelsEnabled(value);
  };
  const onSwitchPopupEnabled = (value: boolean) => {
  MapImageLayerCtrl.setPopupEnabled(MapId, getLayerId(), value)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  setPopupEnabled(value);
  };
  const onSwitchScaleSymbols = (value: boolean) => {
  MapImageLayerCtrl.setScaleSymbols(MapId, getLayerId(), value)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  setScaleSymbols(value);
  };
  const onGetGeodatabaseVersion = (value: boolean) => {
  MapImageLayerCtrl.getGeodatabaseVersion(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetImageFormat = (value: boolean) => {
  MapImageLayerCtrl.getImageFormat(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetMapServiceInfo = (value: boolean) => {
  MapImageLayerCtrl.getMapServiceInfo(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetDefinitionExpression = (value: boolean) => {
  MapImageLayerCtrl.getDefinitionExpression(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetRefreshInterval = (value: boolean) => {
  MapImageLayerCtrl.getRefreshInterval(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetRequestConfiguration = (value: boolean) => {
  MapImageLayerCtrl.getRequestConfiguration(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetRenderer = (value: boolean) => {
  MapImageLayerCtrl.getRenderer(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  Clipboard.setString('' + r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetId = (value: boolean) => {
  MapImageLayerCtrl.getId(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetUri = (value: boolean) => {
  MapImageLayerCtrl.getUri(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onGetSubUri = (value: boolean) => {
  MapImageLayerCtrl.getSubUri(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onIsLabelsEnabled = (value: boolean) => {
  MapImageLayerCtrl.isLabelsEnabled(MapId, getLayerId())
  .then((r: any) => {
  changeErrorContent('');
  changeContent('' + r);
  })

 更多参考 https://xiaozhuanlan.com/topic/7894205316