menu中添加轨迹回放

cshenfu

2022-10-24 33b59036029418865d21ddcea278c1e4900a848a

menu中添加轨迹回放

 .DS_Store

Binary files differ

 3dtiles/.DS_Store

Binary files differ

 config/widget.json

@@ -308,6 +308,7 @@
    },
    {
      "name": "轨迹回放",
      "group":"router",
      "uri": "widgetsTS/taxiRouteReplay/widget.js",
      "windowOptions": {
        "position": {
@@ -318,7 +319,19 @@
      },
      "autoDisable":false
    },

{
      "name": "轨迹回放",
      "group":"router",
      "uri": "widgetsTS/taxiRouteReplay2/widget.js",
      "windowOptions": {
        "position": {
          "top": 45,
          "bottom": 30,
          "left": 5
        }
      },
      "autoDisable":false
    },
    {
      "name": "打印",
      "uri": "widgets/print/widget.js",

 img/.DS_Store

Binary files differ

 js/function_1001.js

@@ -230,3 +230,12 @@
    $(".menu4-Wind").attr('onclick',"javascript:activateWidget('widgetsTS/windsetting/widget.js');javascript:$('#menu4Child').toggle()");  //$("#名称").attr("属性名","属性值");
  }
}

function timetype_change5(){ 
  // if(mars3d.global_variables.timetype == "min"){
  //   $(".menu5-Taxirouter").attr('onclick'," ");  //$("#名称").attr("属性名","属性值");
  //   haoutil.msg("请切换至天或时查看数据！！！");
  // }else{
    $(".menu5-Taxirouter").attr('onclick',"javascript:activateWidget('widgetsTS/taxiRouteReplay2/widget.js');javascript:$('#menu4Child').toggle()");  //$("#名称").attr("属性名","属性值");
  // }
}

 js/function_1004.js

@@ -36,7 +36,7 @@
}

function getTaxiListFromServerByUserId(tmpLayer) {
  debugger;
  // debugger;
  setTaxiLayerMapClock();
  $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_1004_list_by_userid&regionCode="+mars3d.global_variables.regionCode+"&userid=" + mars3d.global_variables.userid, (result) => {
    data_list_1004 = result.data.result;

 js/index.js

@@ -19,37 +19,37 @@
    request = $.extend(request, haoutil.system.getRequest(window.top));
  }

  try {
    var jwtstr = request.JWT;
    var strs_ = jwtstr.split('.');
    var jwt_header_ = new buffer.Buffer(strs_[0].toString('base64'), 'base64').toString();
    var jwt_payload_ = new buffer.Buffer(strs_[1].toString('base64'), 'base64').toString();
    var payload_ = JSON.parse(jwt_payload_);
    mars3d.global_variables.userid = payload_.userid;
    mars3d.global_variables.regionCode = payload_.divcode;
    var hash = CryptoJS.HmacSHA256(strs_[0] + '.' + strs_[1], "sxyd");
    var hashInBase64 = base64UrlEncode(hash);
  // try {
  //   var jwtstr = request.JWT;
  //   var strs_ = jwtstr.split('.');
  //   var jwt_header_ = new buffer.Buffer(strs_[0].toString('base64'), 'base64').toString();
  //   var jwt_payload_ = new buffer.Buffer(strs_[1].toString('base64'), 'base64').toString();
  //   var payload_ = JSON.parse(jwt_payload_);
  //   mars3d.global_variables.userid = payload_.userid;
  //   mars3d.global_variables.regionCode = payload_.divcode;
  //   var hash = CryptoJS.HmacSHA256(strs_[0] + '.' + strs_[1], "sxyd");
  //   var hashInBase64 = base64UrlEncode(hash);

    var reg = RegExp(strs_[2]);
    if (!reg.exec(hashInBase64)) {
      // verification failed, go back
      window.top.location = mars3d.global_variables.un_authorization_url;
    }
    payload_ = JSON.parse(jwt_payload_);
    if (!payload_ || !payload_.expires) {
      // verification error ,go back 
      window.top.location = mars3d.global_variables.un_authorization_url;
    }
    var date1 = new Date(payload_.expires);
    var date2 = new Date();
    if (date1 < date2) {
      // expire, go back
      window.top.location = mars3d.global_variables.un_authorization_url;
    }
  }
  catch (err) {
    window.top.location = mars3d.global_variables.un_authorization_url;
  }
  //   var reg = RegExp(strs_[2]);
  //   if (!reg.exec(hashInBase64)) {
  //     // verification failed, go back
  //     window.top.location = mars3d.global_variables.un_authorization_url;
  //   }
  //   payload_ = JSON.parse(jwt_payload_);
  //   if (!payload_ || !payload_.expires) {
  //     // verification error ,go back 
  //     window.top.location = mars3d.global_variables.un_authorization_url;
  //   }
  //   var date1 = new Date(payload_.expires);
  //   var date2 = new Date();
  //   if (date1 < date2) {
  //     // expire, go back
  //     window.top.location = mars3d.global_variables.un_authorization_url;
  //   }
  // }
  // catch (err) {
  //   window.top.location = mars3d.global_variables.un_authorization_url;
  // }

  mars3d.global_variables.userid = request?.userid || 2;
  regionCode = mars3d.global_variables.regionCode

 lib/.DS_Store

