[English](./README.md) | 简体中文 

# wafer-map
基于React的SVG地图组件

<!--[![npm](https://img.shields.io/npm/v/react-fmap.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/react-fmap)
[![NPM downloads](http://img.shields.io/npm/dm/react-fmap.svg?style=flat-plastic)](https://npmjs.org/package/react-fmap)-->

## 安装和使用

  * 安装

  `npm i wafer-map`
  `yarn add wafer-map`

   * 使用

   ```js
   import React, { Component } from 'react';
   import WaferMap from 'wafer-map';

   class App extends Component {
        render() {
            const mapProps = {
                mapId: '1',
                componentWidth: 1920,
                componentHeight: 1080
            };
    
            return (
                <div className="App">
                    <WaferMap {...mapProps}/>
                </div>
            );
        }
   }
   ```

   > 提示: mapId是这张地图的唯一标识.

## 参数

|  参数  | 默认值     |  是否必须  |  说明  |
|--------|---------|---------------|---------------|
| mapId |         | true | 地图id |
| componentWidth | `1920`  | false | 地图容器的宽度 |
| componentHeight | `1080`  | false | 地图容器的高度 |
| background | `#ddd`  | false | 地图容器的背景色 |
| visibleElement | `[]`    | false | 可显示的元素id集合 |
| visibleType | `[]`    | false | 可显示的元素类型集合 |
| visibleState | `[]`    | false | 可显示的元素状态集合 |
| clickableElement | `[]`    |false| 可点击的元素id集合 |
| clickableType | `[]`    | false | 可点击的元素类型集合 |
| clickableState | `[]`    | false | 可点击的元素状态集合 |
| onClick |         | false | 单选回调方法 |
| onSelect |         | false | 多选回调方法 |
| onClickError |         | false | 不可点击事件回调方法 |
| mapZoom | `true`  | false | 地图是否可以缩放 |
| mapMove | `true`  | false | 地图是否可以移动 |
| multiple | `false` | false | 是否可以多选 |
| noName | `false` | false | 不显示元素上名称 |
| showPath | `false` | false | 是否显示导引线 |
| markId |         | false | 被查询或标记的元素id,如： '1'; 如果是多个，可使用字符串数组格式,如 ['1', '2'] |
| showStateIds | []      | false | 显示不同元素的不同状态，数据结构：[{id: 1, state: 'XX', color: '#fff', text: ''}, {}] |
| reloadMap |         | false | 重新加载地图 |
| reloadFinish |         | false | 地图加载完成回调 |
| touchable |         | false | 可触摸控制 |
| deleteId |         | false | 删除已选的元素id |
| deleteFinish |         | false | 删除已选元素后的回调 |
| tooltipContent |         | false | 鼠标悬浮在素材上的小气泡内容和样式 |
| elementsColor | []      | false | 按照元素id设置颜色,数据结构：[{id: 1, color: '#fff'}, {}] |
| pathStartSvg |         | false | 导引线开始图标, 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
| pathEndSvg |         | false | 导引线结束图标, 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
| pathStyle  |         | false | 导引线引线样式, 样式设置参考 svg 元素属性 |
| markSvg |         | false | 搜索定位或标记图标， 此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
| selectedSvg |         | false | 选中图标，此图标仅包含 svg 内部的元素, 不包含 svg 标签; |
| defaultTooltipKey |         | '' |  气泡里面 可以自定义默认显示取的key，如orgName |
| getSvgDom |         | false |  获取svg的ViewerDOM回调方法 |
| signatureKey | null    | false | 签名的key |
| restfulSignature | false   | false | 控制是否签名，当设置为true时，签名key必须设置有效值 |
| textColor | #fff    | false | 元素显示文字颜色 |
|scaleFactorMax| 5       |false	|maximum amount of scale a user can zoom in to
|scaleFactorMin	| 0.5     |false |	minimum amount of scale a user can zoom out of
|centerEleRate| 1       |false	| 设置中心素材放大倍数
|centerElement	| {}      |false | 设置中心素材
|clickToCenter| {}      |false | 点击素材剧中放大
|clickToCenter| false   |false | 是否支持 windows 触摸屏



### onClickError返回的错误编码

|  编码  |  说明  |
|--------|----------------|
| `100`  | 不显示的元素不能被选中 |
| `101`  | 元素的id不能被选中 |
| `102`  | 元素的类型不能被选中 |
| `103`  | 元素的状态不能被选中 |
| `104`  | 多选时选中不同类型的元素 |

### 方法

|  方法名  |  参数  |  返回  |  说明  |
|--------|---------|----------|---------------|
| reloadElements |   |   | 更新地图上的元素 |
| clearSelectElement |   |   | 清空已选的元素集合 |


### tooltipContent 的使用样例 tooltipObj 为此方法返回的对象   tooltipContent为null 气泡里的内容为默认defaultTooltipKey属性值，如果defaultTooltipKey属性值为空或者属性不存在，则气泡不显示
 tooltipContent = (tooltipObj)=>{
    const radius = 5;
    const width = 150;
    const height = 45;
    return (
        <g>
          <path
              fill="black"
              fillOpacity="0.7"
              d={`M0 0 l10 10 h ${width / 2 - 10 - radius}
          a ${radius} ${radius} 90 0 1 ${radius} ${radius} v ${height}
          a ${radius} ${radius} 90 0 1 ${-radius} ${radius} h ${2 * radius - width}
          a ${radius} ${radius} 90 0 1 ${-radius} ${-radius} v ${-height}
          a ${radius} ${radius} 90 0 1 ${radius} ${-radius} h ${width / 2 - 10 - radius} Z`}
          />
          <text
              dy="23"
              dominantBaseline="text-before-edge"
              fill="white"
              textAnchor="middle"
          >
            {tooltipObj.orgName}
          </text>
        </g>
    )
  } 
  
  
### 发布

```shell script
yarn build
yarn publish
```

### tooltipContent 的使用样例 

tipObj为此方法返回的对象

```
 tooltipContent = (tooltipObj)=>{
    const radius = 5;
    const width = 150;
    const height = 45;
    return (
        <g>
          <path
              fill="black"
              fillOpacity="0.7"
              d={`M0 0 l10 10 h ${width / 2 - 10 - radius}
          a ${radius} ${radius} 90 0 1 ${radius} ${radius} v ${height}
          a ${radius} ${radius} 90 0 1 ${-radius} ${radius} h ${2 * radius - width}
          a ${radius} ${radius} 90 0 1 ${-radius} ${-radius} v ${-height}
          a ${radius} ${radius} 90 0 1 ${radius} ${-radius} h ${width / 2 - 10 - radius} Z`}
          />
          <text
              dy="23"
              dominantBaseline="text-before-edge"
              fill="white"
              textAnchor="middle"
          >
            {tipObj.orgName}
          </text>
        </g>
    )
  }
  ```
  
  tipObj对象需要从 getMapStationList这个方法里获取数据存入contentObj对象，获取完整的对象
  
```
 *getMapStationList({ payload }, { call, put, select }) {
      const { locationId } = yield select(state => state.swsCommon);
      const param = payload || { locationId };
      const { info } = yield select(state => state.login);
      if (info && info.tenant_id) {
        param.domainId = info.tenant_id;
      }
      const result = yield call(service.getMapStationList, { payload: param });
      if (result && result.code === 0) {
        const onMapList = [];
        const visibleList = [];
        result.data.forEach(item => {
          if (item && item.elementId) {
            visibleList.push(item.elementId);
            onMapList.push({
              id: item.elementId,
              state: item.statusCode,
              color: item.statusColor,
              text: item.userNames || item.stationNum,
              contentObj: item
            });
          }
        });

        yield put({
          type: 'saveOrUpdateData',
          payload: {
            mapStationList: result.data,
            stationsOnMap: onMapList,
            visibleList,
          },
        });
      }
    }   
```