本人参与的一个智慧园区的项目，网络地图开发出来的后期效果如下图所示：
初次拿到设计图时还没有左上角的全局搜索框，第一步首先是绘制出浮在上层的四张卡片，我是用遍历的方式依次渲染的： {showCards.map((item, index) => { let name = cardInfoName[index]; return ( 
第三张卡片涉及到滚动加载，和后期增加的点击搜索功能，所以增加了getSearchKey的方法，其中滚动加载使用的是react-infinite-scroller，结合antd的TimeLine：
{val.length > 0 ? () : ( {val.map((item, index) => { return ( ); })} this.goSearch(item.devEUI), 500)}> {this.formateDate(item.createTime)} {item.alarmTypeLabel}{item.tmnName}
)}暂无数据
之后，开始高德地图上信息的展示
这里涉及到一个百度地图经纬度和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(` ${obj.count} `); }, }); 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(` 汇总情况 告警终端 : ${alarmNum} 离线终端 : ${offlineNum} `); this.clustererWindow.open(this.map, obj.lnglat); }); }); 3.绑定区域的终端展示
绑定区域的终端，在网络地图上展示该区域的终端汇总信息，如果要查看终端的具体信息，需要点击进入当前地图。 ①.获取所有区域的位置信息，并且转换经纬度为高德的
②.根据获取到的园区中心点，将此区域的终端总数展示在marker里，放置在中心点上；marker的点击展示弹窗方式与单个终端一致。③.①中获取到的位置包含区域的各个点经纬度坐标，转化坐标成高德地图上的点，使用new AMap.Polygon方法绘制出该区域在地图上的位置。高德地图上展示的信息主要是这些，其中的状态判断等这里就不一一详述了，接下来开始本地地图部分：
![图片上传中...]