update

xufenglei

2018-11-14 c398d5256db186bd280156fa63d62e13a3baa8d1

 src/main/webapp/view/map.jsp

@@ -13,6 +13,7 @@
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/utils.js"></script>
   <script type="text/javascript">
        if(typeof (JSON) == 'undefined'){
           $.getScript("js/json2.js");
@@ -48,7 +49,17 @@
  padding:0;
  list-style:none;
}

a{
    color: #1900c6;
   text-decoration: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 300;
}
a:hover {
   text-decoration: underline;
   color: #e60012;
}
#popup_box {
   top: 75px;
   left: 20px;
@@ -267,14 +278,14 @@
         <div class="charts_btn">
         </div>
      </div>
       <div class="search_box">
       <!-- <div class="search_box">
      <button id="searchBtn" type="button">搜索</button>
      <input id="searchParam"/>
      </div>
     <div id="popup_box">
      </div> -->
     <!-- <div id="popup_box">
         <div id="equ_list" class="listview">
         </div>
     </div>
     </div> -->
     <div id="mapCanvas"></div>
     <div id="mapParams" style="display: none;">
        ${requestScope.mapParams}
@@ -289,15 +300,23 @@
   var moralMap = window.moralMap;
   var params = $.parseJSON($("#mapParams").html());
   moralMap['params'] = params;
    var mapType = getUrlParam("mapType");
    var mapOption = {};
    if(!!mapType && !!eval(mapType)) {
        mapOption["mapType"] = eval(mapType);
    }
    var showZoom = getUrlParam("showZoom");
   //通过地区名称加载地图
   moralMap.mapInit(params["regionName"]);
   moralMap.mapInit(params["regionName"],mapOption,showZoom);
   //列表对象
     var listView  =moralMap.initListView({id: "#equ_list",pageSize:12});
     window["listView"] = listView;
   //展示设备列表，click事件触发
   function showEqus(obj) {

      var params = moralMap['params'];
      var mpoint = obj.currentTarget.getOption();
        //$("#searchParam").val(mpoint['name']);
      var url = 'get-devices-by-mid-oid?mpId=' + mpoint['id'] + "&orgId=" + params['orgId'];
      listView.load(url); 
      moralMap.showPopupbox("#popup_box");
@@ -338,7 +357,12 @@
          var maxBounds = moralMap.getMaxBounds();
          var paramMap = {};
          paramMap["orgId"]=  params['orgId'];
          $.extend(paramMap,maxBounds);
          // 为了适配旧接口
            paramMap["Fe"]=  maxBounds.northeastLat;//东北角纬度，大一点
            paramMap["Ge"]=  maxBounds.northeastLng;//东北角经度，大一点
            paramMap["Ke"]=  maxBounds.southwestLat;//西北角纬度坐标，小一点
            paramMap["Le"]=  maxBounds.southwestLng;//西北角经度坐标，小一点
          // $.extend(paramMap,maxBounds);
         loadLazy(url,paramMap,callback);
       }
   }
