wafer-map-youbang v4.0.51

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是这张地图的唯一标识.

参数

onClickError返回的错误编码

方法

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} /> <text dy="23" dominantBaseline="text-before-edge" fill="white" textAnchor="middle"

      >
        {tooltipObj.orgName}
      </text>
    </g>
)

}

发布

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