获取鼠标点击位置，dojo.js显示弹窗，js Accumulation

cccreator commented 5 years ago

function onMouseBusInfoSz(e) {
    if (dojo.byId("stationTextSz") != null) { //如果存在对应id的div
        dojo.byId("gis_Map").removeChild(dojo.byId("stationTextSz")); //删除div
    }
    var carNo = e.graphic.attributes.carno;
    map.setMapCursor("pointer"); //手型鼠标样式,默认是default
    var scrPt = map.toScreen(e.graphic.geometry); //鼠标所指对象的屏幕坐标
    xPositionForCancel = e.pageX;//记录点击车辆时屏幕坐标x
    yPositionForCancel = e.pageY;//记录点击车辆时屏幕坐标y
    //新样式
    /*var stationSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 9,
        new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color(mapConfig.stationCircleColorSZ), mapConfig.stationCircleWidthSZ),
        new dojo.Color(mapConfig.stationCenterColorSZ));*/
    var busSymbolSz = new esri.symbol.PictureMarkerSymbol(mapConfig.busszcomprehenshow, mapConfig.compreshowwidthsz, mapConfig.compreshowheightsz);
    //设置新样式
    e.graphic.setSymbol(busSymbolSz);
    var textDivSz = dojo.doc.createElement("div");
    var screenLeft;
    var screenTop;
    if(markClickCount == 1){
        screenLeft = "848px";
        screenTop = "330px";
    }else{
        screenLeft = scrPt.x - mapConfig.mouseTextCtrl1 + "px";
        screenTop = scrPt.y - mapConfig.mouseTextCtrl2 + "px";
    }

    dojo.attr(textDivSz, {"id": "stationTextSz"}); //设置div的id
    dojo.style(textDivSz, {
        "left": screenLeft,
        "top": screenTop,
        "position": "absolute",
        "z-index": 8,
        // "background": mapConfig.mouseTextBackground,
        "font-size": mapConfig.mouseTextFontsize,
    });

    $.ajax({
        type: "POST",
        url: getWebRootPath() + '/firstLook/comprehensiveInfoHomePageNewSZ/getFlightInfo',
        data: {"carNo":carNo},
        dataType: "json",
        success: function (data) {

            $.ajax({
                type: "POST",
                url: getWebRootPath() + '/firstLook/comprehensiveInfoHomePageNewSZ/getPayByCard',
                data:{"carNo":carNo},
                dataType: "json",
                success: function (obj) {
                    var passengerFlow =  obj[0].passengerFlow;
                    //控制展示什么样式的信息

                    textDivSz.innerHTML = "<div style='width:290px;height:143px;background: rgba(16,61,99, 0.8);line-height:28px;'>"+
                        "<div style='width:100%;height:45px;border: 1px solid #006cc7;background-color: #0354a6'>"+
                        "<div style='color:#ffffff;width:50%;height:100%;float:left;text-indent:10px;line-height:45px;font-size:20px'>"+
                        "今日客流量"+
                        "</div>"+
                        "<div style='width:50%;height:100%;float:left;line-height:45px;font-size:25px;color:#ffaa31'>"+
                        +passengerFlow+
                        "&nbsp;<span style='color:#ffffff;font-size:16px'>人次</span>"+
                        "</div>"+
                        "</div>"+
                        "<div style='width:100%;height:30px;border: 1px solid #006cc7;text-align:center;color:#32f3ff'>"+
                        "<div style='width:33%;height:100%;float:left;border-right: 1px solid #006cc7;'>"+

                        "</div>"+
                        "<div style='width:33%;height:100%;float:left;border-right: 1px solid #006cc7;'>"+
                        "计划"+
                        "</div>"+
                        "<div style='width:33%;height:100%;float:left '>"+
                        "实际"+
                        "</div>"+
                        "</div>"+
                        "<div style='width:100%;height:30px;border: 1px solid #006cc7;text-align:center'>"+
                        "<div style='width:33%;height:100%;float:left;border-right: 1px solid #006cc7;color:#32f3ff'>"+
                        "发车时间"+
                        "</div>"+
                        "<div style='width:33%;height:100%;float:left;border-right: 1px solid #006cc7;color:#ffffff'>"+
                        /*"10:00"*/data.leaveTime +
                    "</div>"+
                    "<div style='width:33%;height:100%;float:left;color:#ffffff'>"+
                        /*"10:05"*/data.planLeaveTime+
                    "</div>"+
                    "</div>"+
                    "<div style='width:100%;height:30px;border: 1px solid #006cc7;;text-align:center'>"+
                        "<div style='width:33%;height:100%;float:left;border-right: 1px solid #006cc7;color:#32f3ff'>"+
                        "到达时间"+
                        "</div>"+
                        "<div style='width:33%;height:100%;float:left;border-right: 1px solid #006cc7;color:#ffffff'>"+
                        /*"11:20"*/data.planArriveTime+
                    "</div>"+
                    "<div style='width:33%;height:100%;float:left ;color:#ffffff'>"+
                        "暂未到达"+
                        "</div>"+
                        "</div>"+

                        "</div>";
                }
            });
        }
    });
    dojo.byId("gis_Map").appendChild(textDivSz);
}

