wafer-map

English | 简体中文

wafer-map

SVG Map for react

Using

• install

npm i wafer-map yarn add wafer-map

• using in react

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

notice: mapId is the only mark on the map.

Props

Prop	default value	is required	description
mapId		true	map id
componentWidth	1920	false	Map the width of containers
componentHeight	1080	false	Map the height of containers
background	#ddd	false	Map container background color
visibleElement	[]	false	Displayable collection of element ids
visibleType	[]	false	Displayable collection of element types
visibleState	[]	false	Displayable collection of element states
clickableElement	[]	false	Clickable collection of element ids
clickableType	[]	false	Clickable collection of element types
clickableState	[]	false	Clickable collection of element states
onClick		false	Radio callback method
onSelect		false	Multi-select callback method
onClickError		false	Select the callback method for the exception
mapZoom	true	false	Scale the map
mapMove	true	false	Move the map
multiple	false	false	Multiple switch
noName	false	false	Element names are not displayed on the map.
showPath	false	false	Display roadmap
markId		false	The element id that needs to be tagged, such as '1'; If multiple, use string array format, such as ['1', '2']
showStateIds	[]	false	Display different states of different elements, data structure：[{id: 1, state: 'XX', color: '#fff', text: ''}, {}]
reloadMap		false	Reload the map
reloadFinish		false	Reload the map to complete the callback
touchable		false	Touch control
deleteId		false	Delete selected element id
deleteFinish		false	Callback after deleting selected element
tooltipContent		false	Display tooltip
elementsColor	[]	false	Set color according to element id, data structure：[{id: 1, color: '#fff'}, {}]
pathStartSvg		false	Guide start icon, this icon contains only elements inside svg, without svg tags
pathEndSvg		false	Guide end icon, this icon contains only elements inside svg, without svg tags
pathStyle		false	Guide leader style, style setting reference svg element attributes
markSvg		false	Search anchor or mark icon, this icon contains only elements inside svg, without svg tags
selectedSvg		false	Check icon, this icon contains only elements inside svg, without svg tags
defaultTooltipKey		''	You can customize the default key in the bubble, such as orgName
getSvgDom		''	Get viewerdom of SVG callback method
signatureKey	null	false	Signature key
restfulSignature	false	false	Controls whether to sign or not, when set to true, the signature key must be set to a valid value
textColor	#fff	false	elements text color
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
isGenders	false	false	Display male and female outsourcing type avatars before the name of the material
centerEleRate	1	false	Set the center material magnification
centerElement	{}	false	Set the central material
clickToCenter	{}	false	If set true when you click element will set it to center and zoom bigger.
windowsTouchSupport	false	false	Whether Windows touch screen is supported.

onClickError Error Code

code	description
100	Selected elements that cannot be displayed
101	Selected elements that the ID cannot be selected
102	Selected elements that the types cannot be selected
103	Selected elements that the states cannot be selected
104	Multi-select mode cannot select different types at the same time

function

name	props	return	description
reloadElements			Reload the elements on the map
clearSelectElement			Clears the selected set of elements

tooltipContent example of use

tipObj is the object returned by this method

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

tooltipObj对象需要从 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,
          },
        });
      }
    }