@@ -361,17 +385,21 @@
                                           return;
                                       }
                                  var equ = {
                               methodName : 'showDeviceMonitor',
                              name: _obj['name'],
                              mac: (_obj['mac']).toLowerCase(),
                              longitude: _obj['longitude'],
                              latitude: _obj['latitude'],
                                        monitorPointId: _obj['monitorPointId'],
                               version:_obj['deviceVersion']['version']
                           }
                           var equStr = JSON.stringify(equ);
                           if(window["console"]!=undefined){
                              console.log(equStr);
                           }
                            if(window['external']&&window['external']['showMonitorInfo']){
                                 if(!!window['external']&&!!window['external']['callWin']){
                                        window['external'].callWin(equStr);
                           }else
                            if(!!window['external']&&!!window['external']['showMonitorInfo']){
                                window['external'].showMonitorInfo(equStr);
                             }else{
                                alert(equStr);
@@ -402,57 +430,134 @@
            var bounds = moralMap.getBounds();
           paramMap["areaCode"]=  params['areaCode'];
           paramMap["orgId"]=  params['orgId'];
           paramMap["Fe"]=  bounds['Fe'];//东北角纬度，大一点
           paramMap["Ge"]=  bounds['Ge'];//东北角经度，大一点
           paramMap["Ke"]=  bounds['Ke'];//西北角纬度坐标，小一点
           paramMap["Le"]=  bounds['Le'];//西北角经度坐标，小一点
           // 为了适配旧接口
           paramMap["Fe"]=  bounds.northeastLat;//东北角纬度，大一点
           paramMap["Ge"]=  bounds.northeastLng;//东北角经度，大一点
           paramMap["Ke"]=  bounds.southwestLat;//西北角纬度坐标，小一点
           paramMap["Le"]=  bounds.southwestLng;//西北角经度坐标，小一点
            loadLazy("getMonitorpointList",paramMap,addOverMpoints);
            startRefreshPage();
            showGrid();
   });
   //地图加载完成后 加载监控点,速度慢
   moralMap.addEventListener("tilesloaded", function(type, target) {
        showGrid();
   });

    //map为地图对象
    // TODO 临时
    function getBounds() {
        var bs = moralMap.getBounds();  //获取当前地图范围的经纬度
        // var bssw = bs.getSouthWest();      //获取西南角的经纬度(左下端点)
        // var bsne = bs.getNorthEast();      //获取东北角的经纬度(右上端点)
      if(!getBounds.topLeftAnchor){
            getBounds.topLeftAnchor = {};
            getBounds.topLeftAnchor.x0 =  bs.southwestLng;
            getBounds.topLeftAnchor.y0 =  bs.northeastLat;
      }
        return { 'x1': bs.southwestLng, 'y1': bs.southwestLat, 'x2': bs.northeastLng, 'y2': bs.northeastLat };
    }
    /**
     * 显示网格
     */
    // TODO 临时
    function showGrid(){
        var isShowGrid = getUrlParam("isShowGrid");
        if(!!isShowGrid){
            $(".tools_box").hide();
      }
        // if(!isShowGrid||moralMap.getZoom()<14){
        if(!isShowGrid||moralMap.getZoom()<14){
           return;
      }
        var XY = getBounds();
        var polygons = [];
        console.log(XY);
        var X1 = XY.x1;
        var Y2 = XY.y2;
        var X0 = getBounds.topLeftAnchor.x0;
        var Y0 = getBounds.topLeftAnchor.y0;
        var width = 0.0063;
        var height = 0.0048;
        // var multiple = 1000000;
        if(!!getBounds.topLeftAnchor) {
            X1=X0 + Math.ceil((X1-X0)/width-1)*width;
            Y2=Y0 + Math.ceil((Y2-Y0)/height)*height;
      }
        for (var i = X1; i < XY.x2; i = i + width) {
            for (var j = Y2; j > XY.y1; j = j - height) {
                //此类表示绘制一个多边形覆盖物（注意:一定要下面的Point列表为多变形的顶点,描线顺序为从上到下,从左到右，顺序乱了,绘制出来的多边形也会乱，如图二所示，图二是将顶点的顺序给错了（网格左上端点,网格左下端点，网格右上端点，网格右下端点））
                var polygon = new BMap.Polygon([
                    new BMap.Point(i, j),    //网格左上端点
                    new BMap.Point(i, j-height),  //网格左下端点
                    new BMap.Point(i+width, j-height),    //网格右下端点
                    new BMap.Point(i+width, j)         //网格右上端点
                ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillOpacity:0.1});
                // polygon .addEventListener("click",function clickFunction(){
                //     alert("你居然敢点我");
                // });
                // moralMap.addOverlay(polygon);
                polygons.push(polygon);
            }
        }
        moralMap.addOverlays(polygons);
        if(!!showGrid.polygons){
            moralMap.removeOverlays(showGrid.polygons);
      }
        showGrid.polygons = polygons;
    }
   // 点击事件关闭 弹窗列表
    moralMap.addEventListener("click", function(type, target) {
        moralMap.closePopupbox("#popup_box");
        //moralMap.closePopupbox("#popup_box");
    });
   //地图放大缩小事件时，关闭弹窗
   moralMap.addEventListener('zoomstart', function(type) {});
   //地图放大缩小事件时，关闭弹窗
   moralMap.addEventListener('zoomend', function(type) {
        var endZoom = this.getZoom();
        if(endZoom>=moralMap.getZooMConfine()){//超过界限加载设备
        if(endZoom>=moralMap.getZoomConfine()){//超过界限加载设备
              loadOverlays("get-devices",addOverEquipments);
        }else{
            loadOverlays("get-monitorpoints",addOverMpoints);
        }
        moralMap.closePopupbox("#popup_box");
        //moralMap.closePopupbox("#popup_box");
   });
   moralMap.addEventListener('moveend', function(type) {
        var endZoom = this.getZoom();
        if(endZoom>=moralMap.getZooMConfine()){//超过界限加载设备
        if(endZoom>=moralMap.getZoomConfine()){//超过界限加载设备
              loadOverlays("get-devices",addOverEquipments);
        }else{
            loadOverlays("get-monitorpoints",addOverMpoints);
        }
        moralMap.closePopupbox("#popup_box");
        //moralMap.closePopupbox("#popup_box");
   });
   //搜索框单击事件
   $("#searchBtn").click(
      function(e) {
         var param = encodeURI($("#searchParam").val());
         moralMap.showPopupbox("#popup_box");
         //moralMap.showPopupbox("#popup_box");
         var url = 'get-devices-for-popup?name=' + param + "&orgId=" + params['orgId'];
         listView.load(url); 
      }
   )
   );
   $("#searchParam").keydown(function (event) {
        if(event.keyCode ==13) {
            $("#searchBtn").trigger("click");
        }
    })
   //跳转表单页面按钮事件
   $(".charts_btn").click(
       function (e) {
            if(window['external']&&window['external']['showChartInfo']){
            var obj = {};
            obj['methodName'] = 'showChart';
            var objStr = JSON.stringify(obj);
            if(!!window['external']&&!!window['external']['callWin']){
                window['external'].callWin(objStr);
            }else
            if(!!window['external']&&!!window['external']['showChartInfo']){
                window['external'].showChartInfo("");
            }else{
                alert("");
                alert(objStr);
            }
        }
   );
@@ -477,12 +582,12 @@
   //刷新页面
   function refreshAllState() {
      var parma={};
      if(moralMap.isPopupBoxShow("#popup_box")) {
      /* if(moralMap.isPopupBoxShow("#popup_box")) {
         var popupEquMacs = moralMap.getPopupEquMacs();
         if(popupEquMacs!=null&&popupEquMacs.length>0){
            parma["popupEquMacs"] = popupEquMacs;
         }
      }
      } */
      //从缓存取
       var oldMarkerList = moralMap.getHorizonMarkers(true);
       var markerKeys = [];
@@ -498,49 +603,56 @@
       parma["markerKeys"] = markerKeys;
        parma["areaCode"] = moralMap['params']["areaCode"];
        parma["orgId"] = moralMap['params']["orgId"];
        $.ajax({
         type: "post",
         url: "get-real-state-data",
         data:JSON.stringify(parma),
         dataType:"json",
         contentType:"application/json;charset=utf-8",
         cache: false,
         async: true,
         success: function(data) {
            if(data!=null&&typeof data === 'object') {
                var resultMap = data["extData"];
                if(resultMap==null){
                   return;
                }
                  var markers = resultMap["markers"];
                  var layer = resultMap["layer"];
                  if(markers!=null&&markers.length>0){
                         if(layer=="monitorpoints"){
                             for(var a_i in markers){
                                var marker = markers[a_i];
                                var marker_id = marker["id"];
                                var mpoint = moralMap.getMpoint(marker_id);
                                if(mpoint!=null){
                                   mpoint.refreshState(marker["state"]);
                                }
        if((!!parma["popupEquMacs"]&&!!parma["popupEquMacs"].length)
         ||(!!parma["markerKeys"]&&!!parma["markerKeys"].length)){
            $.ajax({
                type: "post",
                url: "get-real-state-data",
                data:JSON.stringify(parma),
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                cache: false,
                async: true,
                success: function(data) {
                    if(data!=null&&typeof data === 'object') {
                        var resultMap = data["extData"];
                        if(resultMap==null){
                            return;
                        }
                        var markers = resultMap["markers"];
                        var layer = resultMap["layer"];
                        if(markers!=null&&markers.length>0){
                            if(layer=="monitorpoints"){
                                for(var a_i in markers){
                                    var marker = markers[a_i];
                                    var marker_id = marker["id"];
                                    var mpoint = moralMap.getMpoint(marker_id);
                                    if(mpoint!=null){
                                        mpoint.refreshState(marker["state"]);
                                    }
//                           mpoint.refreshState(4);
                             }
                         }else{
                               for(var b_i in markers){
                                var marker = markers[b_i];
                                var marker_mac = marker["mac"];
                                var equipment = moralMap.getEquipment(marker_mac);
                                if(equipment!=null){
                                   equipment.refreshState(marker);
                                }
                               }
                         }
                  }
                  if(resultMap["popupEquStates"]!=null){
                     listView.refreshState(resultMap["popupEquStates"]);
                  }
            }
         }
      });
                                }
                            }else{
                                for(var b_i in markers){
                                    var marker = markers[b_i];
                                    var marker_mac = marker["mac"];
                                    var equipment = moralMap.getEquipment(marker_mac);
                                    if(equipment!=null){
                                        equipment.refreshState(marker);
                                    }
                                }
                            }
                        }
                        if(resultMap["popupEquStates"]!=null){
                            listView.refreshState(resultMap["popupEquStates"]);
                        }
                    }
                }
            });
      }
   }
	
   function callJS(jsonData){
      moralMap.callJS(jsonData);
   }
</script>