断面车流前端实现

[cccreator]

断面车流画线

$("#crossSectionHisBusFlowDraw").on("click",function(){
           app.drawGraphic();
        })
app.drawGraphic = function(){
            app.busLayer.hide();
            app.drawFeatureLayer.clear()
            app.map.setMapCursor("pointer");
            app.drawLine.activate(Draw.FREEHAND_POLYLINE);
        }
        app.drawLine.on("draw-complete",function (evt) {
            app.drawLine.deactivate();
            //绘制的线路作为断面，判断途径断面线路
            var pointStr = "";
            for(var i=0;i<evt.geometry.paths[0].length;i++){
                var point = evt.geometry.paths[0][i][0] + " " + evt.geometry.paths[0][i][1];
                pointStr = pointStr + point + ",";
            }
            var wkt = "LINESTRING(" + pointStr.substring(0,pointStr.length-1) + ")";
            app.wkt = wkt;
            //高亮显示选中区域
            app.drawFeatureLayer.add(new esri.Graphic(evt.geometry, new esri.symbol.CartographicLineSymbol(
                esri.symbol.CartographicLineSymbol.STYLE_SOLID,
                new dojo.Color(mapConfig.upLineColor), mapConfig.playLineWidth,
                esri.symbol.CartographicLineSymbol.CAP_ROUND,
                esri.symbol.CartographicLineSymbol.JOIN_MITER, 5
            ), "routeGraphic"));
            app.graphic = new esri.Graphic(evt.geometry, app.sfs_selectedLine);
            //高亮显示选中区域
            app.drawFeatureLayer.add(app.graphic);
        })

断面车流右侧显示框

 $("#selectCrossBusData").on("click",function () {
            if(app.wkt != ""){
                $("#idForRemove1").remove();//清除右侧框一
                $("#idForRemove2").remove();//清除右侧框二
                var beginTime = $("#crossSectionHisBusFlowBeginTime").val();
                var endTime =  $("#crossSectionHisBusFlowEndTime").val();
                $("#crossBusDataCal").show();
                $.ajax({
                    url: getWebRootPath() + "/baseFacility/GISRouteAnalyse/getCrossRoute",
                    type: "POST",
                    data: {"wkt": app.wkt,
                        "beginTime":beginTime,
                        "endTime":endTime
                    },
                    dataType: "JSON",
                    success: function (obj) {
                        var htmlTab = "";
                        var busDetailHtmlTab = "";
                        var busDetailHtmlTab1 = "";
                        var tableHead = "<div id='idForRemove1'><div style='margin-left: 24px;'><p style='font-size: 15px;'>车辆统计：</p></div> " +
                            "<div id='crossBusSizeSet' style='overflow-y:scroll;margin-left: 24px'> " +
                            "<table border='1'  cellpadding='10'  cellspacing='0'>" +
                            "<tr><td width = '165'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + "运行方向" + "</p>" + "</td>"+
                            "<td width = '165'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + "车辆总数（辆）" + "</p>" + "</td>"+
                            "<td width = '165'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + "额定载客量（人）" + "</p>" + "</td>" + "</tr>";
                        var busDetailTableHead = "<div id='idForRemove2'><div style='margin-left: 24px;margin-bottom: -6px;' id='fontBusDetail'><p style='font-size: 15px;'>车辆明细：</p></div> " +
                            "<div id='titleForCal' style='width:91.8%;height:20px;border: 1px solid;text-align:center;margin-left: 24px;border-bottom:0px;'>" +
                            "<div style='width:25%;height:100%;float:left;'>车牌号</div>" +
                            "<div style='width:25%;height:100%;float:left;border-left: 1px solid;'>分公司</div>" +
                            "<div style='width:25%;height:100%;float:left;border-left: 1px solid;'>运行线路</div>" +
                            "<div style='width:25%;height:100%;float:left;border-left: 1px solid;'>运行方向</div>" +
                            "</div>" +
                            "<div id='crossBusSizeSet1' style='overflow-y:scroll;margin-left: 24px'> " +
                            "<table border='1'  cellpadding='10'  cellspacing='0'>" ;
                        var i = 0,k = 0;
                        var maxDirectionName = "";
                        var firstRunBusDir = "";
                        $.each(obj,function (index,value) {
                                if(value["carNo"] == undefined && value.runDirBusSum != 0){
                                    htmlTab +=
                                        "<tr><td width = '165'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.runDirection + "</p>" + "</td>"+
                                        "<td width = '165'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.runDirBusSum + "</p>" + "</td>" +
                                        "<td width = '165'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.firstDirCarriersSum + "</p>" + "</td>" + "</tr>";
                                    if(i == 0){
                                        maxDirectionName = value.runDirection;
                                        i++;
                                    }
                                }else if(value.runDirBusSum != 0){
                                    if(k == 0){
                                        firstRunBusDir = value.runDirection;
                                        k++;
                                    }
                                    if(firstRunBusDir == value.runDirection){
                                        busDetailHtmlTab +=
                                            "<tr><td width = '25%'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.carNo + "</p>" + "</td>"+
                                            "<td width = '25%'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.orgName + "</p>" + "</td>"+
                                            "<td width = '25%'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.routeName + "</p>" + "</td>"+
                                            "<td width = '25%'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.runDirection + "</p>" + "</td>" + "</tr>";
                                    }else{
                                        busDetailHtmlTab1 +=
                                            "<tr><td width = '25%'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.carNo + "</p>" + "</td>"+
                                            "<td width = '25%'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.orgName + "</p>" + "</td>"+
                                            "<td width = '25%'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.routeName + "</p>" + "</td>"+
                                            "<td width = '25%'>" + "<p style='text-align:center;margin-bottom: 1px;'>" + value.runDirection + "</p>" + "</td>" + "</tr>";
                                    }
                                }

                        })
                        var htmlStr1 = tableHead + htmlTab + "</table></div></div>";
                        var htmlStr2 = busDetailTableHead + busDetailHtmlTab +busDetailHtmlTab1+ "</table></div></div>";
                        $("#busCountInfoShow").append(htmlStr1);
                        $("#busDetailInfoShow").append(htmlStr2);
                        //计算高度设置
                        var height = parseInt($(".ctrlArea_GISMonitor").height())-parseInt($(".yx-left-content-crossbus").height()) - parseInt($("#idForRemove1").height())- parseInt($("#fontBusDetail").height()) - parseInt($("#titleForCal").height()) - 35 ;
                        $("#crossBusSizeSet1").height(height);
                        $("#crossBusDataCal").hide();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            }
        })