NBDXSY/LeaRun.Application/LeaRun.Application.Web/Areas/PipeNetworkManage/Content/pipe-map.js

"use strict"
var keyValue = request('keyValue');

var eOverlays = [];//覆盖物
var showPolygon = [];
var map;
var drawingManager;
var thisPipeLineId;//当前绘制管线ID
var editOverlays;//编辑状态的 地图覆盖物

// 新建管网区域
function addPipeArea() {
    dialogOpen({
        id: "Form",
        title: '新建管网区域',
        url: '/PipeNetworkManage/PipeMap/PiPeMapForm?keyValue=',
        width: "750px",
        height: "500px",
        callBack: function (iframeId) {
            top.frames[iframeId].AcceptClick();            
        }
    });
}


//初始化管网区域信息
function InitialPipeArea() {
    var areaDate;
    $.ajax({
        type: "Get",
        async: false,
        url: "/PipeNetworkManage/PipeMap/GetPipeAreaList",
        success: function (data) {
            areaDate = data;
        },
        error: function (xhr, status, error) {

        }
    });
    $("#pipeAreaList").html(areaDate);
    //加载所有管线
    loadAllPipeLine();

    //页面文字信息初始化
    InitialPageText();
}

//页面文字信息初始化
function InitialPageText() {
    var areaNum = $(".areaItem").length;
    var linNum = eOverlays.length;
    $("#areaNum").text("管网数量:" + areaNum);
    $("#lineNum").text("管线总数:" + linNum);

}

function loadAllPipeLine() {
    //加载所有管线
    var lineCoordinates;
    $.ajax({
        type: "Get",
        async: false,
        dataType: "json",
        url: "/PipeNetworkManage/PipeMap/GetAllPipeLine",
        success: function (data) {
            lineCoordinates = data;
        },
        error: function (xhr, status, error) {

        }
    });
    drawPloyLine(lineCoordinates);
}


//管网线 显示
function showPipeLine(areaId) {
    $("#west_pipeArea").fadeOut("slow");
    $("#west_pipeLine").fadeIn("slow");
    
    //管线数据获取
    $("#hid_area_id").val(areaId);
    pipeLineShow(areaId);//左侧栏 管线信息加载
    showAreaPipeLine(areaId);
}

//加载某一管网区域 所有管线信息 
function showAreaPipeLine(areaId) {
    //var lineCoordinates;
    //$.ajax({
    //    type: "Get",
    //    async: false,
    //    dataType: "json",
    //    url: "/PipeNetworkManage/PipeMap/GetPipeLineCoordinates?areaId=" + areaId,
    //    success: function (data) {
    //        lineCoordinates = data;
    //    },
    //    error: function (xhr, status, error) {

    //    }
    //});
    //drawPloyLine(lineCoordinates);
    
    //清空覆盖物
    for (var i = 0 ; i < eOverlays.length;i++) {
        var overLay = eOverlays[i];
        map.removeOverlay(overLay.overLay);
    }

    //加载这一区域的管线
    for (var i = 0 ; i < eOverlays.length; i++) {
        var overLay = eOverlays[i];
        var thisAreaId = overLay.areaId;
        if (thisAreaId == areaId) {
            map.addOverlay(overLay.overLay);
        }
    }
}


//左侧栏 管线信息加载
function pipeLineShow(areaId) {
    var lineDate;
    $.ajax({
        type: "Get",
        async: false,
        url: "/PipeNetworkManage/PipeMap/GetPipeLineList?areaId=" + areaId,
        success: function (data) {
            lineDate = data;
        },
        error: function (xhr, status, error) {

        }
    });   
    $("#pipeLineList").html(lineDate);
}


