添加 勾选框，多点定位

wangzhibo

2021-11-07 5dcd63bfa4498971727ba222365a3050f7df86cb

添加 勾选框，多点定位

 widgetsTS/widget_summary/view.html

@@ -85,13 +85,17 @@
            <a href="#" style="color: white!important;"><span id="topN_name">监测Top50</span></a>
            <a href="#"></a>
        </span>
        <span class="layui-breadcrumb" style="float:right;margin-right:20px;" lay-separator="|">
            <a href="#" style="color:white!important;" onclick="highlightSelected();"><span id="topN_name">勾选显示</span></a>
        </span>
    </div>

    <div class="layui-row" style="padding-left:1%;padding-right:1%;overflow:auto;height:450px;">
        <table id="" class="layui-table no_bgc_table top_10_table" lay-skin="nob">
            <thead>
                <tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
                    <th style="font-weight: bold;">序号</th>
                    <th style="font-weight: bold;"><input type="checkbox" id="selectedALL" /></span></th>
                    <th style="font-weight: bold;">序</th>
                    <th style="font-weight: bold;">编号</th>
                    <th style="font-weight: bold;">名称</th>
                    <th style="font-weight: bold;"><select id="qindex_selection"></select></th>

 widgetsTS/widget_summary/view.js

@@ -2,6 +2,8 @@
var current_selected_monitor_name = "国控点";
var current_selected_monitor_qindex = "pm25";

var tmpTopListQueryResult;

//对应widget.js中MyWidget实例化后的对象
var thisWidget

@@ -18,6 +20,18 @@
        current_selected_monitor_name = $(this).attr("_name");
        changeQindexSelection();
        reloadData();
    });

    $("#selectedALL").click(function() { 
        if (this.checked){ 
            $("input[name='selectedItem']:checkbox").each(function(){ 
                  $(this).prop("checked", true);  
            });
        } else {   
            $("input[name='selectedItem']:checkbox").each(function() {   
                  $(this).prop("checked", false);  
            });
        }  
    });


