• Mars3D三维可视化平台 是火星科技(opens new window)研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于Cesium(opens new window)优化提升与B/S架构设计
  • mars3D官方开发教程
  • Cesium中文网

  • Cesium实战系列总目录

    mars3D调用原生Cesium

    1. const Cesium = Mars3d.Cesium;

    滚轮缩放—矢量图同步缩放级别

  • style 中是否支持 scaleByDistance

  • NearFarScalar 对象，用于设置球在缩放时 Label 也同步缩放。其中第 4 个参数，为 0 时，远距离是看不见的。此参数非常重要；

    1. /*Billboard之间的距离在15000-20000之间的时候，Billboard的Scale比例按照1->0.3之间的插值来缩放*/
    2. scaleByDistance: new Cesium.NearFarScalar(15000, 1, 20000, 0.3),

    车辆模型移动追踪效果

  • 参考案例

  • 无人机飞行轨迹

  • 矢量数据 - Entity基础对象 - 点对象动态位置

    1. //更新被追踪车辆位置
    2. updateTrackingVehicleMarker(carGraphic, data) {
    3. if (carGraphic.attr.time < data.time) {
    4.   carGraphic.attr.time = data.time;
    6.   let newPosition = new mars3d.LatLngPoint(Number(data.lon), Number(data.lat), 1);
    7.   // 控制追踪车辆到新的坐标
    8.   carGraphic.addDynamicPosition(newPosition,1);
    9.   /*  追踪效果 trackedEntity*/ 
    10.   this.map.trackedEntity = carGraphic.entity;
    11.   this.map.flyToPoint(carGraphic.positionShow, {
    12.     radius: 200, // 距离目标点的距离
    13.     heading: 40,
    14.     pitch: -50,
    15.     duration:0
    16.   })
    17. }
    18. },

    可视化范围 getExtent()

    1. let extent = this.map.getExtent();
    2. let leftTop =     [extent.xmin,extent.ymax];
    3. let rightTop =  [extent.xmax,extent.ymax];
    4. let rightDown = [extent.xmax,extent.ymin];
    5. let leftDown =  [extent.xmin,extent.ymin];

  • 判断graphic是否在可视范围内

20210831182214214.png

  1. // 获取当前车辆的经度和维度，用于判断是否再当前屏幕范围内
  2. let lon = data.lon;
  3. let lat = data.lat;
  5.  // 找到了车辆，但没在屏幕范围，就移除车辆
  6. if(lon > extent.xmax || lon < extent.xmin || lat > extent.ymax || lat < extent.ymin) {
  7.      carGraphic.remove();
  8.      return;
  9. }

webgl渲染失败后，刷新页面

  1. // webgl渲染失败后，刷新页面
  2.  map.on(mars3d.EventType.renderError, async () => {
  3.     alert("程序内存消耗过大，请重启浏览器")
  4.     window.location.reload()
  5. })