本人参与的一个智慧园区的项目,网络地图开发出来的后期效果如下图所示:
初次拿到设计图时还没有左上角的全局搜索框,第一步首先是绘制出浮在上层的四张卡片,我是用遍历的方式依次渲染的:
{showCards.map((item, index) => {
let name = cardInfoName[index];
return (
<CardInfo
title={item}
id={index}
key={index}
isLoad={isLoad}
isLoadAlarmList={this.isLoadAlarmList}
cardInfo={cardInfo[name]}
cardLoading={cardLoading[index]}
getSearchKey={this.getSearchKey}
appid={appId}
/>
);
})}
第三张卡片涉及到滚动加载,和后期增加的点击搜索功能,所以增加了getSearchKey的方法,其中滚动加载使用的是react-infinite-scroller,结合antd的TimeLine:
<div className="timeline">
{val.length > 0 ? (
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={this.handleInfiniteOnLoad}
useWindow={false}
hasMore={this.state.hasMore}
>
<Timeline>
{val.map((item, index) => {
return (
<Timeline.Item key={index}>
<div onClick={debounce(() => this.goSearch(item.devEUI), 500)}>
<span>{this.formateDate(item.createTime)}</span>
<span className="alarmType">
<i className="iconfont icon-yichang" />
{item.alarmTypeLabel}
</span>
<p>{item.tmnName}</p>
</div>
</Timeline.Item>
);
})}
</Timeline>
</InfiniteScroll>
) : (
<div className="text-center">
<i className="iconfont icon-zanwushuju image-icon" />
<p>暂无数据</p>
</div>
)}
</div>
之后,开始高德地图上信息的展示
这里涉及到一个百度地图经纬度和gps转高德的一个算法,使用的是coordtransform:
transferLngLats = (bd_lng: number, bd_lat: number, type = 'gcj-02') => {
if ('WGS84' === type.toUpperCase()) {
return coordtransform.wgs84togcj02(bd_lng, bd_lat);
} else if ('BD-09' === type.toUpperCase()) {
return coordtransform.bd09togcj02(bd_lng, bd_lat);
}
return [bd_lng, bd_lat];
};
高德地图上的终端展示方式一共分为3种:
- 单个终端展示
分为在线(正常,告警)、离线,通过不同的图标来区分,点击图标获取对应的终端信息。
①.获取所有终端所在的位置经纬度,状态,坐标类型等信息,通过坐标类型,把其他类型的经纬度与转换成高德地图类型
②.遍历每一个终端经纬度,通过高德地图的new AMap.LngLat方法将经纬度结合成一个point,并且通过终端状态,区分将展示的图标的颜色、同时增加type属性
③.通过new AMap.Icon,把选择好的图标配置好相关尺寸、偏移量等,再使用new AMap.Marker(使用extData属性增加status类型,用来存放type)和之前生成的point,将图标用map.add放置在地图上
④.增加marker的click事件,点击的时候首先展示loading弹窗,接着用之前生成的point的经纬度和获取到的所有终端位置比对,相等的时候获取到终端Id
⑤.根据上述Id调接口获取此终端的详细信息,将信息传递给TerInfo组件(提前声明this.terInfoRef = React.createRef()和this.terInfoWindow,并且给TerInfo组件加上ref={this.terInfoRef}属性),把此组件放到信息窗中,并且代替之前的loading弹窗,展示终端的详细信息
把此组件放到信息窗中:this.terInfoWindow.setContent(ReactDOM.findDOMNode(this.terInfoRef.current));
其中声明terInfoWindow:
this.terInfoWindow = new AMap.InfoWindow({
isCustom: true,
closeWhenClickMap: true,
offset: new AMap.Pixel(130, 248), //left top
});
2.两个以上的终端,位置相邻时候自动聚合的展示
聚合的图标中含有总聚合终端的总数,分为蓝色(正常,离线),橙色(有告警),点击展示当前聚合终端的离线数量和告警数量。
声明聚合信息展示弹窗:
this.clustererWindow = new AMap.InfoWindow({
isCustom: true,
closeWhenClickMap: true,
offset: new AMap.Pixel(136, 65),
});
在单个终端展示的时候,增加了type类型, 【③.通过new AMap.Icon,把选择好的图标配置好相关尺寸、偏移量等,再使用new AMap.Marker(使用extData属性增加status类型)和之前生成的point,将图标用map.add放置在地图上】,之后通过 this.markerClusterer.addMarker(marker),将marker放到聚合中。
然后根据之前增加的status,通过mark.getExtData().status来获取终端type类型,统计告警终端数和离线终端数(一个终端可以同时属于告警状态和离线状态)
AMap.plugin(['AMap.MarkerClusterer'], () => {
this.markerClusterer = new AMap.MarkerClusterer(this.map, [], {
gridSize: 20,
minClusterSize: 2,
zoomOnClick: false,
renderCluserMarker: obj => {
const type = !!obj.markers.filter(
mark => mark.getExtData().status === 2 || mark.getExtData().status === 3
).length;
const className = `clusterer ${type ? 'alarmBg' : 'normalBg'}`;
obj.marker.setContent(`<div class="${className}">${obj.count}</div>`);
},
});
this.markerClusterer.on('click', obj => {
const totalNum = obj.markers.length;
let alarmNum = 0;
let offlineNum = 0;
obj.markers.forEach(item => {
const status = item.getExtData().status;
if (status === 3) {
alarmNum++;
offlineNum++;
}
if (status === 2) {
alarmNum++;
}
if (status === 0) {
offlineNum++;
}
});
this.clustererWindow.setContent(`<div class="mapInfo clustererInfo">
<div class="info_title">汇总情况</div>
<div class="li">告警终端 : ${alarmNum}</div>
<div class="li">离线终端 : ${offlineNum}</div>
</div>`);
this.clustererWindow.open(this.map, obj.lnglat);
});
});
3.绑定区域的终端展示
绑定区域的终端,在网络地图上展示该区域的终端汇总信息,如果要查看终端的具体信息,需要点击进入当前地图。
①.获取所有区域的位置信息,并且转换经纬度为高德的
②.根据获取到的园区中心点,将此区域的终端总数展示在marker里,放置在中心点上;marker的点击展示弹窗方式与单个终端一致。
③.①中获取到的位置包含区域的各个点经纬度坐标,转化坐标成高德地图上的点,使用new AMap.Polygon方法绘制出该区域在地图上的位置。
高德地图上展示的信息主要是这些,其中的状态判断等这里就不一一详述了,接下来开始本地地图部分:
![图片上传中...]