高德地圖上展現終端信息

本人蔘與的一個智慧園區的項目，網絡地圖開發出來的後期效果以下圖所示：

初次拿到設計圖時尚未左上角的全局搜索框，第一步首先是繪製出浮在上層的四張卡片，我是用遍歷的方式依次渲染的：

{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種：

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方法繪製出該區域在地圖上的位置。

高德地圖上展現的信息主要是這些，其中的狀態判斷等這裏就不一一詳述了，接下來開始本地地圖部分：

![圖片上傳中...]