React Native for Arcgis 地圖開發 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);