本人参与的一个智慧园区的项目，网络地图开发出来的后期效果如下图所示：
初次拿到设计图时还没有左上角的全局搜索框，第一步首先是绘制出浮在上层的四张卡片，我是用遍历的方式依次渲染的：
{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方法绘制出该区域在地图上的位置。
高德地图上展示的信息主要是这些，其中的状态判断等这里就不一一详述了，接下来开始本地地图部分：
![图片上传中…]
