| widgetsTS/widget_summary/view.html | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| widgetsTS/widget_summary/view.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| widgetsTS/widget_summary/widget.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
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); } @@ -86,20 +101,19 @@ 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]; var topObj = tmpTopListQueryResult[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 _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>" 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>" 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); } } @@ -127,10 +141,12 @@ 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); @@ -144,3 +160,21 @@ $("#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")) {