// 绘制管线
function drawPloyLine(data) {

    eOverlays.length = 0;//初始化

    //地图覆盖物增加
    for (var i = 0; i < data.length; i++) {
        var lineId = data[i]["PipeLineId"];//管线ID
        var Coordinates = data[i]["Coordinates"];//管线坐标
        //var lineStyle = data[i]["PipeLineStyle"];//管线样式
        var areaId = data[i].PipeAreaId;
        if (Coordinates.length > 0) {
            var points = Coordinates.split("|");
            var paths = [];
            for (var j = 0 ; j < points.length; j++) {
                paths.push(new BMap.Point(points[j].split(",")[0], points[j].split(",")[1]));
            }
            //console.log(lineStyle);
            //var styles = lineStyle.split("-");
            //var polyLine = new BMap.Polyline(paths, { strokeColor: styles[0], strokeWeight: styles[2], strokeOpacity: 0.5, strokeStyle: styles[1] == 0 ? "solid" : "dashed" });
            var polyLine = new BMap.Polyline(paths, { strokeColor: "#FF0000", strokeWeight: "2", strokeOpacity: 1, strokeStyle: "solid" });
            map.addOverlay(polyLine);

            //信息存储
            var thisLine = {};
            thisLine.lineId = lineId;
            thisLine.overLay = polyLine;
            thisLine.areaId = areaId;

            eOverlays.push(thisLine);            
        }
    }
}


//新建管线
function addPipeLine() {
    var areaId = $("#hid_area_id").val();
    dialogOpen({
        id: "Form",
        title: '新建管线',
        url: '/PipeNetworkManage/PipeMap/PiPeLineForm?areaId=' + areaId + '&keyValue=',
        width: "750px",
        height: "500px",
        callBack: function (iframeId) {
            top.frames[iframeId].AcceptClick();
        }
    });
}

// 编辑管网区域
function editPipeArea(id) {
    dialogOpen({
        id: "Form",
        title: '编辑管网区域',
        url: '/PipeNetworkManage/PipeMap/PiPeMapForm?keyValue=' + id,
        width: "750px",
        height: "500px",
        callBack: function (iframeId) {
            top.frames[iframeId].AcceptClick();
        }
    });
}


function editPipeLine(id) {
    dialogOpen({
        id: "Form",
        title: '编辑管线信息',
        url: '/PipeNetworkManage/PipeMap/PipeLineForm?keyValue=' + id,
        width: "750px",
        height: "500px",
        callBack: function (iframeId) {
            top.frames[iframeId].AcceptClick();
        }
    });
}

//// 新建管线
//function addPipeLine() {
//    dialogOpen({
//        id: "Form",
//        title: '新建管网区域',
//        url: '/PipeNetworkManage/PipeMap/PiPeLineForm?keyValue=',
//        width: "750px",
//        height: "500px",
//        callBack: function (iframeId) {
//            top.frames[iframeId].AcceptClick();
//        }
//    });
//}

function hideShowArea(id) {
    var nowClass = $(this).eq(0).attr("class");
    if (nowClass.indexOf("glyphicon-eye-open") > 0) {
        $(this).removeClass("glyphicon-eye-open");
        $(this).addClass("glyphicon-eye-close");
    } else {
        $(this).addClass("glyphicon-eye-open");
        $(this).removeClass("glyphicon-eye-close");
    }

}



// checkbox change事件监听
function checkBoxChange() {
    // dma分区是否展示
    $("#cdma").change(function (e) {
        if ($('#cdma').is(':checked')) {
            showAllDMA();
        } else {
            for (var overlay in overlays) {
                map.removeOverlay(overlays[overlay]);
            }
            if (showPolygon) {
                map.removeOverlay(showPolygon);
            }
        }
    });
}



// 获取中心点
function getCenterPoint(path) {
    var x = 0.0;
    var y = 0.0;
    for (var i = 0; i < path.length; i++) {
        x = x + parseFloat(path[i].lng);
        y = y + parseFloat(path[i].lat);
    }
    x = x / path.length;
    y = y / path.length;
    return { lng: x, lat: y }
}

