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

原创
haibalai2009 2022-11-19 06:38:18 ©著作权
文章标签 arcgis react native react.js ide 图层 文章分类 Java 后端开发
©著作权归作者所有：来自51CTO博客作者haibalai2009的原创作品，请联系作者获取转载授权，否则将追究法律责任
SketchEditorCtrl 图形编辑封装
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);
});
};