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

原创
haibalai2009 2022-11-20 15:02:12 ©著作权
文章标签 arcgis react native ide 3d 4s 文章分类 运维
©著作权归作者所有：来自51CTO博客作者haibalai2009的原创作品，请联系作者获取转载授权，否则将追究法律责任
定位工具封装和使用 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®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onCheckPermissions = () => {
 PermissionsUtil.checkPermissions(permissions)
 .then((r: any) => {
 console.log(r, ‘当前请求定位权限结果状态！’);
 changeErrorContent(‘’);
 changeContent®;
 })
 .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®;
 // })
 // .catch((e: any) => {
 // changeErrorContent(e);
 // });
 };
 const onSetTimerParam = () => {
 LocationCtrl.setTimerParam(MapId, delay, period)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onStartListenCourseChange = () => {
 LocationCtrl.startListenCourseChange(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onStopListenCourseChange = () => {
 LocationCtrl.stopListenCourseChange(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onAddListener = () => {
 LocationCtrl.addListener(MapId, locationEventType)
 .then((r: any) => {
 listenerId = r;
 changeErrorContent(‘’);
 tmpLocateListener = DeviceEventEmitter.addListener(locationEventType, r => {
 changeContent®;
 });
 })
 .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®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onClearListener = () => {
 LocationCtrl.clearListener(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .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®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetHeading = () => {
 LocationCtrl.getHeading(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetInitialZoomScale = () => {
 LocationCtrl.getInitialZoomScale(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetInitialZoomScale = () => {
 LocationCtrl.setInitialZoomScale(MapId, initScale)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetMapLocation = () => {
 LocationCtrl2.getCurrentLocation()
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetAutoPanMode = () => {
 LocationCtrl.setAutoPanMode(MapId, displayMode)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetAccuracySymbol = () => {
 LocationCtrl.getAccuracySymbol(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetAccuracySymbol = () => {
 LocationCtrl.setAccuracySymbol(MapId, symbolStr)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetAcquiringSymbol = () => {
 LocationCtrl.getAcquiringSymbol(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetAcquiringSymbol = () => {
 LocationCtrl.setAcquiringSymbol(MapId, symbolStr)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetCourseSymbol = () => {
 LocationCtrl.getCourseSymbol(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetCourseSymbol = () => {
 LocationCtrl.setCourseSymbol(MapId, symbolStr)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onGetDefaultSymbol = () => {
 LocationCtrl.getDefaultSymbol(MapId)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };
 const onSetDefaultSymbol = () => {
 LocationCtrl.setDefaultSymbol(MapId, imageBse64)
 .then((r: any) => {
 changeErrorContent(‘’);
 changeContent®;
 })
 .catch((e: any) => {
 changeErrorContent(e);
 });
 };