物联网-智慧园区实时监控部分总结

2019-02-13 admin

本人参与的一个智慧园区的项目,网络地图开发出来的后期效果如下图所示: clipboard.png 初次拿到设计图时还没有左上角的全局搜索框,第一步首先是绘制出浮在上层的四张卡片,我是用遍历的方式依次渲染的:

        {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}
            />
          );
        })}

clipboard.png

第三张卡片涉及到滚动加载,和后期增加的点击搜索功能,所以增加了getSearchKey的方法,其中滚动加载使用的是react-infinite-scroller,结合antd的TimeLine: clipboard.png

 <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. 单个终端展示

clipboard.png

分为在线(正常,告警)、离线,通过不同的图标来区分,点击图标获取对应的终端信息。
①.获取所有终端所在的位置经纬度,状态,坐标类型等信息,通过坐标类型,把其他类型的经纬度与转换成高德地图类型
②.遍历每一个终端经纬度,通过高德地图的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.两个以上的终端,位置相邻时候自动聚合的展示

clipboard.png

聚合的图标中含有总聚合终端的总数,分为蓝色(正常,离线),橙色(有告警),点击展示当前聚合终端的离线数量和告警数量。
声明聚合信息展示弹窗:

    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.绑定区域的终端展示 clipboard.png

绑定区域的终端,在网络地图上展示该区域的终端汇总信息,如果要查看终端的具体信息,需要点击进入当前地图。

①.获取所有区域的位置信息,并且转换经纬度为高德的
②.根据获取到的园区中心点,将此区域的终端总数展示在marker里,放置在中心点上;marker的点击展示弹窗方式与单个终端一致。
③.①中获取到的位置包含区域的各个点经纬度坐标,转化坐标成高德地图上的点,使用new AMap.Polygon方法绘制出该区域在地图上的位置。

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

![图片上传中…]

[转载]原文链接:https://segmentfault.com/a/1190000018141872

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53686.html

文章标题:物联网-智慧园区实时监控部分总结

相关文章
JAVA四种基本排序方法实例总结
本文实例讲述了JAVA四种基本排序方法。分享给大家供大家参考。具体如下: JAVA四种基本排序,包括冒泡法,插入法,选择法,SHELL排序法.其中选择法是冒泡法的改进,SHELL排序法是 插入法的改进.所以从根本上来说可以归纳为两种不同的排...
2017-03-27
javascript实时获取鼠标坐标值并显示的方法
本文实例讲述了javascript实时获取鼠标坐标值并显示的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHT...
2017-03-23
vue中利用axios实现文件上传进度实时更新
XHR二级增加了progress事件,我们可以据此在浏览器接收新数据期间添加实时数据进度条,从而使得交互更加友好 vue模板 &lt;div class=&quot;progress&quot; @click=&quot;upload&...
2017-12-19
JavaScript获取DOM元素的11种方法总结
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE...
2017-03-22
Sentry异常监控方案部署-前端攻略
原文首发于我的个人博客: https://lonhon.top/ 凡事只要有可能出错,那就一定会出错 对于任何一个项目而言,本地测试肯定做不到100%覆盖,而且,我们也不能保证用户能按照我们的预期进行操作,其实对我而言,用户才是最好的测...
2018-04-20
JavaScript通过setTimeout实时显示当前时间的方法
本文实例讲述了JavaScript通过setTimeout实时显示当前时间的方法。分享给大家供大家参考。具体如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD...
2017-03-22
nodejs爬虫抓取数据乱码问题总结
一、非UTF-8页面处理. 1.背景 windows-1251编码 比如俄语网站:https://vk.com/cciinniikk 可耻地发现是这种编码 所有这里主要说的是 Windows-1251(cp1251)编码与utf-8编码的...
2017-03-26
JavaScript使用slice函数获取数组部分元素的方法
本文实例讲述了JavaScript使用slice函数获取数组部分元素的方法。分享给大家供大家参考。具体如下: JS数组带有一个slice方法,可以获取数组的指定部分,下面的代码获取数组中的第二个和第三个元素 &lt;!DOCTYPE htm...
2017-03-22
IoT实时数据可视化方案(进阶版):Worldmap Panel使用详解及使用Node-RED进行流程管理
Chap.1 万万没想到,我这一世英名葬送在了地图坑里 继上次搭建完框架得到了个粗糙的demo以后,我天真地以为我离真理的距离简直就只有一步之遥了。基本的图形组件试了个遍没什么。   想着我还有些模拟的地理数据没有做可视化,数据信息的内容放...
2018-01-03
javascript中offset、client、scroll的属性总结
HTML元素有几个offset、client、scroll开头的属性,总是让人摸不着头脑。在书中看到记下来,分享给需要的小伙伴。主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offse...
2017-03-29
回到顶部