React Native for Arcgis 地图开发 SketchEditorCtrl（十七）

SketchEditorCtrl 图形编辑封装
```javascript
import React, {useState, useEffect} from 'react';
import {View, Text, ScrollView, StyleSheet, DeviceEventEmitter} from 'react-native';
import {Button, List, Switch} from '@ant-design/react-native';
import {SketchEditorCtrl, LayerManager, MapManager, MapView, SketchCreationMode} from '@haibalai/react-native-arcgis';
import {connect} from 'react-redux';
import WidthDrawer from '../../../../components/WithDrawer/index';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {StackActions} from 'react-navigation';
import {SketchEventType} from '../../../../../nativeModules/core/SketchEventType';
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 strSketchCreationMode = SketchCreationMode.POLYLINE;
const strEditConfiguration = null;
const partIndex = 0;
const pointIndex = 1;
const insertionIndex = 1;
const point = '';
const visible = true;
const geometry = '';
const sketchEventType = SketchEventType.onGeometryChanged;
let listenerId = '';
const strFeedBackPointSymbol = {
angle: 0,
color: [255, 0, 0, 255],
size: 7.5,
style: 'esriSMSCircle',
type: 'esriSMS',
xoffset: 0,
yoffset: 0,
};
const strFeedbackLineSymbol = {color: [0, 0, 128, 255], style: 'esriSLSDash', type: 'esriSLS', width: 0.75};
const strFeedbackVertexSymbol = {
color: [0, 80, 0, 255],
outline: {color: [0, 0, 128, 255], style: 'esriSLSDash', type: 'esriSLS', width: 0.75},
style: 'esriSFSDiagonalCross',
type: 'esriSFS',
};
const opacity = 0.5;
const strFillSymbol = {
color: [0, 80, 0, 255],
outline: {color: [0, 0, 128, 255], style: 'esriSLSDash', type: 'esriSLS', width: 0.75},
style: 'esriSFSDiagonalCross',
type: 'esriSFS',
};
const strLineSymbol = {color: [0, 0, 128, 255], style: 'esriSLSDash', type: 'esriSLS', width: 0.75};
const strFeedbackFillSymbol = {
color: [0, 80, 0, 255],
outline: {color: [0, 0, 128, 255], style: 'esriSLSDash', type: 'esriSLS', width: 0.75},
style: 'esriSFSDiagonalCross',
type: 'esriSFS',
};
const strMidVertexSymbol = {
angle: 0,
color: [0, 255, 0, 255],
size: 7.5,
style: 'esriSMSCircle',
type: 'esriSMS',
xoffset: 0,
yoffset: 0,
};
const strSelectedVertexSymbol = {
angle: 0,
color: [0, 0, 255, 255],
size: 7.5,
style: 'esriSMSCircle',
type: 'esriSMS',
xoffset: 0,
yoffset: 0,
};
const strMultilayerVertexSymbol = '';
const strSelectedMidVertexSymbol = {
angle: 0,
color: [255, 255, 0, 255],
size: 7.5,
style: 'esriSMSCircle',
type: 'esriSMS',
xoffset: 0,
yoffset: 0,
};
const strVertexSymbol = {
angle: 0,
color: [0, 255, 255, 255],
size: 7.5,
style: 'esriSMSCircle',
type: 'esriSMS',
xoffset: 0,
yoffset: 0,
};
const strVertexTextSymbol = {
angle: 0,
backgroundColor: [0, 0, 0, 0],
borderLineColor: [0, 0, 0, 0],
borderLineSize: 0,
color: [0, 0, 230, 255],
font: {decoration: 'none', size: 7.5, style: 'normal', weight: 'normal'},
haloColor: [0, 0, 0, 0],
haloSize: 0,
horizontalAlignment: 'right',
kerning: false,
text: '文本',
type: 'esriTS',
verticalAlignment: 'top',
xoffset: 0,
yoffset: 0,
};
const showNumbersForVertices = true;
let tmpLocateListener: any = null;
/** 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 onInit = () => {
  SketchEditorCtrl.init(MapId)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onRemove = () => {
  SketchEditorCtrl.remove(MapId)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onStartByCreationMode1 = () => {
  SketchEditorCtrl.startByCreationMode(MapId, SketchCreationMode.POINT, strEditConfiguration)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onStartByCreationMode2 = () => {
  SketchEditorCtrl.startByCreationMode(MapId, SketchCreationMode.POLYLINE, strEditConfiguration)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onStartByCreationMode3 = () => {
  SketchEditorCtrl.startByCreationMode(MapId, SketchCreationMode.POLYGON, strEditConfiguration)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onStartByCreationMode4 = () => {
  SketchEditorCtrl.startByCreationMode(MapId, SketchCreationMode.MULTIPOINT, strEditConfiguration)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onStartByCreationMode5 = () => {
  SketchEditorCtrl.startByCreationMode(MapId, SketchCreationMode.FREEHAND_LINE, strEditConfiguration)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onStartByCreationMode6 = () => {
  SketchEditorCtrl.startByCreationMode(MapId, SketchCreationMode.FREEHAND_POLYGON, strEditConfiguration)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onStartByGeometry = () => {
  SketchEditorCtrl.startByGeometry(MapId, geometry, strSketchCreationMode, strEditConfiguration)
  .then((r: any) => {
  changeErrorContent('');
  changeContent(r);
  })
  .catch((e: any) => {
  changeErrorContent(e);
  });
  };
  const onStop = () => {
  SketchEditorCtrl.stop(MapId)
  .then((r: any) => {
• changeErrorContent('');
• changeContent(r);

})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRedo = () => {
SketchEditorCtrl.redo(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onUndo = () => {
SketchEditorCtrl.undo(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onCanRedo = () => {
SketchEditorCtrl.canRedo(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onCanUndo = () => {
SketchEditorCtrl.canUndo(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onClearGeometry = () => {
SketchEditorCtrl.clearGeometry(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetGeometry = () => {
SketchEditorCtrl.getGeometry(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetOpacity = () => {
SketchEditorCtrl.getOpacity(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetSelectedVertex = () => {
SketchEditorCtrl.getSelectedVertex(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetSelectedVertex = () => {
SketchEditorCtrl.setSelectedVertex(MapId, partIndex, pointIndex)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetSelectedMidVertex = () => {
SketchEditorCtrl.setSelectedMidVertex(MapId, partIndex, insertionIndex)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onInsertVertexAfterSelectedVertex = () => {
SketchEditorCtrl.insertVertexAfterSelectedVertex(MapId, point)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onIsSketchValid = () => {
SketchEditorCtrl.isSketchValid(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onIsVisible = () => {
SketchEditorCtrl.isVisible(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetVisible = () => {
SketchEditorCtrl.setVisible(MapId, visible)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onMoveSelectedVertex = () => {
SketchEditorCtrl.moveSelectedVertex(MapId, point)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveSelectedVertex = () => {
SketchEditorCtrl.removeSelectedVertex(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onReplaceGeometry = () => {
SketchEditorCtrl.replaceGeometry(MapId, geometry)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onAddListener = () => {
SketchEditorCtrl.addListener(MapId, sketchEventType)
.then((r: any) => {
changeErrorContent('');
tmpLocateListener = DeviceEventEmitter.addListener(sketchEventType, r => {
listenerId = r;
changeContent(r);
});
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveListener = () => {
SketchEditorCtrl.removeListener(MapId, listenerId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onClearListener = () => {
SketchEditorCtrl.clearListener(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetFeedbackFillSymbol = () => {
SketchEditorCtrl.getFeedbackFillSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetFeedbackLineSymbol = () => {
SketchEditorCtrl.getFeedbackLineSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetFeedbackVertexSymbol = () => {
SketchEditorCtrl.getFeedbackVertexSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetFillSymbol = () => {
SketchEditorCtrl.getFillSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetLineSymbol = () => {
SketchEditorCtrl.getLineSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMidVertexSymbol = () => {
SketchEditorCtrl.getMidVertexSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMultilayerFeedbackFillSymbol = () => {
SketchEditorCtrl.getMultilayerFeedbackFillSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMultilayerFeedbackLineSymbol = () => {
SketchEditorCtrl.getMultilayerFeedbackFillSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMultilayerFeedbackVertexSymbol = () => {
SketchEditorCtrl.getMultilayerFeedbackVertexSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMultilayerFillSymbol = () => {
SketchEditorCtrl.getMultilayerFillSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMultilayerLineSymbol = () => {
SketchEditorCtrl.getMultilayerLineSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMultilayerMidVertexSymbol = () => {
SketchEditorCtrl.getMultilayerMidVertexSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMultilayerSelectedMidVertexSymbol = () => {
SketchEditorCtrl.getMultilayerSelectedMidVertexSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMultilayerSelectedVertexSymbol = () => {
SketchEditorCtrl.getMultilayerSelectedVertexSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetVertexSymbol = () => {
SketchEditorCtrl.getVertexSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};