增加车辆列表

zhaoxing

2023-07-27 bd1570a6852a12f18617ab5284867ed897fa891e

增加车辆列表

 cars.html

New file
@@ -0,0 +1,58 @@
<!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="火星科技 MarsGIS" />
    <!-- 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" />

    <!--第三方lib-->
    <script
      type="text/javascript"
      src="lib/include-lib.js?time=20210803"
      libpath="lib/"
      include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,localforage,nprogress,toastr,admui,turf,mars3d,mars3d-widget,mars3d-wind"
    ></script>
    <link href="css/style.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 class="dark">
    <div id="centerDiv">
      <div id="mars3dContainer" class="mars3d-container"></div>
    </div>

    <div id="mask" class="signmask"></div>

    <!--业务代码-->
    <script src="js/buffer.603.js"></script>
    <script src="js/hmac-sha256.js"></script>
    <script src="js/enc-base64-min.js"></script>    
    <script src="js/changable_params.js"></script>
    <script src="js/function_1001.js"></script>
    <script src="js/function_1004.js"></script>
    <script src="js/function_wind.js"></script>
    <script src="js/function.js"></script>
    <script src="js/server.js"></script>
    <script src="js/indexM.js"></script>
  </body>
</html>

 config/configM.json

New file
@@ -0,0 +1,140 @@
{
  "map3d": {
    "templateValues": {
      "dataServer": "//data.mars3d.cn",
      "gltfServerUrl": "//data.mars3d.cn/gltf"
    },
    "scene": {
      "center": {"lat":30.688954,"lng":121.481242,"alt":49845,"heading":359,"pitch":-40},
      "scene3DOnly": false,
      "shadows": false,
      "removeDblClick": true,
      "sceneMode": 3,
      "showSun": true,
      "showMoon": true,
      "showSkyBox": true,
      "showSkyAtmosphere": true,
      "fog": true,
      "fxaa": true,
      "globe": {
        "depthTestAgainstTerrain": false,
        "baseColor": "#546a53",
        "showGroundAtmosphere": true,
        "enableLighting": false
      },
      "cameraController": {
        "zoomFactor": 3.0,
        "minimumZoomDistance": 1,
        "maximumZoomDistance": 50000000,
        "enableRotate": true,
        "enableTranslate": true,
        "enableTilt": true,
        "enableZoom": true,
        "enableCollisionDetection": true,
        "minimumCollisionTerrainHeight": 15000
      }
    },
    "control": {
      "homeButton": false,
      "baseLayerPicker": false,
      "sceneModePicker": false,
      "vrButton": false,
      "fullscreenButton": true,
      "navigationHelpButton": false,
      "animation": true,
      "timeline": false,
      "infoBox": false,
      "geocoder": false,
      "geocoderConfig": { "key": ["ae29a37307840c7ae4a785ac905927e0"] },
      "selectionIndicator": false,
      "defaultContextMenu": true,
      "mouseDownView": true,
      "compass": { "bottom": "270px", "right": "5px" },
      "distanceLegend": { "left": "150px", "bottom": "2px" },
      "locationBar": {
        "fps": false,
        "crs": "CGCS2000_GK_Zone_3",
        "crsDecimal": 0,
        "template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div>视高：{cameraHeight}米</div>"
      }
    },
    "terrain": {
      "url": "{dataServer}/terrain",
      "show": false
    },
    "basemaps": [
      { "id": 10, "name": "地图底图", "type": "group" },
      {
        "id": 2021,
        "pid": 10,
        "name": "天地图影像",
        "icon": "img/basemaps/tdt_img.png",
        "type": "group",
        "layers": [
          { "name": "底图", "type": "tdt", "layer": "img_d", "key": ["51915011aa0997aa2ddd7e38504fa8bc"] }
        ],
        "show":true
      },
      {
        "pid": 10,
        "name": "天地图电子",
        "icon": "img/basemaps/tdt_vec.png",
        "type": "group",
        "layers": [
          { 
            "name": "底图", 
            "type": "tdt", 
            "layer": "vec_d",
            "key": ["51915011aa0997aa2ddd7e38504fa8bc"] 
          }
        ],
        "zIndex": 0
      },
      {
        "pid": 10,
        "name": "黑色底图",
        "icon": "img/basemaps/bd-c-dark.png",
        "type": "group",
        "layers": [
          { 
            "name": "底图", 
            "type": "tdt", 
            "layer": "vec_d", 
            "brightness": 0.3,
            "contrast": 1.8,
            "gamma": 1,
            "hue": 0,
            "saturation": 0,
            "key": ["51915011aa0997aa2ddd7e38504fa8bc"] 
          }
        ],
        "zIndex": 0
      }
    ],
    "layers": [
      { "id": 50, "name": "辅助图层", "type": "group" },
      {
        "pid": 50,
        "name": "行政区划界线",
        "type": "xyz",
        "url": "https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=51915011aa0997aa2ddd7e38504fa8bc",
        "subdomains": "01234567",
        "maximumLevel": 10,
        "mapSplit": false,
        "show": true
      },
      {
        "pid": 50,
        "name": "高德实时路况",
        "type": "gaode",
        "layer": "time",
        "minimumTerrainLevel": 4,
        "minimumLevel": 4,
        "proxy": "//server.mars3d.cn/proxy/",
        "mapSplit": false
      },    
      { "id": 99, "name": "数据图层", "type": "group" },
      { "id": 1006, "pid": 99, "name": "监测区域", "type": "group" }
    ]
  }
}

 config/widgetM.json

