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(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 onAddGraphic = () => {console.log('graphic图形为：' + graphicPolygon);GraphicLayerCtrl.addGraphic(MapId, layerName, graphicPolygon)
.then((r: any) => {
graphicId = r;changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};const onAddGraphics = () => {GraphicLayerCtrl.addGraphics(MapId, layerName, graphicStrs)
.then((r: any) => {
graphicIds = r;changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};
const onRemoveGraphic = () => {GraphicLayerCtrl.removeGraphic(graphicId)
.then((r: any) => {changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};
const onRemoveGraphics = () => {GraphicLayerCtrl.removeGraphics(graphicIds)
.then((r: any) => {changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};
const onRemoveGraphicsLayer = () => {GraphicLayerCtrl.removeGraphicLayer(MapId, layerName)
.then((r: any) => {changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};
const onClearGraphics = () => {GraphicLayerCtrl.clearGraphics(MapId, layerName)
.then((r: any) => {changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};
const onGetCount = () => {GraphicLayerCtrl.getCount(MapId, layerName)
.then((r: any) => {changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};
const onGetSelectedGraphics = () => {GraphicLayerCtrl.getSelectedGraphics(MapId, layerName)
.then((r: any) => {
graphicIds = r;changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};
const onIsVisible = () => {GraphicLayerCtrl.isVisible(MapId, layerName)
.then((r: any) => {changeErrorContent('');changeContent(r);
})
.catch((e: any) => {changeErrorContent(e);
});
};
const onSetVisible = () => {GraphicLayerCtrl.setVisible(MapId, layerName, visible)
.then((r: any) => {changeErrorContent('');
https://xiaozhuanlan.com/topic/9041532786
网友评论