Binary files differ

 mobile/.DS_Store

Binary files differ

 mobile/index.html

@@ -129,7 +129,7 @@
      </form>
      <script>
        function DoAjax() {
          debugger;
          // debugger;
          $.ajax({
            type: "get",
            url: default_system_params.nodejs_url_predix+"dataapi/Bdata?bid=mobile_login",

 widgets/.DS_Store

Binary files differ

 widgetsTS/.DS_Store

Binary files differ

 widgetsTS/dataTime/widget.js

@@ -107,6 +107,7 @@
          timetype_change2();
          timetype_change3();
          timetype_change4();
          timetype_change5()
        }else if (value == 'day') {
          $('#current').text("天：");
          $('#appDateMin').hide()
@@ -126,6 +127,7 @@
          timetype_change2();
          timetype_change3();
          timetype_change4();
          timetype_change5()

        }else if(value = 'min'){ 
          $('#current').text("15分钟(车辆)：");
@@ -142,6 +144,7 @@
          timetype_change2();
          timetype_change3();
          timetype_change4();
          timetype_change5()
          // refreshWidgets();
        }
      });

 widgetsTS/logoAndMenu/view.html

@@ -26,6 +26,10 @@
        </ul> -->

        <ul id="menu4Child" class="menu4-ul">
            <li class="widget-btn menu5-Taxirouter"
                onclick=timetype_change5()>
                <i class="fa fa-gear"></i>轨迹查询
            </li>
            <li class="widget-btn menu4-Wind"
                onclick=timetype_change4()>
                <i class="fa fa-gear"></i>风场参数

 widgetsTS/taxiRouteReplay2/img/end.png

 widgetsTS/taxiRouteReplay2/img/start.png

 widgetsTS/taxiRouteReplay2/view.css

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/taxiRouteReplay2/view.html

New file
@@ -0,0 +1,112 @@
<!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>
  <script type="text/javascript" src="../../js/changable_params.js"></script>
  <script type="text/javascript" src="../../js/function_1001.js"></script>
  <script type="text/javascript" src="../../js/function_1004.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 class="nametd">车辆编号：</td>
      <td>
        <input type='text' class="form-control text" id='taxisn' name="taxisn" />
      </td>
    </tr>
    <tr>
      <td>
        <button type="button" id="startQueryTaxiData" class="btn btn-primary" style="width:130px;"><span
            id="startQueryTaxiDataText">轨迹查询</span></button>
      </td>
    </tr>
  </table>
  <div>
    
  </div>
  <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>
          <button type="button" id="btnSuspendDH" class="btn btn-primary" style="width:100px;"><span
              id="btnSuspendDHText">暂停回放</span></button>
        </td>
        <td>
          <button type="button" id="SprinkleQueryTaxiData" class="btn btn-primary" style="width:80px;"><span
              id="SprinkleQueryTaxiDataText">撒点显示</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">
      </tbody>
    </table>

  </div>
  <script src="view.js?time=20210803"></script>
</body>

</html>

 widgetsTS/taxiRouteReplay2/view.js