New file
@@ -0,0 +1,328 @@
{
  "version": "20210803",
  "defaultOptions": {
    "style": "dark",
    "windowOptions": {
      "skin": "layer-mars-dialog animation-scale-up",
      "position": {
        "top": 50,
        "right": 10
      },
      "maxmin": false,
      "resize": true
    },
    "autoReset": false,
    "autoDisable": true,
    "disableOther": true
  },
  "openAtStart": [
    {
      "name": "放大缩小按钮",
      "uri": "widgets/toolButton/zoom.js"
    }
  ],
  "widgets": [
    {
      "name": "监控总览",
      "uri": "widgetsTS/widget_summary/widget.js"
    },
    {
      "name": "分类查询",
      "uri": "widgetsTS/widget_search/widget.js"
    },
    {
      "name": "监控详情",
      "uri": "widgetsTS/widget_detail/widget.js"
    },
    {
      "name": "模板-iframe弹窗",
      "uri": "widgets/_example/widget.js",
      "windowOptions": {
        "width": 300,
        "height": 400,
        "position": {
          "bottom": 10,
          "right": 10
        },
        "maxmin": true,
        "resize": true
      },
      "autoDisable": false,
      "disableOther": false,
      "openAtStart": false
    },
    {
      "name": "模板-div弹窗",
      "uri": "widgets/_example_divwin/widget.js"
    },
    {
      "name": "模板-2个弹窗",
      "uri": "widgets/_example_2win/widget.js"
    },
    {
      "name": "模板-append模板",
      "uri": "widgets/_example_append/widget.js"
    },

    {
      "name": "地图切换",
      "uri": "widgets/manageBasemaps/widget.js",
      "group": "forlayer",
      "autoDisable": false,
      "disableOther": false,
      "windowOptions": {
        "position": {
          "top": 70,
          "right": 60
        }
      }
    },
    {
      "name": "图层管理",
      "uri": "widgets/manageLayers/widget.js",
      "group": "forlayer",
      "autoCenter": true,
      "windowOptions": {
        "position": {
          "top": 50,
          "bottom": 30,
          "right": 10
        }
      },
      "css": {
        "max-width": "300px"
      },
      "autoDisable": false,
      "disableOther": false
    },
    {
      "name": "图层管理New",
      "uri": "widgets/manageLayers_style/widget.js",
      "group": "forlayer",
      "autoCenter": true,
      "windowOptions": {
        "position": {
          "top": 70,
          "bottom": 30,
          "right": 60
        }
      },
      "css": {
        "max-width": "300px"
      },
      "autoDisable": false,
      "disableOther": false
    },
    {
      "name": "剖面分析图表",
      "uri": "widgets/measureChars/widget.js",
      "windowOptions": {
        "noTitle": true,
        "maxmin": false,
        "position": {
          "bottom": 30,
          "left": 30,
          "right": 60
        }
      },
      "disableOther": false
    },
    {
      "name": "视角书签",
      "uri": "widgets/bookmark/widget.js",
      "windowOptions": {
        "position": {
          "top": 50,
          "bottom": 30,
          "right": 10
        }
      }
    },
    {
      "name": "漫游路线设置",
      "uri": "widgets/roamLine/widget.js",
      "windowOptions": {
        "position": {
          "top": 45,
          "bottom": 30,
          "right": 5
        }
      }
    },
    {
      "name": "漫游路线",
      "uri": "widgets/roamFly/widget.js",
      "windowOptions": {
        "position": {
          "bottom": 60,
          "right": 5
        }
      }
    },
    {
      "name": "路线剖面",
      "uri": "widgets/roamChars/widget.js",
      "windowOptions": {
        "noTitle": true,
        "position": {
          "top": 10,
          "left": 10,
          "right": 10
        }
      },
      "disableOther": false
    },
    {
      "name": "卷帘对比",
      "uri": "widgets/mapSplit/widget.js",
      "group": "mapCompare",
      "autoDisable": false,
      "disableOther": false
    },
    {
      "name": "双屏对比",
      "uri": "widgets/mapCompare/widget.js",
      "autoDisable": false,
      "disableOther": false,
      "group": "mapCompare",
      "windowOptions": {
        "position": {
          "top": 160,
          "bottom": 40,
          "left": 10
        },
        "maxmin": true
      }
    },
    {
      "name": "百度街景",
      "uri": "widgets/streetscape/widget.js",
      "autoDisable": false,
      "disableOther": false,
      "group": "mapCompare",
      "windowOptions": {
        "position": {
          "top": 160,
          "bottom": 40,
          "left": 10
        },
        "maxmin": true
      }
    },
    {
      "name": "标绘",
      "uri": "widgets/plot/widget.js",
      "windowOptions": {
        "position": {
          "top": 45,
          "bottom": 30,
          "right": 5
        }
      },
      "openAtStart": false
    },
    {
      "name": "模型库",
      "uri": "widgets/plot-model/widget.js",
      "windowOptions": {
        "position": {
          "top": 45,
          "bottom": 30,
          "right": 5
        }
      }
    },
    {
      "name": "分组名称编辑",
      "uri": "widgets/plotGroupName/widget.js",
      "windowOptions": {
        "position": "t"
      },
      "disableOther": false
    },
    {
      "name": "属性编辑",
      "uri": "widgets/plotAttr/widget.js",
      "windowOptions": {
        "position": {
          "top": 60,
          "bottom": 30,
          "left": 10
        }
      },
      "disableOther": false
    },
    {
      "name": "路线导航",
      "uri": "widgets/queryRoute/widget.js",
      "windowOptions": {
        "position": {
          "top": 45,
          "bottom": 30,
          "right": 5
        }
      }
    },
    {
      "name": "轨迹回放",
      "group":"router",
      "uri": "widgetsTS/taxiRouteReplay/widget.js",
      "windowOptions": {
        "position": {
          "top": 45,
          "bottom": 30,
          "right": 5
        }
      },
      "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",
      "autoDisable": false,
      "disableOther": false
    },
    {
      "name": "风场参数",
      "uri": "widgetsTS/windsetting/widget.js",
      "autoDisable":false,
      "windowOptions": {
        "position": {
          "top": 185,
          "left": 5
        }
      }
    },
    {
      "name": "监控网格",
      "uri": "widgetsTS/widget_grid/widget.js",
      "autoDisable":false,
      "windowOptions": {
        "position": {
          "top": 185,
          "left": 5
        }
      }
    },
    {
      "name": "地图图例",
      "uri": "widgetsTS/tuglie/widget.js",
      "autoDisable":false
      
    }

  ]
}

 js/indexM.js

