cesium统计3dtiles的属性信息并结合echarts绘制柱状图

功能介绍

对于多次使用此功能做的处理

myDraw(value) {
        let data = this.$3dtilesData.filter((item)=>{ // 判断传来的值之前是否使用过，在数据中有没有备份
          return item.url === value._tileset._url;
        })
        // 如果是第一次初始化
        if (data.length === 0){
          this.buildingHeight = [];
          this.buildingArea = [];
          this._tileset = value._tileset;
          this.url = value._tileset._url;
          this.getListener();
        }else {
          // 不是第一次初始化
          this.buildingHeight = [];
          this.buildingArea = [];
          this.featureNames = data[0].featureNames;
          this.url = data[0].url;
          this.setData(data[0].featureMap) // 将数据进行处理并存到组件相应的数组中
          this.drawMyHistogram(); // 对数组数据进行处理并绘图
        }
      },

提取3dtiles中每个tile的信息并存入Map中

getListener() {
        let that = this;
        this.myMaximumScreenSpaceError = this._tileset._maximumScreenSpaceError;
        this._tileset._maximumScreenSpaceError = 0;  // 这里是为了不用将视角放到模型数据的位置就能读取tile数据的信息，之后需要将这个属性值改为原来的值
        this._tileset.featureMap = new Map();
        this._tileset.tileLoad.addEventListener(function (tile) {
          let content = tile.content; // return Batched3DModel3DTileContent 
          if (content && content.featuresLength > 0) {
            const featuresLength = content.featuresLength;
            that.featureNames = content.getFeature(0).getPropertyNames() || content.getFeature(1).getPropertyNames(); // 读取tile的属性值的键
            for (let i = 0; i < featuresLength; ++i) {
              const feature = content.getFeature(i); // return Cesium3DTileFeature 
              let name = feature.getProperty('name') || feature.getProperty('id') || Date.parse(new Date());
              if (!that._tileset.featureMap.get(name)) {
                that._tileset.featureMap.set(name, feature);
              }
            }
            // console.log(that._tileset.featureMap)
          } else {
           // 这里写失败的操作
          }
          // 将数据存储进入全局中
          that.$3dtilesData.push({
            url: that.url,
            featureNames: that.featureNames,
            featureMap: that._tileset.featureMap
          });
          that.setOption();
          that.setData(that._tileset.featureMap);
          that.drawMyPieChart(that.featureNames);
        })
      },

信息读取后将配置属性还原来保持lod

   setOption() {
        this._tileset._maximumScreenSpaceError = this.myMaximumScreenSpaceError;
      },

将属性值加入组件中的数组中

setData(featureMap){
        for (let value of featureMap.values()) {
          let height = value.getProperty('HEIGHT') || 0;
          let area = value.getProperty('AREA') || 0;
          this.buildingHeight.push(height);
          this.buildingArea.push(area);
        }
      },

绘制柱状图

<div id="chartContainer" style="width:100%;height:100%;">
      <div class="myBarChart" ref="histogramChart"></div>
    </div>

draw3dtilesHistogram(xdata, ydata) {
        if (this._chart) {
          this._chart.dispose()
        }
        this._chart = this.$echarts.init(this.$refs.histogramChart);
        this.resize();
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: xdata,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'Value',
              type: 'bar',
              barWidth: '60%',
              data: ydata,
            }
          ]
        };
        this._chart.setOption(option);
      },

注意事项

1. 因为对于3dtiles的tileLoad属性有点不理解，导致在事件调用的时候发生出乎意料的错误，到现在还没有解决，所以想了一个别的方法，使用挂载在vue上的$3dtiles来进行数据的存储，这种办法并不好，但是项目比较急，就先做的这种处理。之后需要对tileLoad的事件监听深入学习。
2. 绘制柱状图那里卡了我一天，当时是不知道为什么使用官方的数据，连最基本的图都初始不了。后来才发现是获取dom节点的时候，使用的是getElementById(),在别的代码中有相同的id，导致一直不成功，踩了一个大坑。之后使用vue中的ref，好处是可以同时初始化多个图表也不会出错，如果使用id来获取dom节点的话，只能初始化一个图表。