//针对arcgis的featurelayer 封装FeatureLayerCtrl和案例
importReact,{useEffect,useState}from'react';import{Clipboard,ScrollView,StyleSheet,Text,View}from'react-native';import{Button,List,Switch}from'@ant-design/react-native';import{FeatureLayerCtrl,Graphic,LayerManager,MapManager,MapView,QueryParameters,RenderingMode,}from'@haibalai/react-native-arcgis';import{connect}from'react-redux';importWidthDrawerfrom'../../../../components/WithDrawer/index';constMapId='baseMap';// const EditFeatureLayerId3857 = '排水渠道-FeatureServer';// const EditFeatureLayerId3857 = '海洋环境区划-FeatureServer';constEditFeatureLayerId3857='水闸-featurelayer';constEditFeatureLayerId4490='水闸-featurelayer';constEditFeatureLayerUrl3857='https://xxxx/FeatureServer/4';constEditFeatureLayerUrl4490='https://xxxxx/FeatureServer/4';constFeatureLayerIds3857=['水闸-featurelayer','原水管线-featurelayer','原水管线-featurelayer','海洋环境区划-featurelayer',];constFeatureLayerIds4490=['水闸-featurelayer','原水管线-featurelayer','原水管线-featurelayer','海洋环境区划-featurelayer',];letFeatureIds:string[]=[];/** sideBar组件*@param {*} renderCb renderCb是一个函数, 每次触发并且向里面传值(对象)，content组件就以sideBarData的属性去接受*/constSideBar=({renderCb,Home}:any)=>{const[content,changeContent]=useState('');const[errorContent,changeErrorContent]=useState('');const[singleFeatureLayerStatus,setSingleFeatureStatus]=useState(false);const[multiFeatureLayerStatus,setMultiFeatureLayerStatus]=useState(false);const[PopupEnabled,setPopupEnabled]=useState(false);const[LabelsEnabled,setLabelsEnabled]=useState(false);const[ScaleSymbols,setScaleSymbols]=useState(false);useEffect(()=>{renderCb({content,errorContent});},[content,errorContent,renderCb]);useEffect(()=>{},[]);constgetNewFeautureLayerId=()=>{letcoordinate=Home.coordinate;if(coordinate==='4490'){returnEditFeatureLayerId4490;}else{returnEditFeatureLayerId3857;}};constgetNewFeautureLayerUrl=()=>{letcoordinate=Home.coordinate;if(coordinate==='4490'){returnEditFeatureLayerUrl4490;}else{returnEditFeatureLayerUrl3857;}};constgetLayerId=()=>{letcoordinate=Home.coordinate;if(coordinate==='4490'){returnEditFeatureLayerId4490;}else{returnEditFeatureLayerId3857;}};constgetQueryParameters=()=>{letparameters:QueryParameters={Where:'objectid<5',};returnparameters;};constgetLayerIds=()=>{letcoordinate=Home.coordinate;if(coordinate==='4490'){returnFeatureLayerIds4490;}else{returnFeatureLayerIds3857;}};constgetAddFeature=()=>{letgraphic:Graphic={geometry:{type:'point',x:12685261.263226347,y:2587716.4212343167,},attributes:{objectid:5,项目编号:'测试项目编号3',x坐标:113.00322,y坐标:22.0,},};returngraphic;};constgetAddFeatures=()=>{return[{geometry:{type:'point',x:12676738.53457256,y:2595665.872175964,},attributes:{objectid:3,项目编号:'新增测试项目编号1',x坐标:113.00322,y坐标:22.0,},},{geometry:{type:'point',x:12679184.519477682,y:2593563.853898125,},attributes: {objectid: 4,项目编号: '新增测试项目编号2',x坐标: 113.00322,y坐标: 22.0,},},{geometry: {type: 'point',x: 12680445.730444387,y: 2588901.19517273,},attributes: {objectid: 5,项目编号: '新增测试项目编号3',x坐标: 113.00322,y坐标: 22.0,},},];};const getDeleteFeature = () => {let graphic: Graphic = {geometry: {},attributes: {objectid: 1,},};return graphic;};const getDeleteFeatures = () => {return [{attributes: {objectid: 1,},},{attributes: {objectid: 2,},},];};const getUpdateFeature = () => {let graphic: Graphic = {geometry: {type: 'point',x: 1.2667e7,y: 2496834,},attributes: {objectid: 3,项目编号: '测试项目编号23',所在污水分区: '测试福永污水分区',x坐标: 113.00322,y坐标: 44393.382,},};return graphic;};const getUpdateFeatures = () => {return [{geometry: {type: 'point',x: 1.2667e7,y: 2496834,},attributes: {objectid: 3,项目编号: '测试项目编号1',x坐标: 113.00322,y坐标: 22.0,},},{geometry: {type: 'point',x: 1.2667e7,y: 2496834,},attributes: {objectid: 4,项目编号: '测试项目编号2',x坐标: 113.00322,y坐标: 22.0,},},{geometry: {type: 'point',x: 1.2667e7,y: 2496834,},attributes: {objectid: 5,项目编号: '测试项目编号3',x坐标: 113.00322,y坐标: 22.0,},},];};const getDefinitionExpression = () => {return '';};const getRender = () => {return {field1: 'type',fieldDelimiter: ',',type: 'uniqueValue',uniqueValueInfos: [{label: 'GS',symbol: {color: [255, 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, 255, 255],style: 'esriSLSSolid',type: 'esriSLS',width: 1,},value: 'WS',},{label: 'YS',symbol: {color: [0, 255, 255, 255],style: 'esriSLSSolid',type: 'esriSLS',width: 1,},value: 'YS',},],};};const onSwitchSingleFeatureLayer = (e: boolean) => {if (e) {LayerManager.showLayer(MapId, getLayerId());} else {LayerManager.hideLayer(MapId, getLayerId());}setSingleFeatureStatus(e);};const onSwitchMultiFeatureLayer = (e: boolean) => {if (e) {LayerManager.showLayers(MapId, getLayerIds());} else {LayerManager.hideLayers(MapId, getLayerIds());}setMultiFeatureLayerStatus(e);};const onSwitchLabelsEnabled = (value: boolean) => {FeatureLayerCtrl.setLabelsEnabled(MapId, getLayerId(), value).then((r: any) => {changeErrorContent('');changeContent(r);}).catch((e: any) => {changeErrorContent(e);});setLabelsEnabled(value);};const onSwitchPopupEnabled = (value: boolean) => {FeatureLayerCtrl.setPopupEnabled(MapId, getLayerId(), value).then((r: any) => {changeErrorContent('');changeContent(r);}).catch((e: any) => {changeErrorContent(e);});setPopupEnabled(value);};const onSwitchScaleSymbols = (value: boolean) => {FeatureLayerCtrl.setScaleSymbols(MapId, getLayerId(), value).then((r: any) => {changeErrorContent('');changeContent(r);}).catch((e: any) => {changeErrorContent(e);});setScaleSymbols(value);};const onAddLayer = () => {FeatureLayerCtrl.addLayer(MapId, getNewFeautureLayerId(), getNewFeautureLayerUrl()).then((r: any) => {changeErrorContent('');changeContent(r);}).catch((e: any) => {changeErrorContent(e);});};const onAddFeature = () => {FeatureLayerCtrl.addFeature(MapId, getLayerId(), getAddFeature()).then((r: any) => {changeErrorContent('');changeContent(r);Clipboard.setString('' + r);}).catch((e: any) => {changeErrorContent(e);Clipboard.setString('' + e);});};const onAddFeatures = () => {FeatureLayerCtrl.addFeatures(MapId, getLayerId(), getAddFeatures()).then((r: any) => {changeErrorContent('');changeContent(r);Clipboard.setString('' + r);}).catch((e: any) => {changeErrorContent(e);Clipboard.setString('' + e);});};const onDeleteFeature = () => {FeatureLayerCtrl.deleteFeature(MapId, getLayerId(), getDeleteFeature()).then((r: any) => {changeErrorContent('');changeContent(JSON.stringify(r));Clipboard.setString('' + r);}).catch((e: any) => {changeErrorContent('' + e);Clipboard.setString('' + e);});};const onDeleteFeatures = () => {FeatureLayerCtrl.deleteFeatures(MapId, getLayerId(), getDeleteFeatures()).then((r: any) => {changeErrorContent('');changeContent('' + r);Clipboard.setString('' + r);}).catch((e: any) => {changeErrorContent('' + e);Clipboard.setString('' + e);});};const onUpdateFeature = () => {FeatureLayerCtrl.updateFeature(MapId, getLayerId(), getUpdateFeature()).then((r: any) => {changeErrorContent('');changeContent('' + r);Clipboard.setString('' + r);}).catch((e: any) => {changeErrorContent('' + e);Clipboard.setString('' + e);});};const onUpdateFeatures = () => {FeatureLayerCtrl.updateFeatures(MapId, getLayerId(), getUpdateFeatures()).then((r: any) => {changeErrorContent('');changeContent('' + r);Clipboard.setString('' + r);}).catch((e: any) => {changeErrorContent('' + e);
React Native for Arcgis 地图开发 featurelayer矢量图层（七） － 小专栏