New file
@@ -0,0 +1,281 @@
"use script"; //开发环境建议开启严格模式
//系统主入口
 
var map; //地球对象
var request; //传入的get参数
var geoJsonLayer;
 
//地图
$(document).ready(function () {
  //判断webgl支持
  if (!mars3d.Util.webglreport()) {
    mars3d.Util.webglerror();
  }
 
  //记录url传入参数
  request = haoutil.system.getRequest();
  if (window.top) {
    //有父级
    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);
 
  //   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;
  // }
 
  if(!mars3d.global_variables.userid) {
    mars3d.global_variables.userid = 2;
  }
  regionCode = mars3d.global_variables.regionCode
 
  var configfile = "config/configM.json"; //默认地址
  if (request.config) {
    //url传入地址
    configfile = request.config;
  }
 
  haoutil.loading.show();
 
  $.ajax({
    type: "get",
    dataType: "json",
    url: configfile,
    timeout: 0,
    success: function (data) {
      haoutil.loading.hide();
 
      //构建地图
      initMap(data.map3d);
 
      setTimeout(removeMask, 3000); //欢迎UI关闭处理
    },
    error: function (request, textStatus) {
      removeMask();
      haoutil.loading.hide();
      haoutil.alert("1.请检查文件内 json 语法是否存在问题。<br />2.请在浏览器输入文件url测试是否可以访问。", configfile + " 文件加载失败");
      console.log(textStatus, request);
    },
  });
 
  initUI();
});
 
