跳到主要内容
版本：9.4.1

步骤十四、设备管理-路灯设备

先决条件​

授权

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

资源获取​

注意

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

步骤​

  • 设备管理中的路灯设备模块可以查看路灯设备状态信息。

1、添加飞行定位​

  • 注意，这里为了示意，只可以查看特定的路灯设备，所以先要飞行至该路灯处。
    viewLampDeviceMarker() {
      let self = this;
      let locations = [
        {
          center: [120.72972234736437, 31.28788940180162], // 飞行结束后的中心点坐标
          zoom: 20.791587499232204,    // 飞行结束后的地图层级
          bearing: 15.996875838980145, // 飞行结束后的地图方位角
          pitch: 71.92451688228758,    // 飞行结束后的地图倾斜角
          speed: 0.5, // 飞行速度
          curve: 1,// 随着飞行路径出现的缩放曲线，值为1时会出现圆周运动
        },
      ];
      this.changeViewers(locations);
    }
    笔记

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

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

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

    viewLampDeviceMarker() {
      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; // 获取对象名称
          // 如果名称是 lamp，则高亮模型并显示设备信息
          if (name === 'lamp') {
            // 模型轮廓效果
            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( 'lampInfo', './assets/images/device.png', '50px', '70px' ),
                // 标签位置
                position: [ 120.7289854143069, 31.28773088346361, 7.307616348151091],
              },
              {
                id: 'info_marker',
                // 创建作为标记的DOM元素
                element: self.createDeviceDom( 'lamp_popup', './assets/images/ui/info2.png', '186px', '174px' ),
                // 标签位置
                position: [120.72899263560224, 31.28773094876935, 7.307616348151091],
              },
            ];

            // 将标签添加到场景中
            let marker = modelLayer.addMarker({
              id: 'marker_lamp',
              data: datas,
            });
            self.markerData.push(marker);
          }
        }
      }
    }
笔记
  • 有关模型轮廓高亮的更多信息，请访问outlineModel。
  • 有关三维标签的更多信息，请访问addMarker。

3、调用方法​

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

5、查看效果​

  • 运行，查看效果。

    npm run dev
    show