React Native for Arcgis 地图开发 LocationCtrl （十五）

定位工具封装和使用 LocationCtrl

import React, {useState, useEffect} from 'react';
import {View, Text, ScrollView, StyleSheet, DeviceEventEmitter} from 'react-native';
import {Button, List, Switch} from '@ant-design/react-native';
import {
LocationCtrl,
LayerManager,
MapManager,
MapView,
LocationEventType,
AutoPanMode,
LocationCtrl2,
LocationEventType2,
} from '@haibalai/react-native-arcgis';
import {connect} from 'react-redux';
import WidthDrawer from '../../../../components/WithDrawer/index';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {PermissionsUtil} from '../../../../../nativeModules/util/PermissionsUtil';
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 locationEventType = LocationEventType.onLocationChanged;
let listenerId = '';
let displayMode = AutoPanMode.COMPASS_NAVIGATION;
const symbolStr = '';
const imageBse64 =
'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';
const delay = 100;
const period = 10000;
const enable = true;
const enableShow = false;
const opacity = 0.5;
const isShow = false;
let tmpLocateListener: any = null;
const initScale = 1000; //测试初始比例尺
const permissions = ['android.permission.ACCESS_FINE_LOCATION', 'android.permission.ACCESS_COARSE_LOCATION'];
/** 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 onStartAsyncNotShow = () => {
LocationCtrl.startAsync(MapId, false)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onCheckPermissions = () => {
PermissionsUtil.checkPermissions(permissions)
.then((r: any) => {
console.log(r, '当前请求定位权限结果状态！');
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
console.log(e, '提出请求申请失败！');
changeErrorContent(e);
});
};
 const onStartAsyncShow = () => {
LocationCtrl.startAsync(MapId, true)
.then((r: any) => {
changeErrorContent('');
LocationCtrl.startGetLocation(MapId, 50, 5000)
.then((r: any) => {
console.log('开启等间隔获取定位成功', r);
changeErrorContent('');
tmpLocateListener = DeviceEventEmitter.addListener(LocationEventType.onPassiveLocationChanged, res => {
changeContent(res);
});
})
.catch((e: any) => {
changeErrorContent(e);
});
})
.catch((e: any) => {
changeErrorContent(e);
});
// LocationCtrl.startAsync(MapId, true)
// .then((r: any) => {
// changeErrorContent('');
// changeContent(r);
// })
// .catch((e: any) => {
// changeErrorContent(e);
// });
};
const onSetTimerParam = () => {
LocationCtrl.setTimerParam(MapId, delay, period)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onStartListenCourseChange = () => {
LocationCtrl.startListenCourseChange(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onStopListenCourseChange = () => {
LocationCtrl.stopListenCourseChange(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onAddListener = () => {
LocationCtrl.addListener(MapId, locationEventType)
.then((r: any) => {
listenerId = r;
changeErrorContent('');
tmpLocateListener = DeviceEventEmitter.addListener(locationEventType, r => {
changeContent(r);
});
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onStartGetLocation = () => {
LocationCtrl.startGetLocation(MapId, 50, 5000)
.then((r: any) => {
console.log('开启等间隔获取定位成功', r);
changeErrorContent('');
tmpLocateListener = DeviceEventEmitter.addListener(LocationEventType.onPassiveLocationChanged, res => {
changeContent(res);
});
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onStopGetLocation = () => {
LocationCtrl.stopGetLocation(MapId)
.then((r: any) => {
console.log('关闭等间隔获取定位成功', r);
changeErrorContent('');
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onRemoveListener = () => {
LocationCtrl.removeListener(MapId, listenerId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
 const onClearListener = () => {
LocationCtrl.clearListener(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onIsStarted = () => {
LocationCtrl.isStarted(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r.toString());
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onStopLocation = () => {
LocationCtrl2.stopLocation(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetHeading = () => {
LocationCtrl.getHeading(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetInitialZoomScale = () => {
LocationCtrl.getInitialZoomScale(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetInitialZoomScale = () => {
LocationCtrl.setInitialZoomScale(MapId, initScale)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetMapLocation = () => {
LocationCtrl2.getCurrentLocation()
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetAutoPanMode = () => {
LocationCtrl.setAutoPanMode(MapId, displayMode)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetAccuracySymbol = () => {
LocationCtrl.getAccuracySymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetAccuracySymbol = () => {
LocationCtrl.setAccuracySymbol(MapId, symbolStr)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetAcquiringSymbol = () => {
LocationCtrl.getAcquiringSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetAcquiringSymbol = () => {
LocationCtrl.setAcquiringSymbol(MapId, symbolStr)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetCourseSymbol = () => {
LocationCtrl.getCourseSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetCourseSymbol = () => {
LocationCtrl.setCourseSymbol(MapId, symbolStr)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onGetDefaultSymbol = () => {
LocationCtrl.getDefaultSymbol(MapId)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onSetDefaultSymbol = () => {
LocationCtrl.setDefaultSymbol(MapId, imageBse64)
.then((r: any) => {
changeErrorContent('');
changeContent(r);
})
.catch((e: any) => {
changeErrorContent(e);
});
};

 

React Native for Arcgis 地图开发 LocationCtrl （十五） － 小专栏