React Native for Arcgis 地图开发 聚合图Cluster （十一）

ClusterLayerCtrl聚合图层调用封装

importReact, {useEffect, useState}from'react';import{ScrollView,StyleSheet,Text,View}from'react-native';import{Button,List,Switch}from'@ant-design/react-native';import{ClusterLayerCtrl,FeatureLayerCtrl,Graphic,GraphicLayerCtrl,LayerManager,MapManager,MapView,RenderingMode,}from'@haibalai/react-native-arcgis';import{connect}from'react-redux';importWidthDrawerfrom'../../../../components/WithDrawer/index';constMapId='baseMap';constEditFeatureLayerId3857='水闸-featurelayer';constEditFeatureLayerId4490='水闸-featurelayer';constFeatureLayerIds3857= ['水闸-featurelayer','原水管线-featurelayer','原水管线-featurelayer','海洋环境区划-featurelayer',];constFeatureLayerIds4490= ['水闸-featurelayer','原水管线-featurelayer','原水管线-featurelayer','海洋环境区划-featurelayer',];constclusterLayerId ='test';constlayerName ='test1';constserverAddr ='https://xxxxxxxx';constclusterTolerance =150;constlayerId ='test';constmarkerSymbolStr = {color: [200,0,0,125],style:'esriSMSCircle',type:'esriSMS'};constpictureMakerSymbol = {angle:0,// height: 30,// width: 30,contentType:'image/png',imageData:'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEhUlEQVR4Xu2bW0wUVxjH/4MssAuN1ssqatWKlxi1XkBh0RZY64P4QNMX6yVNSsliTYyXEH2yKtA0UZM28bkQE4OWVATRVVp1gWrxGi+AClRAxRuKXLwAZWeOObRj1tnZndnZLM1c5m2z53zz/X/nf75zZs8sA51fjM71wwBgOEDnBIwpoHMDGEXQawqUZhYRNbrii4I1iqazAUA42oYDjClg1ABNFkFCCHPs21/3ZhR8leM57XVRBK84rpgeco2FhMNa4WqheQCuDcUxPf1sCSFkOR35oAFk/LLaa5vAuVlU5lbg5cPuoLcQSZtTMHbueK84tYeuovl0o8/4YvuAivUl1t6BPicI4vmOIQFAg3fde4Hq/N9BOOUlZNLSqVjwTaKoyEABOB2H4/5hSQUIifMMGDIA9CZ3Sm+iobxekQuiPrTAnpcOk9kUNIDjWcXxbs7tBGAVBgspAM7NoSqvAj1tXQFDsG1NhXV2rM9+ch1QllW0nBCmBITEiAULKQB6w+4HnYMQCCt/KkxOicP8rxf7hSYHQFnm4bWE4QpBIG6jUBVBYeYN5XW4U1orywXmURak7fZtfT6IFAAmDDngmL0ExO9DUcgdQBPmWG6wIHbf75SEkJyThjGzxkm2kwIgGeC/BkMCgN6L1gG6NBKW85nblLRpmLdukazcVQeAqmo8Xo/bR2+KCrSMjkZabjrCI8O1C4BwHKp/+ANdrS+8RC7ZtgyjZ3qtUopXAVkUh6oIeibT86gbVbtPgS6R/DV12QzMXfNucyYrd1VOAV5Z08lbuPXbjcGP0dYYpO5aIdv6clcBWRT/DwfQxOhU+PPH0+hs6cDS7Z9j1PQxcvN9107VDqAqXj7uQVtNC2Z9OS9g8bSD6gEoUu3RyQAg8TgsF/CQbYTEEqI7xLBhYXJzfa+d6h3Q0fQMLWebkJCdrD8A7n43KnedxOv2V0j4bgkmJEwKGIKqHVBbdBXNZ/79OSsiJhL2/HREfhAVEATVAnje0I7ze868JzY2fiIWb/hU+wCo9V3fO/Hm+WsvsfGOZExMnCwbgiodcOPgZbS6/hYVaYqOGPwNMGq4WRYE1QF4dvsJ/trn8itu3PwJSNz4mfYADPQOwLXTid6ON5LiFmYl4SPbx5LtVOWA6wcu4V71XUlRtIHJYoI9byWiRvifCqoB0F73GDU/VcoSzzca+8l4JG1K8dtHFQCo9c/ucKKvU9r6QrX0RIieDPm6VAHgWuFF3D/XHNDo843DzSbYc9NhHmkR7S8FgAljsgmH/QCJ8JdAyB6GntY+woWfqxSJ5ztZ58TCtiVVEQAqrDyz2MYy7iMg8HnEFDQAe/5KrwTp6TAV39fVGxQA2nn2qgWip8ONJ+rRVtPqMz4v7JTjSGwf208h2MQaBw0gaIUhCuAprG5nccTdB+x+AuIQ3k4XAHjRZVmHHMK6oCsAFISwLugOAIXgWRd0CYBC4OtCRsHqbM+6oPmXpKRqrgFASMh4V1jv7wpLzRmtfa/oTwZagmAA0NJoKtFiOEAJNS31MRygpdFUouUtfQbNXzDllG4AAAAASUVORK5CYII=',type:'esriPMS',xoffset:0,yoffset:0,};constimageUrl ='iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEhUlEQVR4Xu2bW0wUVxjH/4MssAuN1ssqatWKlxi1XkBh0RZY64P4QNMX6yVNSsliTYyXEH2yKtA0UZM28bkQE4OWVATRVVp1gWrxGi+AClRAxRuKXLwAZWeOObRj1tnZndnZLM1c5m2z53zz/X/nf75zZs8sA51fjM71wwBgOEDnBIwpoHMDGEXQawqUZhYRNbrii4I1iqazAUA42oYDjClg1ABNFkFCCHPs21/3ZhR8leM57XVRBK84rpgeco2FhMNa4WqheQCuDcUxPf1sCSFkOR35oAFk/LLaa5vAuVlU5lbg5cPuoLcQSZtTMHbueK84tYeuovl0o8/4YvuAivUl1t6BPicI4vmOIQFAg3fde4Hq/N9BOOUlZNLSqVjwTaKoyEABOB2H4/5hSQUIifMMGDIA9CZ3Sm+iobxekQuiPrTAnpcOk9kUNIDjWcXxbs7tBGAVBgspAM7NoSqvAj1tXQFDsG1NhXV2rM9+ch1QllW0nBCmBITEiAULKQB6w+4HnYMQCCt/KkxOicP8rxf7hSYHQFnm4bWE4QpBIG6jUBVBYeYN5XW4U1orywXmURak7fZtfT6IFAAmDDngmL0ExO9DUcgdQBPmWG6wIHbf75SEkJyThjGzxkm2kwIgGeC/BkMCgN6L1gG6NBKW85nblLRpmLdukazcVQeAqmo8Xo/bR2+KCrSMjkZabjrCI8O1C4BwHKp/+ANdrS+8RC7ZtgyjZ3qtUopXAVkUh6oIeibT86gbVbtPgS6R/DV12QzMXfNucyYrd1VOAV5Z08lbuPXbjcGP0dYYpO5aIdv6clcBWRT/DwfQxOhU+PPH0+hs6cDS7Z9j1PQxcvN9107VDqAqXj7uQVtNC2Z9OS9g8bSD6gEoUu3RyQAg8TgsF/CQbYTEEqI7xLBhYXJzfa+d6h3Q0fQMLWebkJCdrD8A7n43KnedxOv2V0j4bgkmJEwKGIKqHVBbdBXNZ/79OSsiJhL2/HREfhAVEATVAnje0I7ze868JzY2fiIWb/hU+wCo9V3fO/Hm+WsvsfGOZExMnCwbgiodcOPgZbS6/hYVaYqOGPwNMGq4WRYE1QF4dvsJ/trn8itu3PwJSNz4mfYADPQOwLXTid6ON5LiFmYl4SPbx5LtVOWA6wcu4V71XUlRtIHJYoI9byWiRvifCqoB0F73GDU/VcoSzzca+8l4JG1K8dtHFQCo9c/ucKKvU9r6QrX0RIieDPm6VAHgWuFF3D/XHNDo843DzSbYc9NhHmkR7S8FgAljsgmH/QCJ8JdAyB6GntY+woWfqxSJ5ztZ58TCtiVVEQAqrDyz2MYy7iMg8HnEFDQAe/5KrwTp6TAV39fVGxQA2nn2qgWip8ONJ+rRVtPqMz4v7JTjSGwf208h2MQaBw0gaIUhCuAprG5nccTdB+x+AuIQ3k4XAHjRZVmHHMK6oCsAFISwLugOAIXgWRd0CYBC4OtCRsHqbM+6oPmXpKRqrgFASMh4V1jv7wpLzRmtfa/oTwZagmAA0NJoKtFiOEAJNS31MRygpdFUouUtfQbNXzDllG4AAAAASUVORK5CYII=';constscaleLevel =1;letvisible =false;/** 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]);constonShowFeatureClusterLayer= () => {ClusterLayerCtrl.showFeatureClusterLayer(MapId, clusterLayerId).then((r: any) =>{changeErrorContent('');changeContent(r);}).catch((e: any) =>{changeErrorContent(e);});};constonShowGraphicClusterLayer= () => {ClusterLayerCtrl.showGraphicClusterLayer(MapId, clusterLayerId, layerName).then((r: any) =>{changeErrorContent('');changeContent(r);}).catch((e: any) =>{changeErrorContent(e);});};constonHideClusterLayer= () => {ClusterLayerCtrl.hideClusterLayer(MapId, clusterLayerId).then((r: any) =>{changeErrorContent('');changeContent(r);}).catch((e: any) =>{changeErrorContent(e);});};constonSetMarkerSymbol= () => {ClusterLayerCtrl.setMarkerSymbol(MapId, clusterLayerId, pictureMakerSymbol, scaleLevel).then((r: any) =>{changeErrorContent('');changeContent(r.toString());}).catch((e: any) =>{changeErrorContent(e);});};constonSetVisible= () => {ClusterLayerCtrl.setVisible(MapId, clusterLayerId, visible).then((r: any) =>{changeErrorContent('');changeContent(r.toString());}).catch((e: any) =>{changeErrorContent(e);});};constonClear= () => {ClusterLayerCtrl.clear(MapId, clusterLayerId).then((r: any) =>{changeErrorContent('');changeContent(r);}).catch((e: any) =>{changeErrorContent(e);});};constonGetMarkerSymbol= () => {ClusterLayerCtrl.getMarkerSymbol(MapId, clusterLayerId, scaleLevel).then((r: any) =>{changeErrorContent('');

React Native for Arcgis 地图开发 聚合图Cluster （十一） － 小专栏