@@ -57,7 +71,7 @@

}
function changeQindexSelection() {

    current_selected_monitor_qindex = "pm25";  // 重设qindex
    $("#qindex_selection").empty();
    var options = [];
    if (current_selected_monitor_type == 1001) {
@@ -66,6 +80,7 @@
        options = Object.keys(qindex_range_list_1002);
    } else if (current_selected_monitor_type == 1003) {
        options = Object.keys(qindex_range_list_1003);
        current_selected_monitor_qindex = "tsp";
    } else {
        options = Object.keys(qindex_range_list_1004_and_other);
    }
@@ -76,7 +91,7 @@

function reloadData() {
    $("#top10Tb").empty();
    var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex + "&pageno=1&pagesize="+default_system_params.summary_topN_count;
    var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex + "&pageno=1&pagesize=" + default_system_params.summary_topN_count;
    //加入cntId
    $.ajax({
        type: 'get',
@@ -86,26 +101,25 @@
        async: true,//同步
        url: backend_url,
        success: function (data) {
            var tableData = data.data.result;
            //console.log(tableData);
            if (tableData != null && tableData.length>0) {
                for (var i = 0; length = tableData.length, i < length ; i++) {
            tmpTopListQueryResult = data.data.result;;
            if (tmpTopListQueryResult != null && tmpTopListQueryResult.length > 0) {
                for (var i = 0; length = tmpTopListQueryResult.length, i < length; i++) {
                    var j = i + 1;
                    var topObj = tableData[i];
                    if(topObj[current_selected_monitor_qindex] == null){
                        var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.code + "</td><td>" + topObj.name + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + "/" + "</font></td></tr>"
                    var topObj = tmpTopListQueryResult[i];
                    if (topObj[current_selected_monitor_qindex] == null) {
                        var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onmouseover='over(this)' onmouseout='out(this)' ><td><input type='checkbox' name='selectedItem' value='" + j + "' /></td><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.code + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.name + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + "/" + "</font></td></tr>"
                        $("#top10Tb").append(_tr);
                    } else if(topObj.name == undefined){
                        var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.code + "</td><td>" + "/" + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"
                    } else if (topObj.name == undefined) {
                        var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onmouseover='over(this)' onmouseout='out(this)' ><td><input type='checkbox' name='selectedItem' value='" + j + "' /></td><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.code + "</td><td onclick='locateAndShowDetail(this)'>" + "/" + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"
                        $("#top10Tb").append(_tr);
                    }else{
                        var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.code + "</td><td>" + topObj.name + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"
                    } else {
                        var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onmouseover='over(this)' onmouseout='out(this)' ><td><input type='checkbox' name='selectedItem' value='" + j + "' /></td><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.code + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.name + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"
                        $("#top10Tb").append(_tr);
                    }
                }      
         }else{
            haoutil.msg("查询无数据，请更换查询条件！");
         }
                }
            } else {
                haoutil.msg("查询无数据，请更换查询条件！");
            }

        },
        error: function (request, textStatus) {
@@ -127,20 +141,40 @@

function locateAndShowDetail(obj) {
    $('#top10Tb tr').removeClass("select_tr");
    $(obj).addClass("select_tr");
    var siteId = $(obj).attr("_siteid");
    var lon = $(obj).attr("_lon");
    var lat = $(obj).attr("_lat");
    let parentObj = $(obj).parent();

    $(parentObj).addClass("select_tr");
    var siteId = $(parentObj).attr("_siteid");
    var lon = $(parentObj).attr("_lon");
    var lat = $(parentObj).attr("_lat");

    if (lon && lon != 'undefined') {
        thisWidget.locateAndHighlight(lon, lat);
    }
    if (current_selected_monitor_type !=100500){
        thisWidget.showDetailedWindow({ "nodejs_url_predix": thisWidget.nodejs_url_predix, "datatype": thisWidget.datatype,"selected_qindex": current_selected_monitor_qindex,"datatime": thisWidget.datatime, "layerid": current_selected_monitor_type, "siteid": siteId });
    if (current_selected_monitor_type != 100500) {
        thisWidget.showDetailedWindow({ "nodejs_url_predix": thisWidget.nodejs_url_predix, "datatype": thisWidget.datatype, "selected_qindex": current_selected_monitor_qindex, "datatime": thisWidget.datatime, "layerid": current_selected_monitor_type, "siteid": siteId });
    }
}

function setTopNname(count){
    $("#topN_name").html("Top"+count);
function setTopNname(count) {
    $("#topN_name").html("Top" + count);

}

function highlightSelected() {

    var obj = document.getElementsByName('selectedItem'); //选择所有name="'selectedItem'"的对象，返回数组 
    var selectedItem = [];
    for (var i = 0; i < obj.length; ++i) {
        if (obj[i].checked) {
            selectedItem[selectedItem.length] = tmpTopListQueryResult[i];
        }
    }

    if (selectedItem.length <= 0) {
        haoutil.msg("请勾选");
    } else {
        //console.log(selectedItem);
        thisWidget.HighlightMulti(current_selected_monitor_type, current_selected_monitor_qindex, selectedItem);
    }
}

 widgetsTS/widget_summary/widget.js

@@ -1,5 +1,35 @@
'use script' //开发环境建议开启严格模式
    ;
'use script'; //开发环境建议开启严格模式
//MULTILINESTRING((121.442366232 30.9993324020001,121.432115747 31.0180369600001,121.425361897 31.033267139,121.400904977 31.0866703300001),(121.400938813 31.086461206,121.398898303 31.0910476290001,121.394856812 31.1020265970001,121.39172779 31.107931819,121.388063749 31.1137217880001))    MULTILINESTRING((121.442366232 30.9993324020001, 121.432115747 31.0180369600001, 121.425361897 31.033267139, 121.400904977 31.0866703300001), (121.400938813 31.086461206, 121.398898303 31.0910476290001, 121.394856812 31.1020265970001, 121.39172779 31.107931819, 121.388063749 31.1137217880001))    沪金高速(奉贤区-南桥镇)    121.388063749    30.9993324020001    MULTILINESTRING((121.442366232 30.9993324020001, 121.432115747 31.0180369600001, 121.425361897 31.033267139, 121.400904977 31.0866703300001), (121.400938813 31.086461206, 121.398898303 31.0910476290001, 121.394856812 31.1020265970001, 121.39172779 31.107931819, 121.388063749 31.1137217880001))    奉贤区
//LINESTRING(121.466190372 30.915914146,121.467249117 30.9123925970001,121.468322938 30.9086812570001)
function getPositionFromLonLat(in_json_string) {
    let postion = [];
    var points = in_json_string.split(",");
    points.forEach(element => {
        var tmplon_lat = element.split(" ");
        postion[postion.length] = [tmplon_lat[0], tmplon_lat[1], 1];
    });
    return postion;
}
function getClass(o) { //判断数据类型
    return Object.prototype.toString.call(o).slice(8, -1);
}
function deepCopy(obj) {
    var result, oClass = getClass(obj);

    if (oClass == "Object") result = {}; //判断传入的如果是对象，继续遍历
    else if (oClass == "Array") result = []; //判断传入的如果是数组，继续遍历
    else return obj; //如果是基本数据类型就直接返回

    for (var i in obj) {
        var copy = obj[i];

        if (getClass(copy) == "Object") result[i] = deepCopy(copy); //递归方法 ，如果对象继续变量obj[i],下一级还是对象，就obj[i][i]
        else if (getClass(copy) == "Array") result[i] = deepCopy(copy); //递归方法 ，如果对象继续数组obj[i],下一级还是数组，就obj[i][i]
        else result[i] = copy; //基本数据类型则赋值给属性
    }

    return result;
}
(function (window, mars3d) {
    //创建widget类，需要继承BaseWidget
    class MyWidget extends mars3d.widget.BaseWidget {
@@ -34,6 +64,101 @@
        locateAndHighlight(lon, lat) {
            this.map.flyToPoint(Cesium.Cartesian3.fromDegrees(lon, lat, 0.2));
        }
        HighlightMulti(layerid, qindex, selectedItem) {
            mars3d.global_variables.tmpHighlightGraphicLayer.clear(true);

            if (layerid == 1001 || layerid == 1002 || layerid == 1003 || layerid == 1004) {
                selectedItem.forEach(element => {
                    this.addPointToMap(layerid, qindex, element);
                });

            } else if (layerid == 1005 || layerid == 100500) {
                selectedItem.forEach(element => {
                    var path = element.shape;
                    if (path.substring(0, 1) == "M") {
                        var paths = (path.substring(17, path.length - 2)).split("),(");
                        paths.forEach(element_path => {
                            var positions = getPositionFromLonLat(element_path)
                            var tmpAttr = deepCopy(element);
                            delete tmpAttr['shape'];
                            this.addPathToMap(layerid, qindex, positions, tmpAttr);
                        });
                    } else {
                        var positions = getPositionFromLonLat(path.substring(11, path.length - 1))
                        var tmpAttr = deepCopy(element);
                        delete tmpAttr['shape'];
                        this.addPathToMap(layerid, qindex, positions, tmpAttr);
                    }

                });
            } else if (layerid == 100500) {

            } else if (layerid == 1006) {

                selectedItem.forEach(element => {
                    var path = element.shape;
                    if (path != null && path != "null" && path != undefined) {
                        var positions = getPositionFromLonLat(path.substring(9, path.length - 2))
                        var tmpAttr = deepCopy(element);
                        delete tmpAttr['shape'];
                        this.addPolygonToMap(layerid, qindex, positions, tmpAttr);
                    }
                });

            }
        }
        addPolygonToMap(layerid, qindex, positions, attr) {
            var primitive = new mars3d.graphic.PolygonEntity({
                positions: positions,
                style: {
                    height: 50,
                    diffHeight: 200,
                    materialType: mars3d.MaterialType.PolyGradient,
                    color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
                    alphaPower: 1.5,
                    //高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
                    highlight: {
                        color: "#ff0000",
                    },
                },
                attr: attr
            });
            mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(primitive);
        }

        addPointToMap(layerid, qindex, attr) {
            //立体围墙扩散效果,圆状
            var circleDiffuseWallGlow = new mars3d.graphic.DiffuseWall({
                position: Cesium.Cartesian3.fromDegrees(attr["lon"], attr["lat"], 20), //圆中心点
                style: {
                    diffHeight: qindex == "co" ? 100 * attr[qindex] : 10 * attr[qindex], //高度
                    radius: 200, //半径
                    color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
                    speed: 10, //速度
                },
                attr: attr
            });
            mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(circleDiffuseWallGlow);
        }

        addPathToMap(layerid, qindex, positions, attr) {
            var road = new mars3d.graphic.WallPrimitive({
                positions: positions,
                style: {
                    closure: true,
                    diffHeight: qindex == "co" ? 100 * attr[qindex] : 10 * attr[qindex], //高度
                    material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
                        //动画线材质
                        image: "img/textures/fence.png",
                        axisY: true,
                        color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
                        speed: 10, //速度，建议取值范围1-100
                    }),
                },
                attr: attr
            });
            mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(road);
        }

        showDetailedWindow(params) {
            if (mars3d.widget.isActivate("widgetsTS/widget_detail/widget.js")) {