地图筛选

hdw

2018-10-30 64bd249eba1dfe7c83f59d6aa6898bdd90aa6310

地图筛选

 gx_tieta/WebRoot/index.jsp

@@ -545,6 +545,10 @@
        $('#map').on('dblclick', '.explain-header', function() {

            return false;

        });

		
        $('.nav-map').on('click', '.explain-list input', function() {

            setMapImgStyles();

        });

    });

    

    //创建指定元素下克隆表格头部

@@ -625,7 +629,7 @@
                centerMapByPoint(map); // 根据当前用户设定的位置显示中心点

                map.enableScrollWheelZoom();

                map.disableDoubleClickZoom();

                //map.setMapStyle({style: 'grayscale'});    //  设置地图的风格

                map.setMapStyle({style: 'grayscale'});    //  设置地图的风格

                // 添加地图类型控件

                map.addControl(new BMap.MapTypeControl());

                // 给地图添加工具条(地图-卫星-三维)和比例尺控件

@@ -1512,7 +1516,8 @@
        

        mapEle.parent().append(iconExplain);

        

		
        // 设置地图图标种类

        setMapImgStyles();

    }

    // 切换地图图标说明

    function changeMapImgDesc(iconExplain, type) {

@@ -1531,7 +1536,7 @@
    function mapImgDescNormal(iconExplain) {

        // 机房落后

        var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');

        var input = $('<input type="checkbox" checked="checked">');

        var input = $('<input type="checkbox" data-img="item-behind" checked="checked">');

        var icon = $('<img src="'+mapImages.behind+'">');

        var span = $('<span>电池组落后机房</span>');

        iconList.append(input);

@@ -1541,7 +1546,7 @@
        

        // 机房告警

        var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');

        var input = $('<input type="checkbox" checked="checked">');

        var input = $('<input type="checkbox" data-img="item-warn" checked="checked">');

        var icon = $('<img src="'+mapImages.warn+'">');

        var span = $('<span>电池组告警机房</span>');

        iconList.append(input);

@@ -1552,7 +1557,7 @@
        

        // 机房延时

        var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');

        var input = $('<input type="checkbox" checked="checked">');

        var input = $('<input type="checkbox" data-img="item-timeout" checked="checked">');

        var icon = $('<img src="'+mapImages.timeout+'">');

        var span = $('<span>电池组放电延时机房</span>');

        iconList.append(input);

@@ -1562,7 +1567,7 @@
        

        // 正常机房

        var iconList = $('<div class="explain-list" style="padding: 4px 6px; border-bottom: 1px slid #ccc; display:block"></div>');

        var input = $('<input type="checkbox" checked="checked">');

        var input = $('<input type="checkbox" data-img="item-normal" checked="checked">');

        var icon = $('<img src="'+mapImages.normal+'">');

        var span = $('<span>正常机房</span>');

        iconList.append(input);

@@ -1656,14 +1661,13 @@
    function createMapDot(map, dotList, isTop) {

        // 清空覆盖物和对应的mk点

        mkList = [];

		
        // 遍历查询内容生成对应的图标

        for(var i = 0; i < dotList.length; i++) {

        for(var i = 0; i<dotList.length; i++) {

            var isShow = checkMapImgStyle(dotList[i].msg);

            var dotIcon = new BMap.Icon(getMapStateImg(mapImages, dotList[i].msg), new BMap.Size(36, 30));    // 设置图片

            var pt = new BMap.Point(dotList[i].lng, dotList[i].lat);

            

            var mk = new BMap.Marker(pt, {icon: dotIcon});    // 定义marker点

			
            // 删除指定的点(该点会在本函数后面重新创建)

            deletePoint(map, dotList[i].title);

            

@@ -1695,14 +1699,16 @@
            

            mkList.push(mk);

            // 向地图添加覆盖物

            map.addOverlay(mk);

            if(isShow) {

                map.addOverlay(mk);

            }

        }

    }

    

    // 删除地图上的指定点

    function deletePoint(map, msg){

        var allOverlay = map.getOverlays();

        for (var i = 0; i < allOverlay.length -1; i++){

        for (var i = 0; i < allOverlay.length; i++){

            try{

                if(allOverlay[i].getLabel().content == msg){

                    map.removeOverlay(allOverlay[i]);

@@ -1715,6 +1721,37 @@
        }

    }

    

    // 获取地图需要显示图标的类型

    var magImgStyles = [];

	
    function setMapImgStyles() {

        var ipts = $('#mapImgDesc .explain-list input');

        magImgStyles = [];

        ipts.each(function(i) {

            var imgStyle = $(this).data('img');

            if($(this).is(':checked')) {

                magImgStyles.push(imgStyle);

            }

        });

		
        magImgStyles.push('');

        // 根据当前内容更新地图图标

        // map.clearOverlays();

        searchStation();

    }

	
    // 检测当前图标是否符合

    function checkMapImgStyle(imgStyle) {

        var isShow = false;

        for(var i=0; i<magImgStyles.length; i++) {

            if(magImgStyles[i] == imgStyle) {

                isShow = true;

                break;

            }

        }

		
        return isShow;

    }

    // 创建告警点

    function createWarnDot(map, warnDotList) {

        for(var i = 0; i < warnDotList.length; i++) {

@@ -2045,6 +2082,16 @@
        // 根据可视范围显示坐标点

        var dots = [];

        var currMarkers = {};

		
        // 初始化

        function init() {

            dots = [];

            currMarkers = {};

        }

        // init函数绑定到GLOBAL.BMap下

        gl.BMap.init = init;

		
		
        // 查询当前范围内容的图标

        function queryInRect(map, callback) {

            var cp = map.getBounds(); // 返回map可视区域，以地理坐标表示  

@@ -2170,16 +2217,15 @@
        pageNum: 0,

        pageNew: true

    };

	
    //查询机房

    function searchStation(setRect){

        var temp = createSearchParam();

        var json = JSON.stringify(temp);

        var bmap = GLOBAL.BMap;        // BMap的命名空间

        var bmap_s = bmap.Search;    // Search的命名空间

        commonDot = new Array();

        warnDotList = new Array();

        dischargeDotList = [];

        behindCellList = [];

        var init = bmap.init;

        //init();

        // 查询后台

        $.ajax({     

            type: "post",                 

            //url: "BattMap_informationAction!searchAll",                

@@ -2198,21 +2244,22 @@
                    // 设置分页信息

                    mapPages.pageAll = list.length;

                    setMapPages();

					
                    //console.log(123);

                    // 遍历查询结果

                    for(var i=0;i<list.length;i++){

                        var _list = list[i];

                        allStation.push(formatAllStation(_list));

                    }

					
                    // 显示区域的图标

                    bmap.setDots(allStation);

                    bmap.queryInRect(map, createMapDot);

                    updateStation();

					
                    // 是否第一次执行

                    if(setRect) {

                        map.addEventListener("moveend", bmap.queryInRect.bind({},map, createMapDot));  // 拖动

                        map.addEventListener("zoomend", bmap.queryInRect.bind({},map, createMapDot)); // 缩放

                        updateStation();

						
                    }

                }

            }                 

@@ -2265,9 +2312,7 @@
                    }

                }

                

                //console.log(updateStationData);

                createMapDot(map, updateStationData, true);

	        	
                // 更新分页信息

                mapPages.pageCurr++;

                if(mapPages.pageCurr>mapPages.pageNum || updateStationData.length<mapPages.pageSize) {

@@ -2276,6 +2321,7 @@
                }

                

                setTimeout(updateStation, 4000);

	        	
            }

        });

    }

@@ -2296,6 +2342,19 @@
        return obj;

    }

    

    // 根据allStation的值去更新内容

    function updateMapByAllStation() {

        var bmap = GLOBAL.BMap;        // BMap的命名空间

        var init = bmap.init; // 初始化内容

		
        // 初始化地图内容

        init();

		
        // 显示区域的图标

        bmap.setDots(allStation);

        bmap.queryInRect(map, createMapDot);

    }

	
    // 查询机房面板信息

    function searchPanelInfo(data) {

        var point = data.point;