function removeMask() {
  $("#mask").remove();
}
 
//UI界面相关
function initUI() {
  haoutil.oneMsg("首次访问系统无缓存会略慢，请耐心等待！", "load3d_tip");
}
 
//初始化地图
function initMap(mapOptions) {
  //合并属性参数，可覆盖config.json中的对应配置
  // mapOptions = mars3d.Util.merge(mapOptions, {})
 
  //创建三维地球场景
  map = new mars3d.Map("mars3dContainer", mapOptions);
 
 
  //构造widget
  initWidget(map);
 
  initLayersByUserid();
 
 
  //如果有xyz传参，进行定位
  if (haoutil.isutil.isNotNull(request.x) && haoutil.isutil.isNotNull(request.y)) {
    map.setCameraView(request, { duration: 0, isWgs84: true });
  }
 
  //开场动画
  //map.openFlyAnimation();
 
  //针对不同终端的优化配置
  if (haoutil.system.isPCBroswer()) {
    // Cesium 1.61以后会默认关闭反走样，对于桌面端而言还是开启得好，
    map.scene.postProcessStages.fxaa.enabled = true;
 
    //鼠标滚轮放大的步长参数
    map.scene.screenSpaceCameraController._zoomFactor = 2.0;
 
    //IE浏览器优化
    if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
      map.viewer.targetFrameRate = 20; //限制帧率
      map.viewer.requestRenderMode = true; //取消实时渲染
    }
  } else {
    //鼠标滚轮放大的步长参数
    map.scene.screenSpaceCameraController._zoomFactor = 5.0;
 
    //移动设备上禁掉以下几个选项，可以相对更加流畅
    map.viewer.requestRenderMode = true; //取消实时渲染
    map.scene.fog.enabled = false;
    map.scene.skyAtmosphere.show = false;
    map.scene.globe.showGroundAtmosphere = false;
  }
 
  //二三维切换不用动画
  if (map.sceneModePicker) {
    map.sceneModePicker.viewModel.duration = 0.0;
  }
 
  //webgl渲染失败后，刷新页面
  // map.on(mars3d.EventType.renderError, function (scene, error) {
  //   window.location.reload();
  // });
 
  //绑定单击显示BIM的构件树
  bindShowTilesParts();
 
  //下面可以继续加项目相关的其他代码
}
 