New file
@@ -0,0 +1,187 @@
"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));
  $("#taxisn").val(thisWidget.taxi_sn);

  $("#btnStartDH")
    .off("click")
    .on("click", function () {
      if ($("#btnStartDHText").text() == "开始回放") {
        thisWidget.startDH();
        // $("#btnStartDHText").text("停止回放");
        $("#checkbox_sjgs").show();
      } 
      // else {
      //   $("#btnStartDHText").text("开始回放");
      //   thisWidget.pauseReplay();
      // }
    });

    $("#btnSuspendDH")
    .off("click")
    .on("click", function () {
      if ($("#btnSuspendDHText").text() == "暂停回放") {
        thisWidget.pauseReplay();
        $("#btnSuspendDHText").text("继续回放");
        $("#checkbox_sjgs").show();
      } else {
        $("#btnSuspendDHText").text("暂停回放");
        thisWidget.ContinueReplay();
      }
    });

  $("#checkbox_sjgs")
    .off("click")
    .on("click", function () {
      var checked = $(this).prop("checked");
      if (checked) {
        thisWidget.startGS();
      } else {
        thisWidget.removeTrack();
      }
    });


  //开始查询轨迹
  $("#startQueryTaxiData").click(function () {
    console.log(thisWidget.taxi_sn,"汽车编号")
    haoutil.loading.show();
    thisWidget.appDateHourStart = $("#appDateHourStart").val()
    thisWidget.appDateHourEnd = $("#appDateHourEnd").val()
    if(!$("#taxisn").val() || $("#taxisn").val()=='') {$("#taxisn").val(thisWidget.taxi_sn)}
    let str = $("#taxisn").val()
    let time_1 = thisWidget.appDateHourStart
    let time_2 = thisWidget.appDateHourEnd
    console.log(str,time_1,time_2,"参数")
    $.getJSON(thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_1004_single_path&siteid=" + $("#taxisn").val(), {
    // $.getJSON(thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_1004_single_path&siteid=" + thisWidget.taxi_sn, {
      datatime1: thisWidget.appDateHourStart,
      datatime2: thisWidget.appDateHourEnd
    }, (result) => {
      console.log(result,"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("无查询记录，请更换查询条件！");
      }
    });
  });

  //开始撒点查询轨迹
  $("#SprinkleQueryTaxiData").click(function () {
    haoutil.loading.show();
    haoutil.loading.hide();
    thisWidget.clearReplayLayers();
    thisWidget.addTaxiPointInfoGraphic();
  });
}


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;
  tmpattr = changeNullAndundefinedToEmpty(tmpattr);
  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++;
    }
  }
  $("#indexTaxiContent").find("td:contains(Code)").text("编码");
  $("#indexTaxiContent").find("td:contains(datatime)").text("时间");
  $("#indexTaxiContent").find("td:contains(lon)").text("经度");
  $("#indexTaxiContent").find("td:contains(lat)").text("纬度");
  $("#indexTaxiContent").find("td:contains(speed)").text("车速");

  $("#indexTaxiContent").find("td:contains(pm25)").text("PM₂.₅");
  $("#indexTaxiContent").find("td:contains(pm10)").text("PM₁₀");
  $("#indexTaxiContent").find("td:contains(no2)").text("NO₂");
  $("#indexTaxiContent").find("td:contains(co)").text("CO");
  $("#indexTaxiContent").find("td:contains(nox)").text("NOₓ");
  $("#indexTaxiContent").find("td:contains(no)").text("NO");
}

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) {
  console.log(taxi,"taxi编号")
  $("#taxisn").val(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/taxiRouteReplay2/widget.js

New file
@@ -0,0 +1,306 @@
(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //弹窗配置
    get view() {
      return {
        type: "window",
        url: "view.html",
        windowOptions: {
          width: 350,
          height:500
        },
      };
    }
 
    reloadData(new_taxi_sn) {
      console.log(new_taxi_sn,"reload")
      
      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 Pointsdata = mars3d.global_variables.singleTaxiReplayData
      for (var i = 0, len = Pointsdata.length; i < len-1; i++) {
        var item = Pointsdata[i];
        var item2 = Pointsdata[i+1];
        var lng = Number(item["lon"]); //经度
        var lat = Number(item["lat"]); //纬度
        var lng2 = Number(item2["lon"]); //经度
        var lat2 = Number(item2["lat"]); //纬度
        var position = null;
        var position2 = null;
        if (lng && lat&&lng2&&lat2) {
          position = Cesium.Cartesian3.fromDegrees(lng, lat);
          position2 = Cesium.Cartesian3.fromDegrees(lng2, lat2);
        }
        item = changeNullAndundefinedToEmpty(item)
        // console.log(item,"路线item",item[this.qindex])
      let graphic = new mars3d.graphic.PolylineEntity({
        positions: [position,position2],
        style: {
          width: 10,
          material: new mars3d.material.LineFlowMaterialProperty({
            color:this.viewWindow.getLayerPointColorByQindexandValue(1004,this.qindex, item[this.qindex]),
            image: "./img/textures/arrow2.png",
            repeat: new Cesium.Cartesian2(1, 1),
            speed: 40, //速度，建议取值范围1-100
          })
        },
      });
      this.routeLayer.addGraphic(graphic);
      }
      // console.log(items,"items")
      // 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();
    }
 
    addTaxiPointInfoGraphic() {
        var Pointsdata = mars3d.global_variables.singleTaxiReplayData;
        for (var i = 0, len = Pointsdata.length; i < len-1; i++) {
          // var item = Pointsdata[i];
          // // var lng = Number(item["lon"]); //经度
          // // var lat = Number(item["lat"]); //纬度
          // // var position = null;
          // // if (lng && lat) {
          // //   position = Cesium.Cartesian3.fromDegrees(lng, lat);
          // // }
          // let keys = ["lon","lat"]
          // let array = []
          // Pointsdata.map(item => {
          //   array.push(keys.reduce((result, key) => ({ ...result, [key]: item[key] }), {}))
          // })
          // let points = []
          // array.map(item => {
          //   points.push(Object.values(item))
          // })
          // item = changeNullAndundefinedToEmpty(item)
          var item = Pointsdata[i];
          var item2 = Pointsdata[i+1];
          var lng = Number(item["lon"]); //经度
          var lat = Number(item["lat"]); //纬度
          var lng2 = Number(item2["lon"]); //经度
          var lat2 = Number(item2["lat"]); //纬度
          var position = null;
          var position2 = null;
          if (lng && lat&&lng2&&lat2) {
            position = Cesium.Cartesian3.fromDegrees(lng, lat);
            position2 = Cesium.Cartesian3.fromDegrees(lng2, lat2);
          }
          item = changeNullAndundefinedToEmpty(item)
          let color_value = this.viewWindow.getLayerPointColorByQindexandValue(1004,this.qindex, item[this.qindex]);
          //points[Pointsdata.length] = [lon,lat]
          var CorridorPrimitive = new mars3d.graphic.CorridorEntity({
            positions: [position,position2],
            style: {
              // length: 60.0,
              width: 10.0,
              height: 0,
              cornerType: Cesium.CornerType.BEVELED,
              // radius: 8.0,
              diffHeight: this.qindex == "co" ? 100 * item[this.qindex] :  10*item[this.qindex], //高度
              color:color_value,
              opacity: 1,
              // rotationDegree: 45,
              highlight: {
               opacity: 1
              }
            },
            item: item,
            popup:"编号：" +
            item["code"] +
            "<br />时间：" +
            item["datatime"] +
            "<br />车速：" +
            item["speed"] +
            "<table>" +
            "<tr><td>PM₂.₅：</td><td align= right>" + item["pm25"] + '&nbsp' + "</td><td>μg/m³</td></tr>" +
            "<tr><td>PM₁₀：</td><td align= right>" + item["pm10"] + '&nbsp' + "</td><td>μg/m³</td></tr>" +
            "<tr><td>NO：</td><td align= right>" + item["no"] + '&nbsp' + "</td><td>μg/m³</td></tr>" +
            "<tr><td>NO₂：</td><td align= right>" + item["no2"] + '&nbsp' + "</td><td>μg/m³</td></tr>" +
            "<tr><td>NOₓ: </td><td align= right>" + item["nox"] + '&nbsp' + "</td><td>μg/m³</td></tr>" +
            "<tr><td>CO：</td><td align= right>" + item["co"] + '&nbsp' + "</td><td>mg/m³</td></tr>" +
            "</table>" 
          });
          this.routeLayer.addGraphic(CorridorPrimitive);
        }
        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;
      console.log(this.config.params,"this.taxi_sn")
      this.appDateHourStart = mars3d.global_variables.queryDataTStartTaxi;
      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;
      this.qindex = mars3d.global_variables.style_selected;
    }
    //关闭释放
    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;
    }
 
    ContinueReplay() {
      // 继续回放
      this.map.clock.shouldAnimate = true;
    }
 
    //取消当前的视角跟随
    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);

 widgetsTS/taxi_layer/widget.js

@@ -105,7 +105,7 @@
            "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["code"] + "\")' ><span style='color:#ff00ff'>历史轨迹回放</span></a></p>";
        return html;
      });
      debugger;
      // debugger;
      $.getJSON("http://58.246.27.194:7012/dataapi/Bdata?bid=get_1004_list_by_userid&userid=2", (result) => {
        for (var i = 0, len = result.data.result.length; i < len; i++) {
          let item = result.data.result[i];