步骤十三、设备管理-停车场设备

先决条件

授权

您需要先拥有一个授权码，授权码获取请参考授权申请。

资源获取

注意

场景中涉及到的图片、模型、第三方库、源码等资源，点击下载获取。

步骤

• 设备管理中的停车场设备模块可以查看地磁设备状态信息。

1、添加飞行定位

• 注意，这里为了示意，只可以查看特定的地磁设备，所以先要飞行至该地磁处。

  viewCarDeviceMarker() {
    let self = this;
    let locations = [
      {
        center: [120.72899158044368, 31.287906942314947], // 飞行结束后的中心点坐标
        zoom: 21.640175311136503, // 飞行结束后的地图层级
        bearing: 0, // 飞行结束后的地图方位角
        pitch: 67.42539555257444, // 飞行结束后的地图倾斜角
        speed: 0.7, // 飞行速度
        curve: 1, // 随着飞行路径出现的缩放曲线，值为1时会出现圆周运动
      },
    ];
    this.changeViewers(locations);
  }
  笔记

  有关飞行定位的更多信息，请访问flyTo。

2、添加地图点击监听事件

• 在 viewCarDeviceMarker 方法中添加地图点击监听事件。

  viewCarDeviceMarker() {
    let self = this;
    
    // ...省略飞行定位代码
  
    let modelLayer = this._layer;
    let modelGroup = this._group;
    // 为地图添加点击事件
    this._map.on('click', (e) => {
      if (modelLayer) {
        selectObj(e.point);
      }
    });
  
    // 定义点击事件
    function selectObj(point) {
      // 获取鼠标点击的模型
      let intersect = modelLayer.selectModel(point)[0];
  
      // 计算与摘取射线相交的物体
      if (intersect) {
        let nearestObject = intersect.object;
        let name = nearestObject.parent.name; // 获取对象名称
        // 如果名称是 dc001，则高亮模型并显示设备信息
        if (name === 'dc001') {
          // 模型轮廓效果
          modelLayer.outlineModel([modelGroup.children[0].children[12]], {
            scope: 'default',      // 模型轮廓范围
            edgeStrength: 3.0,     // 轮廓强度系数
            edgeGlow: 0.0,         // 轮廓发光稀释
            edgeColor: '#00C1FF',  // 轮廓颜色
            enableFillColor: true, // 轮廓内部是否填充
            fillColorOpacity: 0.2, // 轮廓内部填充颜色不透明度
          });
  
          // 添加设备标签
          let datas = [
            {
              id: 'arrow_marker',
              // 创建作为标记的DOM元素
              element: self.createDeviceDom( 'dc_marker', './assets/images/device.png', '50px', '70px' ),
              // 标签位置
              position: [ 120.7289854143069, 31.28773088346361, 7.307616348151091],
            },
            {
              id: 'info_marker',
              // 创建作为标记的DOM元素
              element: self.createDeviceDom( 'dc_popup', './assets/images/ui/info.png', '186px', '174px' ),
              // 标签位置
              position: [120.72899263560224, 31.28773094876935, 7.307616348151091],
            },
          ];
  
          // 将标签添加到场景中
          let marker = modelLayer.addMarker({
            id: 'marker_car',
            data: datas,
          });
          self.markerData.push(marker);
        }
      }
    }
  }

笔记

• 有关模型轮廓高亮的更多信息，请访问outlineModel。
• 有关三维标签的更多信息，请访问addMarker。

3、调用方法

• 将 LyBottom.vue 中关于 viewCarDeviceMarker 方法的注释去掉。

5、查看效果

• 运行，查看效果。

  npm run dev