步骤六、园区态势

先决条件

授权

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

资源获取

注意

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

步骤

• 园区态势的主要功能是查询园区内建筑和设备的属性信息，包括建筑入驻率、建筑楼层数、车位个数等。注意，这里为了示意，用的都是图片，可以自己改成动态的哦。

1、添加每帧绘制时调用的函数

• 在 Map.vue 文件的三维图层配置中，增加 funcRender参数。

  // 图层参数
  let options = {
    id: 'model_id',
    models: models_obj,
    outline: true, 
    type: 'model',
    center: [120.73014920373011, 31.287414975761724, 0.1],
    funcRender: function (gl, matrix) {
      if (modelLayer) {
        // 实时计算三维标签在场景中的位置
         modelLayer.renderMarker(gl, matrix);
      }
    },
    callback: function (group, layer) {
      // ...相关已有代码省略
    },
  };

2、添加入驻率标签

• 在 MapApi.js 文件中添加以下代码。

  // 企业入驻率标签
  addBuildMarker(datas, callback, glcallback) {
    let self = this;
    let modelLayer = this._layer;
  
    // 添加三维标签
    let buildMarker = modelLayer.addMarker({
      id: 'marker_building', // 三维标签id
      data: datas, // 三维标签数据
    });
  
    // 回调函数用于后续删除标签
    callback && callback(buildMarker);
  }
  笔记

  有关三维标签的更多信息，请访问addMarker。

3、添加建筑信息弹框

• 在 addBuildMarker 方法中添加以下代码。

  addBuildMarker(datas, callback, glcallback) {
    let self = this;
    let modelLayer = this._layer;
    let modelGroup = this._group;
  
    // ...省略添加入驻率标签代码
  
    // 一秒半后指定建筑高亮并显示信息弹框
    setTimeout(() => {
      // 飞行定位
      let locations = [
        {
          center: [120.72936795194528, 31.288789265001512],
          zoom: 18.210369573475237,
          bearing: 17.316502535111795,
          pitch: 68.42520029251081,
          speed: 0.2,
          curve: 1,
        },
      ];
      self.changeViewers(locations);
  
      // 模型轮廓效果
      modelLayer.outlineModel([modelGroup.children[0].children[1]], {
        scope: 'default',      // 模型轮廓范围
        edgeStrength: 3.0,     // 轮廓强度系数
        edgeGlow: 0.0,         // 轮廓发光稀释
        edgeColor: '#00C1FF',  // 轮廓颜色
        enableFillColor: true, // 轮廓内部是否填充
        fillColorOpacity: 0.2, // 轮廓内部填充颜色不透明度
      });
  
      // 建筑信息弹框
      let infoData = [
        {
          id: 'buildInfo',
          // 创建作为标记的DOM元素
          element: self.createDeviceDom( 'buildInfo', './assets/images/ui/enterprise_pop_up.png', '300px', '235px' ),
          position: [120.72951145062459, 31.2882915516911, 29.945361752049791],
        },
      ];
  
      // 将信息弹框添加到场景中
      let glMarker = modelLayer.addMarker({
        id: 'marker_gl',
        data: infoData,
      });
      glcallback && glcallback(glMarker);
    }, 1500);
  }
  
  // 创建作为标记的DOM元素
  createDeviceDom(id,imageUrl = './assets/images/device.png',w = '50px',h = '70px',name) {
    let container = document.createElement('div');
    container.setAttribute('id', id);
    container.className = name || 'markerDevice';
    container.style.width = w;
    container.style.height = h;
    container.style.backgroundImage = 'url(' + imageUrl + ')';
    container.style.backgroundRepeat = 'no-repeat';
    container.style.backgroundSize = '100% 100%';
    container.style.margin = '0px';
    container.style.backgroundPosition = 'center 0';
    return container;
  }

笔记

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

• 有高亮就有取消高亮，所以接下来我们要编写取消模型高亮的方法。

  // 取消模型高量
  removeBuildHighlight() {
    this._layer.unOutlineModel();
  }

4、调用方法

• 在 LyBottom.vue 中定义入驻率标签数据。

  var buildMarkerData = [
    {
      name: 'a',
      element: creatBuildMDom('入驻率：59%'),
      position: [120.73016788428845, 31.288121997558775, 40.124491065738916],
    },
    {
      name: 'b',
      element: creatBuildMDom('入驻率：66%'),
      position: [120.73009953932844, 31.288709048860824, 37.730181271240426],
    },
    // ……剩余数据省略，可以从源码中复制
  ];

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

5、查看效果

• 运行，查看效果。

  npm run dev