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是这张地图的唯一标识.
参数
参数 | 默认值 | 是否必须 | 说明 |
---|---|---|---|
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
}
/>
<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,
},
});
}
}
5 months ago