English | 简体中文

wafer-map

基于React的SVG地图组件

安装和使用

• 安装

npm i wafer-map yarn add wafer-map

• 使用

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 ( <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} /> {tooltipObj.orgName} ) }

发布

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,
          },
        });
      }
    }