React Native for Arcgis 地图开发 LocationDisplayCtrl （十四）

定位展示LocationDisplayCtrl 封装

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,
MapManager,
MapView,
LocationDisplayCtrl,
PictureMarkerSymbol,
SimpleMarkerSymbol,
} from ‘@haibalai/react-native-arcgis’;
import {connect} from ‘react-redux’;
import WidthDrawer from ‘…/…/…/…/components/WithDrawer/index’;
const DefaultIcon = require(‘…/…/…/…/image/defaultIcon.jpeg’);
const MapId = ‘baseMap’;
const DefineSymbol: PictureMarkerSymbol = {
type: ‘picture-marker’,
width: 15,
height: 15,
url: DefaultIcon,
};
const DefineAccuracySymbol: SimpleMarkerSymbol = {
type: ‘simple-marker’,
style: ‘circle’,
color: ‘rgba(8,255,4,0.7)’,
size: 10,
};
/** sideBar组件
*f

@param {*} renderCb renderCb是一个函数, 每次触发并且向里面传值(对象)，content组件就以sideBarData的属性去接受
*/
const SideBar = ({renderCb, Home}: any) => {
const [content, changeContent] = useState(‘’);
const [errorContent, changeErrorContent] = useState(‘’);
const [locationDisplayVisible, setSingleMapImageLayerStatus] = useState(false);
useEffect(() => {
renderCb({content, errorContent});
}, [content, errorContent, renderCb]);
useEffect(() => {
console.log(‘’ + DefaultIcon, ‘symbol测试’);
}, []);
const onSwitchLocationDisplayStatus = (e: boolean) => {
LocationDisplayCtrl.setVisible(MapId, e);
setSingleMapImageLayerStatus(e);
};
const onGetSymbol = () => {
LocationDisplayCtrl.getSymbol(MapId)
.then((r: any) => {
console.log(JSON.stringify®);
changeErrorContent(‘’);
changeContent(‘’ + r);
})
.catch((e: any) => {
changeErrorContent(‘’ + e);
});
};
const onSetSymbol = () => {
LocationDisplayCtrl.setSymbol(MapId, DefineSymbol)
.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 = () => {
LocationDisplayCtrl.setAccuracySymbol(MapId, DefineAccuracySymbol)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);
});
};
const onZoomToCurrent = () => {
LocationDisplayCtrl.zoomToCurrent(MapId)
.then((r: any) => {
changeErrorContent(‘’);
changeContent®;
})
.catch((e: any) => {
changeErrorContent(e);

React Native for Arcgis 地图开发 LocationDisplayCtrl （十四） － 小专栏