toScreen(mapPoint)，将地理坐标转换为屏幕坐标。转换后toScreen(mapPoint).x为longitude，toScreen(mapPoint).y为latitude；
toMap(screenPoint)，将屏幕坐标转换为地理坐标（这个没使用过，会验证！）
map.setMapCursor("pointer")这个是当鼠标移动上去鼠标变成小手的map实现方式； <div name = "vehicleReturn" class=" title-return" style="float: right;cursor:pointer; " >返回</div> 这是在html页面定义的鼠标转换成小手的属性；
e.pageX，e.pageY为直接获取的屏幕点击处的坐标；

dojo.js，把div框append到页面的相应位置：

var textDivSz = dojo.doc.createElement("div");
dojo.attr(textDivSz, {"id": "stationTextSz"}); //设置div的id
dojo.style(textDivSz, {
    "left": screenLeft,
    "top": screenTop,
    "position": "absolute",
    "z-index": 8,
    // "background": mapConfig.mouseTextBackground,
    "font-size": mapConfig.mouseTextFontsize,
});
dojo.byId("gis_Map").appendChild(textDivSz);

cccreator commented 5 years ago

height()方法的使用

var height1 = $("#detailPatrolPlanModal_RouteGIS_SZ").height() * 0.915;//这是获取div的高度
$("#table_sz").height(height1);//这是给div的高度赋值

cccreator commented 5 years ago

split的使用

//将segid解析出每个元素，放入 大strData数组中，segid格式为17_1,17_2这种
strData = segid.split(""); 
var i = strData.length;// 解析出的字符的长度
var str;
//strData[i-1],为最后一个字符，判断是 1 还是 2
if(strData[i-1] == '1'){
str = "上行";
}else if(strData[i-1] == '2') {
   str = "下行";
}else{
   return;
}

cccreator commented 5 years ago

JS： var xgap = xgap.toFixed(5).replace(new RegExp("-", "g"), ""); //取绝对值，保留五位小数，四舍五入 toFixed(5)：保留五位有效数字； replace（“a”,"b"）:用b来代替a，Java中也用； new RegExp("-", "g")：正则表达式，RegEXP是正则表达式的缩写，g为参数表示全局（global），“-”为xgap中的字符；
Java：Math.abs(xgap)取绝对值， DecimalFormat df = new DecimalFormat("#.00000");df.format(dou)保留五位小数，也是四舍五入，注意df.format(dou)返回的String类型，如果需要Double类型需要转换，如Double.parseDouble( df.format(dou))

cccreator commented 5 years ago

htmlTab = htmlTab + "<div id='table_sz' style='overflow-y:scroll;' > " + "<table id='table' border='1' cellpadding='10' cellspacing='0'>";用 table时，实现当内容太多滚动的操作，在最外面加一个div，然后style='overflow-y:scroll;' 然后
```
htmlTab = htmlTab + "</table>" + "</div>";
                        $("#busInfoTabSZ").append(htmlTab);
                        var height1 = $("#detailPatrolPlanModal_RouteGIS_SZ").height() * 0.915;
                        $("#table_sz").height(height1);
```

cccreator / GIS

获取鼠标点击位置，dojo.js显示弹窗，js Accumulation #3