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

ClusterLayerCtrl 聚合图层调用封装

import React, {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’;
import WidthDrawer from ‘…/…/…/…/components/WithDrawer/index’;
const MapId = ‘baseMap’;
const EditFeatureLayerId3857 = ‘水闸-featurelayer’;
const EditFeatureLayerId4490 = ‘水闸-featurelayer’;
const FeatureLayerIds3857 = [
‘水闸-featurelayer’,
‘原水管线-featurelayer’,
‘原水管线-featurelayer’,
‘海洋环境区划-featurelayer’,
];
const FeatureLayerIds4490 = [
‘水闸-featurelayer’,
‘原水管线-featurelayer’,
‘原水管线-featurelayer’,
‘海洋环境区划-featurelayer’,
];
const clusterLayerId = ‘test’;
const layerName = ‘test1’;
const serverAddr = ‘https://xxxxxxxx’;
const clusterTolerance = 150;
const layerId = ‘test’;
const markerSymbolStr = {color: [200, 0, 0, 125], style: ‘esriSMSCircle’, type: ‘esriSMS’};
const pictureMakerSymbol = {
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,
};
const imageUrl =
‘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=’;
const scaleLevel = 1;
let visible = false;
/** sideBar组件
*

@param {*} renderCb renderCb是一个函数, 每次触发并且向里面传值(对象)，content组件就以sideBarData的属性去接受
*/
const SideBar = ({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]);
const onShowFeatureClusterLayer = () => {
ClusterLayerCtrl.showFeatureClusterLayer(MapId, clusterLayerId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onShowGraphicClusterLayer = () => {
ClusterLayerCtrl.showGraphicClusterLayer(MapId, clusterLayerId, layerName)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onHideClusterLayer = () => {
ClusterLayerCtrl.hideClusterLayer(MapId, clusterLayerId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetMarkerSymbol = () => {
ClusterLayerCtrl.setMarkerSymbol(MapId, clusterLayerId, pictureMakerSymbol, scaleLevel)
.then((r: any) => {
changeErrorContent(‘’);
changeContent(r.toString());
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetVisible = () => {
ClusterLayerCtrl.setVisible(MapId, clusterLayerId, visible)
.then((r: any) => {
changeErrorContent(‘’);
changeContent(r.toString());
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onClear = () => {
ClusterLayerCtrl.clear(MapId, clusterLayerId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMarkerSymbol = () => {
ClusterLayerCtrl.getMarkerSymbol(MapId, clusterLayerId, scaleLevel)
.then((r: any) => {
changeErrorContent(‘’);

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