skyversation-public
/
web_show_function_ui_mars3d


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
							<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars3d.cn " />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- 标题及搜索关键字 -->
    <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
    />

    <link rel="shortcut icon" type="image/x-icon" href="" />
    <title>实时动态轨迹路线 </title>

    <!--第三方lib-->
    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,font-awesome,bootstrap,bootstrap-table,layer,haoutil,turf,mars3d"
    ></script>

    <link href="css/style.css" rel="stylesheet" />
    <style>
      .fixed-table-container tbody .selected td {
        background-color: #3f4854a9;
      }
    </style>
  </head>

  <body class="dark">
    <!--加载前进行操作提示，优化用户体验-->
    <div id="mask" class="signmask" onclick="removeMask()"></div>

    <div id="mars3dContainer" class="mars3d-container"></div>

    <!-- 面板 -->
    <div id="logView" class="infoview infoview-right"></div>

    <!-- 车辆列表 -->
    <div class="infoview">
      <table id="tableCar"></table>
    </div>

    <script src="./js/common.js"></script>

    <script type="text/javascript">
      "use script"; //开发环境建议开启严格模式

      var map;
      var graphicLayer;

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {
          scene: {
            center: { lat: 31.773622, lng: 117.077444, alt: 5441, heading: 359, pitch: -57 },
          },
        });

        //创建三维地球场景
        map = new mars3d.Map("mars3dContainer", mapOptions);

        //演示数据的时间
        map.clock.currentTime = window.Cesium.JulianDate.fromDate(new Date("2020-11-25 10:10:00"));

        //加载车辆
        queryCarListApiData()
          .then(function (res) {
            showCarList(res.data);
          })
          .catch(function (e) {
            console.log("queryCarListApiData失败",e);
            haoutil.msg("查询信息失败");
          });
      }

      var colors = [
        "rgb(40, 40, 255)",
        "rgb(0, 88, 176)",
        "rgb(0, 128, 255)",
        "rgb(0, 217, 0)",
        "rgb(0, 151, 0)",
        "rgb(255, 199, 83)",
        "rgb(255, 144, 30)",
        "rgb(202, 101, 0)",
        "rgb(255, 0, 0)",
      ];

      // 访问car-list.json后端接口，取数据
      function queryCarListApiData() {
        return new Promise(function (resolve, reject) {
          $.ajax({
            url: "//data.mars3d.cn/file/apidemo/car-list.json",
            type: "get",
            dataType: "json",
            success: function (result) {
              resolve(result);
            },
            error: function (data) {
              reject(data);
            },
          });
        });
      }
      // 访问car-path.json后端接口，取数据
      function queryCarPathApiData() {
        return new Promise(function (resolve, reject) {
          $.ajax({
            url: "//data.mars3d.cn/file/apidemo/car-path.json",
            type: "get",
            dataType: "json",
            success: function (result) {
              resolve(result);
            },
            error: function (data) {
              reject(data);
            },
          });
        });
      }

      function showCarList(arr) {
        console.log("加载" + arr.length + "条");

        //创建矢量数据图层
        graphicLayer = new mars3d.layer.GraphicLayer();
        map.addLayer(graphicLayer);

        // 鼠标移入提示信息
        graphicLayer.bindTooltip(function (event) {
          var data = event.graphic.options;
          return "车辆编号：" + data.id + "<br />车牌号码：" + data.name;
        });

        //单击地图空白处
        map.on(mars3d.EventType.clickMap, function (event) {
          if (lastClickCar) {
            lastClickCar.removeShading("circle");
            lastClickCar = null;
          }
        });

        // 绑定点击事件
        graphicLayer.on(mars3d.EventType.click, (event, position) => {
          var car = event.graphic;
          console.log("单击了车辆", car);

          if (lastClickCar) {
            if (lastClickCar === car) {
              return;
            } //重复单击，跳出
            lastClickCar.removeShading("circle");
            lastClickCar = null;
          }

          car.addShading({
            type: "circle",
            materialType: mars3d.MaterialType.CircleWave,
            speed: 10,
            count: 3,
            gradient: 0.1,
            radius: 50,
            color: "#ffff00",
            opacity: 0.3,
            show: true,
          });
          lastClickCar = car;

          //视角定位下
          // car.flyToPoint({ radius: 1000 })
        });

        var lastClickCar;

        for (var i = 0, len = arr.length; i < len; i++) {
          var item = arr[i];

          item.show = true;

          var modelParam;
          switch (item.type) {
            default:
            case 1:
              modelParam = {
                scale: 2,
                url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb",
              };
              break;
            case 2:
              modelParam = {
                scale: 1,
                url: "//data.mars3d.cn/gltf/mars/car/wajueji.glb",
              };
              break;
          }

          const car = new mars3d.graphic.DynamicRoamLine({
            id: item.id,
            name: item.name,
            model: {
              clampToGround: true,
              show: true,
              ...modelParam,
            },
            shadow: [
              {
                type: "polyline",
                color: colors[i],
                width: 2,
                clampToGround: true,
                maxDistance: 500,
                show: true,
              },
            ],
          });
          graphicLayer.addGraphic(car);
        }

        tabInit(arr);

        // 定时获取卡车和铲车的列表数据
        this.createPath();
      }

      //取轨迹数据的时间间隔（单位：秒）
      var timeStep = 10;

      //首次获取并创建轨迹
      function createPath() {
        //取数据的时间范围，结束时间
        var date = Cesium.JulianDate.toDate(map.clock.currentTime);
        var endTime = date.format("yyyy-MM-dd HH:mm:ss");

        // 修改当前时间回退一分钟，因为数据永远是当前时间之前的。
        date.setSeconds(date.getSeconds() - 60);
        map.clock.currentTime = window.Cesium.JulianDate.fromDate(date);

        //取数据的时间范围，开始时间
        date.setMinutes(date.getMinutes() - 10); // 初次取一定时间内的数据
        var beginTime = date.format("yyyy-MM-dd HH:mm:ss");

        //记录最后一次读取数据的时间
        this.lastTime = endTime;

        //取数据
        getPathList(beginTime, endTime);

        //定时更新
        this.intervalGetData = setInterval(() => {
          this.updatePath();
        }, timeStep * 1000);
      }

      //后续更新轨迹
      function updatePath() {
        var beginTime = this.lastTime;

        var date = new Date(beginTime);
        date.setSeconds(date.getSeconds() + timeStep);
        var endTime = date.format("yyyy-MM-dd HH:mm:ss");

        this.lastTime = endTime;

        //取数据
        getPathList(beginTime, endTime);
      }

      //读取车辆gps坐标路径的接口
      function getPathList(beginTime, endTime) {
        queryCarPathApiData()
          .then(function (res) {
            var listALL = res.data || [];

            //因为读取静态json，为了演示动态，筛选数据内符合时间范围内的数据。
            //真实接口中可以注释下面代码。
            var d_beginTime = new Date(beginTime);
            var d_endTime = new Date(endTime);
            var list = listALL.filter((item) => {
              var thistime = new Date(item.time);
              return thistime >= d_beginTime && thistime <= d_endTime;
            });
            //真实接口中可以注释上面代码。

            addLog(`${endTime} 获取到 ${list.length} 条GPS坐标记录`);

            //循环车辆
            graphicLayer.eachGraphic((car) => {
              //取出对应车辆的轨迹列表
              var path = list.filter((item) => {
                return item.id === car.id;
              });

              if (path && path.length > 0) {
                //更新车辆的轨迹
                car.updatePath(path, {
                  timeColumn: "time",
                  getPosition: function (item) {
                    return Cesium.Cartesian3.fromDegrees(parseFloat(item.lon), parseFloat(item.lat), 0);
                  },
                });
                //addLog(`${car.id} 更新 ${path.length} 条轨迹记录`)
              }
            });
          })
          .catch(function () {
            haoutil.msg("实时查询气象信息失败，请稍候再试");
          });
      }

      function addLog(log) {
        console.log(log);

        var logView = $("#logView");
        var oldhtml = logView.html();
        if (oldhtml.length < 500) {
          logView.html(oldhtml + log + "<br />");
        } else {
          logView.html(log + "<br />");
        }
      }

      //==================================================
      function tabInit(data) {
        $("#tableCar").bootstrapTable({
          data: data,
          pagination: false,
          singleSelect: false,
          checkboxHeader: false,
          columns: [
            {
              title: "是否显示",
              field: "show",
              align: "center",
              checkbox: true,
              width: 50,
            },
            {
              title: "序号",
              sortable: true,
              editable: false,
              align: "left",
              formatter: function (value, row, index) {
                return index + 1;
              },
            },
            {
              field: "name",
              title: "车牌号",
            },
            {
              field: "type",
              title: "类型",
              formatter: function (value, row, index) {
                if (value == 1) {
                  return "土方车";
                } else if (value == 2) {
                  return "挖掘机";
                }
                return "";
              },
            },
          ],
          //定位车辆区域
          onClickRow: function (row) {
            let car = graphicLayer.getGraphicById(row.id);
            if (car) {
              car.flyToPoint({ radius: 900 });
            }
          },
          //勾选隐藏车辆
          onCheck: function (row) {
            let car = graphicLayer.getGraphicById(row.id);
            if (car) {
              car.show = true;
            }
          },
          //取消勾选显示车辆
          onUncheck: function (row) {
            let car = graphicLayer.getGraphicById(row.id);
            if (car) {
              car.show = false;
            }
          },
        });
      }
    </script>
  </body>
</html>