本人参与的一个智慧园区的项目，网络地图开发出来的后期效果如下图所示：

初次拿到设计图时还没有左上角的全局搜索框，第一步首先是绘制出浮在上层的四张卡片，我是用遍历的方式依次渲染的：

        {showCards.map((item, index) => {let name = cardInfoName[index];return (<CardInfotitle={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 ? (<InfiniteScrollinitialLoad={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种：

1. 单个终端展示

分为在线（正常，告警）、离线，通过不同的图标来区分，点击图标获取对应的终端信息。
①.获取所有终端所在的位置经纬度，状态，坐标类型等信息，通过坐标类型，把其他类型的经纬度与转换成高德地图类型
②.遍历每一个终端经纬度，通过高德地图的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方法绘制出该区域在地图上的位置。

高德地图上展示的信息主要是这些，其中的状态判断等这里就不一一详述了，接下来开始本地地图部分：

![图片上传中...]