| widgetsTS/taxiRouteReplay/img/end.png | 补丁 | 查看 | 原始文档 | blame | 历史 | |
| widgetsTS/taxiRouteReplay/img/start.png | 补丁 | 查看 | 原始文档 | blame | 历史 | |
| widgetsTS/taxiRouteReplay/view.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| widgetsTS/taxiRouteReplay/view.html | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| widgetsTS/taxiRouteReplay/view.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| widgetsTS/taxiRouteReplay/widget.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
widgetsTS/taxiRouteReplay/img/end.png
New file @@ -0,0 +1,212 @@ .talbe_style { padding: 5px; border: 0; font-size: 13px; } .talbe_style tr td { padding: 2px; text-align: left; } .line { border-top: 1px solid #e6e6e6; margin: 5px; } .nametd { width: 50px; } .mapDH_FX { background-color: rgba(32, 160, 255, 0.2); color: white; width: 135px; line-height: 40px; border: none; border-radius: 4px; } .mapDH_FX_DIV { text-align: center } input, p { padding: 0; } input { border: none; } .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: block; clear: both; overflow: hidden; } .route_box { width: 100%; height: calc(100% - 120px); overflow-y: auto; overflow-x: hidden; } td { height: 40px; color: #ffffff; } .title td { text-align: center; color: #ffffff; } .lxh { text-align: center; } .fa input { padding: 5px 10px; background: #4db3ff; color: #ffffff; border-radius: 5px; } .router_btn { margin-left: 10px; } .router_table { width: 99%; } .span_sjgs { display: none; margin-left: 5px; } .mcxd { display: none; margin-top: 10px; position: relative; } .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: block; clear: both; overflow: hidden; } .mapDH_title button { width: 120px; height: 40px; border: 1px solid #4793c7; float: left; margin-right: 10px; cursor: pointer; border-radius: 5px; font-size: 16px; color: #ffffff; background: none; } .mapDH_title .active { background: #20a0ff; } .mapDH_title { margin-left: 20%; margin-top: 10px; } .zbxd { margin: 10px; } .searchbox { width: 400px; overflow: hidden; } .seachcon { width: 999999px; float: left; } .searchinfo { width: 400px; box-sizing: border-box; padding: 10px 20px; float: left; } .inpbox { margin-bottom: 10px; } .ltit { float: left; color: #ffffff; line-height: 32px; } .text { width: 180px; height: 32px; float: left; border-radius: 5px; box-sizing: border-box; padding-left: 10px; } .btn { width: 82px; height: 32px; background: #20a0ff; color: #ffffff; margin-left: 10px; border-radius: 5px; } .searchval { width: 180px; height: 220px; box-sizing: border-box; padding: 10px; overflow-y: auto; background-color: rgba(63, 72, 84, 1); display: none; position: absolute; left: 90px; } .startbox .searchval { top: 50px; } .endbox .searchval { top: 97px; } .searchval li { color: #ffffff; line-height: 30px; } .no_bgc_table { width :100%; height:60%; margin-left: 10px; } widgetsTS/taxiRouteReplay/view.html
New file @@ -0,0 +1,92 @@ <!DOCTYPE html> <html class="no-js css-menubar" lang="zh-cn"> <head> <title>弹窗子页面</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 移动设备 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" /> <meta name="author" content="色宁科技 http://mars3d.cn " /> <!-- 360浏览器默认使用Webkit内核 --> <meta name="renderer" content="webkit" /> <!-- Chrome浏览器添加桌面快捷方式（安卓） --> <link rel="icon" type="image/png" href="../../img/favicon/favicon.png" /> <meta name="mobile-web-app-capable" content="yes" /> <!-- Safari浏览器添加到主屏幕（IOS） --> <link rel="icon" sizes="192x192" href="img/favicon/apple-touch-icon.png" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-title" content="色宁科技" /> <!-- Win8标题栏及ICON图标 --> <link rel="apple-touch-icon-precomposed" href="../../img/favicon/apple-touch-icon.png" /> <meta name="msapplication-TileImage" content="../../img/favicon/app-icon72x72@2x.png" /> <meta name="msapplication-TileColor" content="#62a8ea" /> <!-- 第3方lib引入 --> <script type="text/javascript" src="../../lib/include-lib.js?time=20210803" libpath="../../lib/" include="jquery,font-awesome,bootstrap,admui-frame"></script> <link href="../../css/widget-win.css" rel="stylesheet" /> <link href="view.css?time=20210803" rel="stylesheet" /> <link href="../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="../../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.css" rel="stylesheet" /> <script src="../../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.js"></script> <script src="../../lib/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script> </head> <body> <table id="paramView" class="talbe_style zbxd" style="display: block"> <tr> <td class="nametd">开始时间：</td> <td> <input type='text' class="form-control date" id='appDateHourStart' name="appDateHourStart" /> </td> </tr> <tr> <td class="nametd">结束时间：</td> <td> <input type='text' class="form-control date" id='appDateHourEnd' name="appDateHourEnd" /> </td> </tr> <tr> <td> <button type="button" id="startQueryTaxiData" class="btn btn-primary" style="width:100px;"><span id="startQueryTaxiDataText">查询</span></button> </td> </tr> </table> <div class="line"></div> <div class="route_box" id="route_box" style="display: none"> <table class="talbe_style zbxd" style="display: block"> <tr> <td> <button type="button" id="btnStartDH" class="btn btn-primary" style="width:100px;"><span id="btnStartDHText">开始回放</span></button> </td> <td> <span class="span_sjgs"><input class="sjgs" id="checkbox_sjgs" type="checkbox">视角跟随</span> </td> </tr> </table> <table class="no_bgc_table"> <thead> <tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;"> <th style="font-weight: bold;">ID</th> <th style="font-weight: bold;">指标编码</th> <th style="font-weight: bold;">指标数值</th> <th style="font-weight: bold;">指标单位</th> </tr> </thead> <tbody id="indexTaxiContent" style="cursor: pointer;"> </tbody> </table> </div> <script src="view.js?time=20210803"></script> </body> </html> widgetsTS/taxiRouteReplay/view.js
New file @@ -0,0 +1,139 @@ "use script"; //开发环境建议开启严格模式 //对应widget.js中MyWidget实例化后的对象 var thisWidget; function initWidgetView(_thisWidget) { thisWidget = _thisWidget; DatePicker("#appDateHourStart", '#appDateHourEnd'); $("#appDateHourStart").datetimepicker("setDate", new Date(thisWidget.appDateHourStart)); $('#appDateHourEnd').datetimepicker('setDate', new Date(thisWidget.appDateHourEnd)); $("#btnStartDH") .off("click") .on("click", function () { if ($("#btnStartDHText").text() == "开始回放") { thisWidget.startDH(); $("#btnStartDHText").text("停止回放"); $("#checkbox_sjgs").show(); } else { $("#btnStartDHText").text("开始回放"); thisWidget.pauseReplay(); } }); $("#checkbox_sjgs") .off("click") .on("click", function () { var checked = $(this).prop("checked"); if (checked) { thisWidget.startGS(); } else { thisWidget.removeTrack(); } }); //开始查询轨迹 $("#startQueryTaxiData").click(function () { haoutil.loading.show(); $.getJSON(thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_1004_single_path&siteid=" + thisWidget.taxi_sn, { datatime1: thisWidget.appDateHourStart, datatime2: thisWidget.appDateHourEnd }, (result) => { haoutil.loading.hide(); thisWidget.clearReplayLayers(); if (result.data.result.length > 0) { thisWidget.setSingleTaxiReplayData(result.data.result); var points = []; for (var i = 0, len = result.data.result.length; i < len; i++) { let item = result.data.result[i]; points[points.length] = [item["lon"], item["lat"]]; } thisWidget.addTaxiReplayGraphic(points); $("#route_box").show(); } else { haoutil.msg("无查询记录，请更换查询条件！"); } }); }); } function refreshDetailTable(tmpattr) { $("#indexTaxiContent").empty(); var _tr = "<tr><td>1</td><td>code</td><td>" + tmpattr.code + "</td><td>/</td></tr>" $("#indexTaxiContent").append(_tr); _tr = "<tr><td>3</td><td>datatime</td><td>" + tmpattr.datatime + "</td><td>/</td></tr>" $("#indexTaxiContent").append(_tr); var tmp_index = 3; for (var p in tmpattr) {//遍历json对象的每个key/value对,p为key if (p !== 'code' && p !== 'datatime') { _tr = "<tr><td>" + tmp_index + "</td><td>" + p + "</td><td>" + tmpattr[p] + "</td><td>" + getUnitByqindex(p) + "</td></tr>" $("#indexTaxiContent").append(_tr); tmp_index++; } } } function getUnitByqindex(qindex) { qindex = qindex.toUpperCase(); if (qindex == 'PM25' || qindex == 'PM10' || qindex == 'NO' || qindex == 'NO2' || qindex == 'NOX' || qindex == 'SO2') { return 'μg/m³'; } else if (qindex == 'CO') { return 'mg/m³'; } else if (qindex == 'SPEED') { return 'km/h'; } else { return '/'; } } function resetStartQueryTaxiDataText(taxi) { $("#startQueryTaxiDataText").text("查询(" + taxi + ")"); $("#route_box").hide(); } function DatePicker(beginSelector, endSelector) { $(beginSelector).datetimepicker( { bootcssVer: 3, //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头 format: 'yyyy-mm-dd hh:ii:00', minView: 'day',//设置时间选择为年月日 去掉时分秒选择 todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。 clearBtn: true, language: 'zh-CN', autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。 keyboardNavigation: true, //是否允许通过方向键改变日期。 forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。 initialDate: new Date(), todayHighlight: 1, //如果为true, 高亮当前日期 endDate: new Date() }).on('changeDate', function (ev) { if (ev.date) { $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf())) } else { $(endSelector).datetimepicker('setStartDate', null); } thisWidget.appDateHourStart = $(beginSelector).val(); }) $(endSelector).datetimepicker( { bootcssVer: 3, //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头 format: 'yyyy-mm-dd hh:ii:00', todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。 clearBtn: true, language: 'zh-CN', autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。 keyboardNavigation: true, //是否允许通过方向键改变日期。 forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。 initialDate: new Date(), todayHighlight: 1, //如果为true, 高亮当前日期 endDate: new Date() }).on('changeDate', function (ev) { thisWidget.appDateHourEnd = $(endSelector).val(); }) } widgetsTS/taxiRouteReplay/widget.js
New file @@ -0,0 +1,192 @@ (function (window, mars3d) { //创建widget类，需要继承BaseWidget class MyWidget extends mars3d.widget.BaseWidget { //弹窗配置 get view() { return { type: "window", url: "view.html", windowOptions: { width: 350, }, }; } reloadData(new_taxi_sn) { this.viewWindow.resetStartQueryTaxiDataText(new_taxi_sn); this.taxi_sn = new_taxi_sn; if (this.startGraphic) { this.startGraphic.remove(); this.startGraphic = null; } if (this.endGraphic) { this.endGraphic.remove(); this.endGraphic = null; } this.routeLayer.clear(); } clearReplayLayers() { this.pointLayer.clear(); this.routeLayer.clear(); } addTaxiReplayGraphic(points) { this.startGraphic = new mars3d.graphic.BillboardEntity({ position: points[0], style: { image: this.path + "img/start.png", scale: 1, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, clampToGround: true, }, }); this.pointLayer.addGraphic(this.startGraphic); this.endGraphic = new mars3d.graphic.BillboardEntity({ position: points[points.length - 1], style: { image: this.path + "img/end.png", scale: 1, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, clampToGround: true, }, }); this.pointLayer.addGraphic(this.endGraphic); let graphic = new mars3d.graphic.PolylineEntity({ positions: points, style: { width: 10, material: new mars3d.material.LineFlowMaterialProperty({ color: Cesium.Color.AQUA, image: "./img/textures/arrow2.png", repeat: new Cesium.Cartesian2(50, 1), speed: 40, //速度，建议取值范围1-100 }) }, }); this.routeLayer.addGraphic(graphic); this.routeLayer.flyTo(); } setSingleTaxiReplayData(datas) { mars3d.global_variables.singleTaxiReplayData = datas; } refreshDetailTable(tmpattr) { this.viewWindow.refreshDetailTable(tmpattr); } //初始化[仅执行1次] create() { this.gaodeRoute = new mars3d.query.GaodeRoute({ // key: ['ae29a37307840c7ae4a785ac905927e0'], }); this.gaodePOI = new mars3d.query.GaodePOI({ // key: ['ae29a37307840c7ae4a785ac905927e0'], }); //图层管理使用的分组 this.groupLayer = new mars3d.layer.GroupLayer({ name: this.config.name, pid: 50, //图层管理 中使用，父节点id }); //创建矢量数据图层 this.pointLayer = new mars3d.layer.GraphicLayer({ name: this.config.name + "-起止点", }); this.groupLayer.addLayer(this.pointLayer); //加入分组 this.routeLayer = new mars3d.layer.GraphicLayer({ name: this.config.name + "-路线", }); this.groupLayer.addLayer(this.routeLayer); //加入分组 } //每个窗口创建完成后调用 winCreateOK(opt, result) { this.viewWindow = result; this.appDateHourStart = mars3d.global_variables.queryDataTStart; this.appDateHourEnd = mars3d.global_variables.queryDataTEnd; this.nodejs_url_predix = mars3d.global_variables.nodejs_url_predix; this.taxi_sn = this.config.params; this.viewWindow.resetStartQueryTaxiDataText(this.taxi_sn); } //打开激活 activate() { this.map.addLayer(this.groupLayer); this.map.clock.shouldAnimate = false; this.old_map_clock_startTime = this.map.clock.startTime; this.old_map_clock_currentTime = this.map.clock.currentTime; this.old_map_clock_stopTime = this.map.clock.stopTime; this.old_map_clock_multiplier = this.map.clock.multiplier; mars3d.global_variables.is_single_taxi_replaying = true; } //关闭释放 disable() { this.map.clock.shouldAnimate = true; this.map.clock.startTime = this.old_map_clock_startTime; this.map.clock.currentTime = this.old_map_clock_currentTime; this.map.clock.stopTime = this.old_map_clock_stopTime; this.map.clock.multiplier = this.old_map_clock_multiplier; mars3d.global_variables.is_single_taxi_replaying = false; if (this.startGraphic) { this.startGraphic.remove(); this.startGraphic = null; } if (this.endGraphic) { this.endGraphic.remove(); this.endGraphic = null; } this.map.removeLayer(this.groupLayer); } //漫游自动结束 或点击 停止导航按钮 后，重置界面和操作 pauseReplay() { // 暂停回放 this.map.clock.shouldAnimate = false; } //取消当前的视角跟随 removeTrack() { if (this.nowFline) { this.nowFline.setCameraOptions({ type: "" }); } this.map.trackedEntity = undefined; } //==============开始导航=================== startDH() { //导航前释放之前的所有导航操作 this.map.clock.shouldAnimate = true; this.map.clock.startTime = Cesium.JulianDate.fromDate(new Date(this.appDateHourStart)); this.map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(this.appDateHourStart)); this.map.clock.stopTime = Cesium.JulianDate.fromDate(new Date(this.appDateHourEnd)); this.map.clock.multiplier = 2.0; } //============开始视角跟随============= startGS() { this.nowFline.setCameraOptions({ type: "gs", heading: 0, radius: 2500, }); } } //注册到widget管理器中。 mars3d.widget.bindClass(MyWidget); //每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。 })(window, mars3d);
