React Native for Arcgis 地图开发 GraphicLayer （十二）

GraphicLayer 的封装调用

import React, {useEffect, useState} from ‘react’;
import {ScrollView, StyleSheet, Text, View} from ‘react-native’;
import {Button, List, Switch} from ‘@ant-design/react-native’;
import {
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 layerName = ‘test’;
let graphicId = ‘’;
let graphicIds = [‘’];
const graphicStr = {geometry: {type: ‘point’, x: 113.868676, y: 22.587838, z: 0, spatialReference: {wkid: 4326}}};
const graphicStrs = [
{
geometry: {type: ‘point’, x: 113.868676, y: 22.487838, z: 0, spatialReference: {wkid: 4326}},
symbol: {
type: ‘picture-marker’,
url: ‘https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png’,
width: 20,
height: 20,
opacity: 1,
xOffset: 20,
yOffset: 20,
angle: 45,
},
},
{
geometry: {type: ‘point’, x: 113.768676, y: 22.587838, z: 0, spatialReference: {wkid: 4326}},
symbol: {
type: ‘picture-marker’,
url:
‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACNklEQVRYR2NkGOSAcZC7j2HUgZTG0GgIjoYgpSFAqX6MNPj/lBqKTT8jIyNZ6X3oOjDu/g6qBOQiRQ+wOVQPwRHnQCKiQ5iRkfEdujqcaZDaIUjIga///LAXY+U8RHcHEnJYtqg+gzmPJMOj358K5Nn4Jw46B4YIqjL4CSgzPPj1aYEiO3/igDkQlpthDih6fJDhzZ/vDDY80gxporoMj359PiXPzmc+aBw46/VlhiNfnjKosQsw1EhZMLz88+21BCu32KBx4OHPTxlmv7nMwMfExjBF3onh278/f7mZWVkGjQPf/P7OUPTkINg9M+VdGDiZwG7DKGpoXszAQgQ9DYLEYemwScqKQYGdjwFbUTOgDoSlQ3xFzYA6EJYO8RU1A+pAWDrEV9TQzYH4ahR8Rc2gcCC+omZQOBAUurjajUPXgSBfPf31haHy6RGsyadd2oZBmo2HUGMFLE+KOegtb7x9kn///zNkPdoLqoZQHMLFxMIwTc6ZgYnIfhAp5hB0IMwlj39+vinDxqO24t1Nhm0f76M40ItfkSFCSJ3hya8vt2TZedXxBSOl5uDsCj778y1Ykplzzd///xhWvb/FcOTzM7A7bHilGMIE1RiYGZkYnv/9HiLFwrUWnwMpNQdvX/X+j08zFdh507A54MHPz7MUOfjSiUmElJhDsDP9/M9Xr7///k3iZ2KXBznm47+fD5mZmPIkWbi3EeM4mBpyzSHoQFIcQQu1ow6kNFRHQ3DYhyAAemZ0OAVReT8AAAAASUVORK5CYII=’,
width: 20,
height: 20,
opacity: 0.8,
angle: 45,
},
},
{geometry: {type: ‘point’, x: 113.868676, y: 22.587838, z: 0, spatialReference: {wkid: 4326}}},
];
const graphicPolygon = {
geometry: {
hasM: true,
hasZ: true,
rings: [
[
[12675573.621750494, 2588252.9668057943],
[12676290.673814166, 2586536.7438337253],
[12677536.698711697, 2585725.6521551451],
[12678100.936401144, 2584879.2956209742],
[12679194.146924447, 2584620.6866799775],
[12680310.867351478, 2584268.0381240733],
[12681286.528356148, 2584550.1569687966],
[12680169.807929117, 2586043.035855459],
[12679464.510817308, 2587183.2661862168],
[12679476.265769171, 2588711.4099284699],
[12679358.716250537, 2589969.1897778627],
[12676737.361984979, 2589287.4025697806],
[12675573.621750494, 2588252.9668057943],
],
],
spatialReference: {wkid: 102100, latestWkid: 3857},
},
symbol: {color: [164, 255, 102, 200], style: ‘solid’, type: ‘esriSFS’},
};
const visible = true;
const labelEnable = true;
const scaleSymbols = true;
const opacity = 0.5;
const maxScale = 5000;
const minScale = 500;
/** 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 getNewFeautureLayerId = () => {
return ‘’;
};
const getNewFeautureLayerUrl = () => {
return ‘’;
};
const getLayerId = () => {
let coordinate = Home.coordinate;
if (coordinate === ‘4490’) {
return EditFeatureLayerId4490;
} else {
return EditFeatureLayerId3857;
}
};
const getLayerIds = () => {
let coordinate = Home.coordinate;
if (coordinate === ‘4490’) {
return FeatureLayerIds4490;
} else {
return FeatureLayerIds3857;
}
};
const getAddFeature = () => {
let graphic: Graphic = {
geometry: {},
attributes: {},
};
return graphic;
};
const getAddFeatures = () => {
let graphics = [];
let graphic: Graphic = {
geometry: {},
attributes: {},
};
graphics.push(graphic);
return graphics;
};
const getDeleteFeature = () => {
let graphic: Graphic = {
geometry: {},
attributes: {},
};
return graphic;
};
const getDeleteFeatures = () => {
let graphics = [];
let graphic: Graphic = {
geometry: {},
attributes: {},
};
graphics.push(graphic);
return graphics;
};
const getUpdateFeature = () => {
let graphic: Graphic = {
geometry: {},
attributes: {},
};
return graphic;
};
const getUpdateFeatures = () => {
let graphics = [];
let graphic: Graphic = {
geometry: {},
attributes: {},
};
graphics.push(graphic);
return graphics;
};
const getDefinitionExpression = () => {
return ‘’;
};
const getRender = () => {
return {};
};
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®;
})
.catch((e: any) => {
changeErrorContent(e);
});
setLabelsEnabled(value);
};
const onSwitchPopupEnabled = (value: boolean) => {
FeatureLayerCtrl.setPopupEnabled(MapId, getLayerId(), value)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
setPopupEnabled(value);
};
const onSwitchScaleSymbols = (value: boolean) => {
FeatureLayerCtrl.setScaleSymbols(MapId, getLayerId(), value)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
setScaleSymbols(value);
};
const onAddGraphic = () => {
console.log(‘graphic图形为：’ + graphicPolygon);
GraphicLayerCtrl.addGraphic(MapId, layerName, graphicPolygon)
.then((r: any) => {
graphicId = r;
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onAddGraphics = () => {
GraphicLayerCtrl.addGraphics(MapId, layerName, graphicStrs)
.then((r: any) => {
graphicIds = r;
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveGraphic = () => {
GraphicLayerCtrl.removeGraphic(graphicId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveGraphics = () => {
GraphicLayerCtrl.removeGraphics(graphicIds)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveGraphicsLayer = () => {
GraphicLayerCtrl.removeGraphicLayer(MapId, layerName)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onClearGraphics = () => {
GraphicLayerCtrl.clearGraphics(MapId, layerName)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetCount = () => {
GraphicLayerCtrl.getCount(MapId, layerName)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetSelectedGraphics = () => {
GraphicLayerCtrl.getSelectedGraphics(MapId, layerName)
.then((r: any) => {
graphicIds = r;
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onIsVisible = () => {
GraphicLayerCtrl.isVisible(MapId, layerName)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetVisible = () => {
GraphicLayerCtrl.setVisible(MapId, layerName, visible)
.then((r: any) => {
changeErrorContent(‘’);