React Native for Arcgis 地图开发 featurelayer矢量图层(七)

//针对arcgis的featurelayer 封装FeatureLayerCtrl和案例  
import React, {useEffect, useState} from 'react';
import {Clipboard, ScrollView, StyleSheet, Text, View} from 'react-native';
import {Button, List, Switch} from '@ant-design/react-native';
import {
FeatureLayerCtrl,
Graphic,
LayerManager,
MapManager,
MapView,
QueryParameters,
RenderingMode,
} from '@haibalai/react-native-arcgis';
import {connect} from 'react-redux';
import WidthDrawer from '../../../../components/WithDrawer/index';
const MapId = 'baseMap';
// const EditFeatureLayerId3857 = '排水渠道-FeatureServer';
// const EditFeatureLayerId3857 = '海洋环境区划-FeatureServer';
const EditFeatureLayerId3857 = '水闸-featurelayer';
const EditFeatureLayerId4490 = '水闸-featurelayer';
const EditFeatureLayerUrl3857 =
'https://xxxx/FeatureServer/4';
const EditFeatureLayerUrl4490 =
'https://xxxxx/FeatureServer/4';
const FeatureLayerIds3857 = [
'水闸-featurelayer',
'原水管线-featurelayer',
'原水管线-featurelayer',
'海洋环境区划-featurelayer',
];
const FeatureLayerIds4490 = [
'水闸-featurelayer',
'原水管线-featurelayer',
'原水管线-featurelayer',
'海洋环境区划-featurelayer',
];
let FeatureIds: string[] = [];
/** 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]);
useEffect(() => {}, []);
const getNewFeautureLayerId = () => {
let coordinate = Home.coordinate;
if (coordinate === '4490') {
return EditFeatureLayerId4490;
} else {
return EditFeatureLayerId3857;
}
};
const getNewFeautureLayerUrl = () => {
let coordinate = Home.coordinate;
if (coordinate === '4490') {
return EditFeatureLayerUrl4490;
} else {
return EditFeatureLayerUrl3857;
}
};
const getLayerId = () => {
let coordinate = Home.coordinate;
if (coordinate === '4490') {
return EditFeatureLayerId4490;
} else {
return EditFeatureLayerId3857;
}
};
const getQueryParameters = () => {
let parameters: QueryParameters = {
Where: 'objectid<5', }; return parameters; }; const getLayerIds = () => {
let coordinate = Home.coordinate;
if (coordinate === '4490') {
return FeatureLayerIds4490;
} else {
return FeatureLayerIds3857;
}
};
const getAddFeature = () => {
let graphic: Graphic = {
geometry: {
type: 'point',
x: 12685261.263226347,
y: 2587716.4212343167,
},
attributes: {
objectid: 5,
项目编号: '测试项目编号3',
x坐标: 113.00322,
y坐标: 22.0,
},
};
return graphic;
};
const getAddFeatures = () => {
return [
{
geometry: {
type: 'point',
x: 12676738.53457256,
y: 2595665.872175964,
},
attributes: {
objectid: 3,
项目编号: '新增测试项目编号1',
x坐标: 113.00322,
y坐标: 22.0,
},
},
{
geometry: {
type: 'point',
x: 12679184.519477682,
y: 2593563.853898125,
},
attributes: {
objectid: 4,
项目编号: '新增测试项目编号2',
x坐标: 113.00322,
y坐标: 22.0,
},
},
{
geometry: {
type: 'point',
x: 12680445.730444387,
y: 2588901.19517273,
},
attributes: {
objectid: 5,
项目编号: '新增测试项目编号3',
x坐标: 113.00322,
y坐标: 22.0,
},
},
];
};
const getDeleteFeature = () => {
let graphic: Graphic = {
geometry: {},
attributes: {
objectid: 1,
},
};
return graphic;
};
const getDeleteFeatures = () => {
return [
{
attributes: {
objectid: 1,
},
},
{
attributes: {
objectid: 2,
},
},
];
};
const getUpdateFeature = () => {
let graphic: Graphic = {
geometry: {
type: 'point',
x: 1.2667e7,
y: 2496834,
},
attributes: {
objectid: 3,
项目编号: '测试项目编号23',
所在污水分区: '测试福永污水分区',
x坐标: 113.00322,
y坐标: 44393.382,
},
};
return graphic;
};
const getUpdateFeatures = () => {
return [
{
geometry: {
type: 'point',
x: 1.2667e7,
y: 2496834,
},
attributes: {
objectid: 3,
项目编号: '测试项目编号1',
x坐标: 113.00322,
y坐标: 22.0,
},
},
{
geometry: {
type: 'point',
x: 1.2667e7,
y: 2496834,
},
attributes: {
objectid: 4,
项目编号: '测试项目编号2',
x坐标: 113.00322,
y坐标: 22.0,
},
},
{
geometry: {
type: 'point',
x: 1.2667e7,
y: 2496834,
},
attributes: {
objectid: 5,
项目编号: '测试项目编号3',
x坐标: 113.00322,
y坐标: 22.0,
},
},
];
};
const getDefinitionExpression = () => {
return '';
};
const getRender = () => {
return {
field1: 'type',
fieldDelimiter: ',',
type: 'uniqueValue',
uniqueValueInfos: [
{
label: 'GS',
symbol: {
color: [255, 0, 0, 255],
style: 'esriSLSSolid',
type: 'esriSLS',
width: 1,
},
value: 'GS',
},
{
label: 'HS',
symbol: {
color: [0, 191, 77, 255],
style: 'esriSLSSolid',
type: 'esriSLS',
width: 1,
},
value: 'HS',
},
{
label: 'WS',
symbol: {
color: [255, 0, 255, 255],
style: 'esriSLSSolid',
type: 'esriSLS',
width: 1,
},
value: 'WS',
},
{
label: 'YS',
symbol: {
color: [0, 255, 255, 255],
style: 'esriSLSSolid',
type: 'esriSLS',
width: 1,
},
value: 'YS',
},
],
};
};
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 onAddLayer = () => {
FeatureLayerCtrl.addLayer(MapId, getNewFeautureLayerId(), getNewFeautureLayerUrl())
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onAddFeature = () => {
FeatureLayerCtrl.addFeature(MapId, getLayerId(), getAddFeature())
.then((r: any) => {
changeErrorContent('');
changeContent(r);
Clipboard.setString('' + r);
})
.catch((e: any) => {
changeErrorContent(e);
Clipboard.setString('' + e);
});
};
const onAddFeatures = () => {
FeatureLayerCtrl.addFeatures(MapId, getLayerId(), getAddFeatures())
.then((r: any) => {
changeErrorContent('');
changeContent(r);
Clipboard.setString('' + r);
})
.catch((e: any) => {
changeErrorContent(e);
Clipboard.setString('' + e);
});
};
const onDeleteFeature = () => {
FeatureLayerCtrl.deleteFeature(MapId, getLayerId(), getDeleteFeature())
.then((r: any) => {
changeErrorContent('');
changeContent(JSON.stringify(r));
Clipboard.setString('' + r);
})
.catch((e: any) => {
changeErrorContent('' + e);
Clipboard.setString('' + e);
});
};
const onDeleteFeatures = () => {
FeatureLayerCtrl.deleteFeatures(MapId, getLayerId(), getDeleteFeatures())
.then((r: any) => {
changeErrorContent('');
changeContent('' + r);
Clipboard.setString('' + r);
})
.catch((e: any) => {
changeErrorContent('' + e);
Clipboard.setString('' + e);
});
};
const onUpdateFeature = () => {
FeatureLayerCtrl.updateFeature(MapId, getLayerId(), getUpdateFeature())
.then((r: any) => {
changeErrorContent('');
changeContent('' + r);
Clipboard.setString('' + r);
})
.catch((e: any) => {
changeErrorContent('' + e);
Clipboard.setString('' + e);
});
};
const onUpdateFeatures = () => {
FeatureLayerCtrl.updateFeatures(MapId, getLayerId(), getUpdateFeatures())
.then((r: any) => {
changeErrorContent('');
changeContent('' + r);
Clipboard.setString('' + r);
})
.catch((e: any) => {
changeErrorContent('' + e);

 

React Native for Arcgis 地图开发 featurelayer矢量图层(七) - 小专栏

posted @ 2022-11-23 16:36  haibalai  阅读(10)  评论(0编辑  收藏  举报