// 设置单个区域
function addOnePolygon() {
    var paths = overlays[PointTreeCode].getPath();
    var polygon = new BMap.Polygon(paths, { strokeColor: "red", strokeWeight: 2, strokeOpacity: 1, FillOpacity: "0.0", fillColor: "none" });
    map.addOverlay(polygon);
    showPolygon = polygon;
    var center = getCenterPoint(paths);
    map.setZoom(12);
    map.panTo(new BMap.Point(center.lng, center.lat), 2000);
}


//点击划线
function DrowOrEditPipeLine(lineId) {
    //编辑区域出现
    $("#btnWrapper").show();
    thisPipeLineId = lineId;    
    //样式--选中区域变色--后期增加
}

function drow() {
    drawOne(thisPipeLineId);
    drawingManager.open();//开启绘制
    drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE);//绘制折线模式

}

// 绘制具体界面区域
function drawOne(lineId) {
    //保存图标显示
    $("#btnWrapper .save").show();

    var isExists = false;
    var nowOverlay;
    //判断此管线是否绘制过
    for (var i = 0 ; i < eOverlays.length; i++) {
        var overLay = eOverlays[i];
        if (overLay.lineId == lineId) {
            isExists = true;
            nowOverlay = overLay.overLay;
        }
    }    
    if (!isExists) {
        $("#btnWrapper").show();
        // 绘制完成调用
        var overlaycomplete = function (e) {
            //$("#drawmap").attr("disabled", "disabled");
            var path = e.overlay.getPath();//获取所有点集合

            eOverlays.push(e.overlay);
            var paths = [];
            for (var i = 0; i < path.length; i++) {
                paths.push(new BMap.Point(path[i].lng, path[i].lat));
            }
            //var polyLine = new BMap.Polyline(paths, { strokeColor: $("#FillColor").val(), strokeWeight: 2, strokeOpacity: 0.5 });
            var polyLine = new BMap.Polyline(paths, { strokeColor: "#FF0000", strokeWeight: 2, strokeOpacity: 1 });
            map.addOverlay(polyLine);
            polyLine.enableEditing();
            polyLine.isEdit = true;
            clearNoEdit(eOverlays);            
            editOverlays = polyLine;

        };
        //var styleOptions = {
        //    strokeColor: "rgb(46, 207, 3)",    //边线颜色。
        //    fillColor: "rgb(46, 207, 3)",      //填充颜色。当参数为空时，圆形将没有填充效果。
        //    strokeWeight: 3,       //边线的宽度，以像素为单位。
        //    strokeOpacity: 0.8,       //边线透明度，取值范围0 - 1。
        //    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        //    strokeStyle: 'solid' //边线的样式，solid或dashed。
        //}
        //实例化鼠标绘制工具
        drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, //是否开启绘制模式
            enableDrawingTool: false, //是否显示工具栏
            drawingMode: BMAP_DRAWING_POLYLINE,//绘制模式 线
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                offset: new BMap.Size(5, 5), //偏离值
                drawingModes: [
                    BMAP_DRAWING_POLYLINE
                ]
            },
            //polygonOptions: styleOptions //多边形的样式
        });
        //添加鼠标绘制工具监听事件，用于获取绘制结果
        drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    } else {        
        nowOverlay.enableEditing();
        editOverlays = nowOverlay;
    }
    

}

// 清除拖拽区域
function clearNoEdit(overlays) {
    for (var i = 0; i < overlays.length; i++) {
        map.removeOverlay(overlays[i]);
    }
    overlays.length = 0
}

// 获取坐标点
function getlinepoints(polygon) {
    var pts = polygon.getPath();
    var points = "";
    for (var i = 0; i < pts.length; i++) {
        points += pts[i].lng + "," + pts[i].lat;
        if (i < pts.length - 1) {
            points += "|"
        }
    }
    return points;
}