//初始化widget相关
function initWidget(map) {
  haoutil.loading.show();
 
  $.ajax({
    type: "get",
    dataType: "json",
    url: "config/widgetM.json",
    timeout: 0,
    success: function (widgetCfg) {
      haoutil.loading.hide();
 
      //url如果有传参时的处理
      if (haoutil.isutil.isNotNull(request.widget)) {
        if (request.onlyStart) {
          widgetCfg.openAtStart = [];
        }
        widgetCfg.openAtStart.push({
          uri: request.widget,
          name: request.name || "",
          windowOptions: {
            closeBtn: !request.onlyStart,
          },
          request: request,
        });
        map.flyHome({ duration: 0 });
      }
 
      //初始化widget管理器
      mars3d.widget.init(map, widgetCfg, "./"); //tip: 第3个参数支持定义widget目录的相对路径。
 
      if (window.lastWidgetItem) {
        activateWidget(lastWidgetItem);
        lastWidgetItem = null;
      }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      haoutil.loading.hide();
      haoutil.alert("config/widget.json文件加载失败！");
    },
  });
 
  //widget相关事件监听
  // mars3d.widget.on(mars3d.widget.EventType.load, function (event) {
  //     console.log("引入加载了widget的js", event);
  // })
  // mars3d.widget.on(mars3d.widget.EventType.beforeCreate, function (event) {
  //     console.log("不创建widet", event);
  // }) 
 
  mars3d.widget.on(mars3d.widget.EventType.activated, function (event) {
    console.log("激活了widget", event);
  });
  mars3d.widget.on(mars3d.widget.EventType.disabled, function (event) {
    console.log("释放了widget", event);
  });
}
 
//bim构件的处理
function bindShowTilesParts() {
  //单击地图事件
  map.on(mars3d.EventType.clickGraphic, function (event) {
    if (!(event.pickedObject instanceof Cesium.Cesium3DTileFeature)) {
      //不是BIM数据时跳出
      return;
    }
 
    let layer = event.layer;
    if (!layer.options.scenetree) {
      //未配置scenetree时跳出
      return;
    }
 
    var tilesParts = "widgets/tilesParts/widget.js";
 
    if (mars3d.widget.isActivate(tilesParts)) {
      var parts = mars3d.widget.getClass(tilesParts);
      if (parts.config.layerCfg == layer.options) {
        //当前已激活,并且单击了相同模型时跳出
        return;
      }
    }
 
    mars3d.widget.activate({
      name: layer.name + " 构件",
      uri: tilesParts,
      layerCfg: layer.options,
      disableOther: false,
    });
  });
}
 
//外部页面调用
var lastWidgetItem;
function activateWidget(item) {
  if (!map) {
    lastWidgetItem = item;
    return;
  }
  mars3d.widget.activate(item);
}
function disableWidget(item) {
  mars3d.widget.disable(item);
}
function activateFunByMenu(fun) {
  eval(fun);
}
 
function goHome() {
  mars3d.widget.disableAll();
  map.flyHome();
}
 
function base64UrlEncode(str) {
  var encodedSource = CryptoJS.enc.Base64.stringify(str);
  var reg = new RegExp('/', 'g');
  encodedSource = encodedSource.replace(/=+$/,'').replace(/\+/g,'-').replace(reg,'_');
  return encodedSource;
}

 mobile/cars.html

@@ -34,7 +34,7 @@
        </div>

        <div class="main">
            aa
            <iframe src="../cars.html" width="100%" height="100%" iframeborder="0"></iframe>
        </div>

        <div class="footbar">