@adactive/arc-wayfindingcontrols-asia 中文文档教程

Question

Carousel component

Getting started

1. 安装此组件使用 yarn add @adactive/adsum-wayfindingcontrols-asia

2. 设置 Redux Reducers 通常位于您的项目文件夹/src/rootReducer.js

   • import the reducer :

   import { WayFindingControlsReducers } from '@adactive/adsum-wayfindingcontrols-asia';
   

   • add WayFindingControlsReducers on your root reducer, for example:

   const appState: AppStateType = {
       routing: routerReducer,
       map,
       loadingScreen,
       WayFindingControls: WayFindingControlsReducers
   };
   

3. 在您的应用程序中设置 Redux 操作 首先要做的是将操作导入到您需要操作的文件中，例如 app.js

   import { WayFindingControlsActions } from '@adactive/adsum-wayfindingcontrols-asia';
   

   该组件有 2 个 redux prop 操作：

   • Action to go to Shop

   (WayFindingControlsActions.tmtt(poi, poiPlace))
   

   • Action to reset map and Wayfinding)

   (resetMapAndWayFinding(true, true, true, true);)
   

   resetMapAndWayFinding 中有 4 个参数

   1. reset: needed to activate the resetMapAndWayFinding itself
   2. resetMap: needed if you want to resetMap
   3. resetMapOption: option to make the resetMap animated or not
   4. resetWayfinding: needed if you want to clear label and wayfinding path

   将这些设置为操作在 ma​​pDispatchToProps
   例如：

   const mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({
       tmtt: (poi, poiPlace) => {
           WayFindingControlsActions.tmtt(poi, poiPlace));
       },
       resetMapAndWayFinding: (reset, resetMap, resetMapAnimatedOption, resetWayfinding) => {
       dispatch(WayFindingControlsActions.resetMapAndWayFinding(
           reset,
           resetMap,
           resetMapAnimatedOption, 
           resetWayfinding
           ));
       },
   });
   

4. 在您的地图组件中附加 Wayfinding 组件 例如：

   ```javascript

###Props

    **This WayFinding Required TWO PROPS which are awm and kioskPlace**

    awm is AdsumWebMap

    kioskPlace is 

    ```javascript
        getCurrentFloorFull() {
            return this.awm.defaultFloor;
        }
    ```

    **If you want to take the POI destination or destination floor name u can get it on:**
    set connect and mapStateToProps
    ```javascript
        import { connect } from 'react-redux';
        const mapStateToProps = (state: AppStateType): MappedStatePropsType => ({
            wayFindingControlsState: state.wayFindingControls,
        });
    ```
    then call it on 
    ```javascript
        const { wayFindingControlsState } = this.props;
        {wayFindingControlsState
                && wayFindingControlsState.placeDestination 
                && wayFindingControlsState.placeDestination.name
                && `Your Destination is at 
                ${wayFindingControlsState.placeDestination.name.replace('_', ' ')}`}
    ```
    or get the POI destination
    ```javascript
        const { wayFindingControlsState } = this.props;
        wayFindingControlsState.destination[0]
    ```

# Props Detail

javascript 输入 OwnPropsType = {| //调用该组件需要的props 哇：*， kioskPlace：对象， //可选道具 目的地标签文本：字符串， icLabelText：字符串， |};

静态默认属性 = { destinationLabelText: "你到达了", icLabelText: "头部", } ``` ***你可以编辑句子来使用

Copy component inside your project src folder

Less only

`npx @adactive/adsum-wayfindingcontrols copy --less-only`

Full copy

`npx @adactive/adsum-wayfindingcontrols copy`