React Native for Arcgis 地图开发 GraphicCtrl （十三）

GraphicCtrl 的使用

import React, {useState, useEffect} from ‘react’;
import {View, Text, ScrollView, StyleSheet} from ‘react-native’;
import {Button, List, Switch} from ‘@ant-design/react-native’;
import {GraphicCtrl, GraphicLayerCtrl, LayerManager, MapManager, MapView} from ‘@haibalai/react-native-arcgis’;
import {connect} from ‘react-redux’;
import WidthDrawer from ‘…/…/…/…/components/WithDrawer/index’;
import {Colors} from ‘react-native/Libraries/NewAppScreen’;
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 layerName = ‘test’;
const graphicStrs = [
{geometry: {type: ‘point’, x: 113.868676, y: 22.487838, z: 0, spatialReference: {wkid: 4326}}},
{geometry: {type: ‘point’, x: 113.768676, y: 22.587838, z: 0, spatialReference: {wkid: 4326}}},
{geometry: {type: ‘point’, x: 113.868676, y: 22.587838, z: 0, spatialReference: {wkid: 4326}}},
];
let graphicId = ‘’;
let graphicIds = [‘’];
const symbolStr = {
angle: 0,
color: [40, 135, 255, 255],
outline: {color: [14, 98, 230, 255], style: ‘solid’, type: ‘esriSLS’, width: 1.5},
size: 9,
style: ‘circle’,
type: ‘esriSMS’,
xoffset: 0,
yoffset: 0,
};
const selected = true;
const visible = true;
const geometryStr = ‘’;
const attributesStr = ‘’;
const zIndex = 1;
/** 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 onAddGraphics = () => {
GraphicLayerCtrl.addGraphics(MapId, layerName, graphicStrs)
.then((r: any) => {
graphicIds = r;
graphicId = graphicIds[0];
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveGraphic = () => {
GraphicCtrl.removeGraphic(graphicId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveGraphics = () => {
GraphicCtrl.removeGraphics(graphicIds)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetSymbol = () => {
GraphicCtrl.getSymbol(graphicId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetSymbol = () => {
GraphicCtrl.setSymbol(graphicId, symbolStr)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onIsSelected = () => {
GraphicCtrl.isSelected(graphicId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent(r.toString());
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetSelected = () => {
GraphicCtrl.setSelected(graphicId, selected)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onIsVisible = () => {
GraphicCtrl.isVisible(graphicId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent(r.toString());
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetVisible = () => {
GraphicCtrl.setVisible(graphicId, visible)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetAttributes = () => {

React Native for Arcgis 地图开发 － 小专栏