@adactiveasia/adasia-wayfindingcontrols 中文文档教程

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]
    ```

    **This WayFinding Have FOUR OPTIONAL PROPS**
    1. destinationLabelText, it is Destination Label Text, the default was "You Reached (Shop)"
    2. icLabelText, it is InterChange Label Text, the default was "Head Down/Up (Floor)"
    3. arrivalLabelStyle, it is Destination Label Styling and Offset, the structure should be the same as the default which can see below (props Detail)
    4. interchangeLabelStyle, it is Interchange Label Styling and Offset, the structure should be the same as the default which can see below (props Detail)

# Props Detail

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

静态默认属性 = { destinationLabelText: "你到达了", icLabelText: "头部", arrivalLabelStyle: { 抵消： { ×：0， 是：0， z: 15, }, 风格： { 背景颜色：'#00437a', 背景不透明度：0.9， 背景半径：3， 颜色：'#ffffff'， 尺寸：4， }, }, 互换标签样式：{ 抵消： { ×：0， 是：0， z: 15, }, 风格： { 背景颜色：'#00437a', 背景不透明度：0.9， 背景半径：3， 颜色：'#ffffff'， 尺寸：4， }, }, } ``` ***你可以编辑句子来使用

Copy component inside your project src folder

Less only

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

Full copy

`npx @adactive/adsum-wayfindingcontrols copy`