//保存管线坐标
function save() {

    var linePoints = getlinepoints(editOverlays);
   
    editOverlays.isEdit = false;
    $.ajax({
        type: "POST",
        async: false,
        url: "/PipeNetworkManage/PipeMap/SavePipeLinePoints",
        data: { lineId: thisPipeLineId, points: linePoints },
        dataType:"json",
        success: function (data) {
            dialogMsg(data.message,1);
            //alert(data);
            editOverlays.disableEditing();
            //保存图标隐藏
            $("#btnWrapper .save").hide();
            $("#btnWrapper").hide();
        },
        error: function (xhr, status, error) {

        }
    });
}


//返回按钮
function showPipeArea() {
    //管线区域隐藏
    $("#west_pipeLine").fadeOut("slow");
    $("#west_pipeArea").fadeIn("slow");

    //地图管线重新加载
    map.clearOverlays();
    loadAllPipeLine();
}


// 初始化颜色
function InitialColor() {
    $('.fill_Color').each(function () {
        $(this).minicolors({
            control: $(this).attr('data-control') || 'hue',
            defaultValue: $(this).attr('data-defaultValue') || '',
            inline: $(this).attr('data-inline') === 'true',
            letterCase: $(this).attr('data-letterCase') || 'lowercase',
            opacity: $(this).attr('data-opacity'),
            position: $(this).attr('data-position') || 'bottom left',
            change: function (hex, opacity) {
                if (!hex) return;
                if (opacity) hex += ', ' + opacity;
                try {
                    console.log(hex);
                } catch (e) { }
            },
            theme: 'bootstrap'
        });
    });
}
//初始化页面
function InitialPage() {
    // 设置
    $(".partitionsContainer").css({ "height": ($(window).height() - 80) + "px" });
    //layout布局
    $('#layout').layout({
        applyDemoStyles: true,
        onresize: function () {
            $(window).resize();
        }
    });
    // resize重设(表格、树形)宽高
    $(window).resize(function (e) {
        window.setTimeout(function () {
            $("#itemTree").css("min-height", $(window).height() - 100);
            $("#itemTree_line").css("min-height", $(window).height() - 100);
            $(".partitionsContainer").css({ "height": ($(window).height() - 80) + "px" });
        }, 200);
        e.stopPropagation();
    });
    $("#itemTree").css("min-height", $(window).height() - 100);
    $("#itemTree_line").css("min-height", $(window).height() - 100);
    //布局宽度重新设置
    $(".ui-layout-west").css("width", "300px");
    var centerWidht = $(".ui-layout-center").width();
    $(".ui-layout-center").css({ "width": centerWidht - 100, "left": "305px" });
    $(".ui-layout-resizer").css("display", "none");
}

// 初始化百度地图
function initBaiduMap(lat, lgt,zoom) {
    map = new BMap.Map("allmap");
    var geoc = new BMap.Geocoder();   //地址解析对象
    var point = new BMap.Point(lat, lgt);
    map.centerAndZoom(point, zoom); // 中心点
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var bottom_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });// 左上角，添加比例尺
    map.addControl(bottom_left_control);
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
            //BMAP_PERSPECTIVE_MAP
        ],
        anchor: BMAP_ANCHOR_TOP_LEFT
    }));    
}


//删除管网区域
function deletePipeArea(areaId) {
    if (areaId) {
        $.RemoveForm({
            url: "/PipeNetworkManage/PipeMap/DeletePipeArea",
            param: { areaId: areaId },
            success: function (data) {
                InitialPipeArea();
                map.clearOverlays()
                loadAllPipeLine();
            }
        })
    }
}


//删除管网区域
function deletePipeLine(lineId,areaId) {
    if (lineId) {
        $.RemoveForm({
            url: "/PipeNetworkManage/PipeMap/DeltePipeLine",
            param: { lineId: lineId },
            success: function (data) {
                showAreaPipeLine(areaId);
                map.clearOverlays()
                loadAllPipeLine();
                pipeLineShow(areaId);
            }
        })
    }
}