@mapgis/webclient-es6-mapboxgl/overlay/ElsCubeLayer.js

import mapboxgl from '@mapgis/mapbox-gl';
import '../core/Base';

/**
 * @class mapboxgl.zondy.CubeLayer
 * @category  时空立方体
 * @classdesc Cube图层
 * @param map - {Object} 地图
 * @param jsonData -{Object} 数据集
 * @param styleOptions -{Object} 样式参数。如：
 *        layerID - {string} 图层ID。<br>
 */
export class ElsCubeLayer {

  /**
   *
   * @param {Object} map
   * @param {Object} jsonData
   * @param {Object} Options
   */
  constructor(map, jsonData, options) {
    this.map = map;
    this.layers = [];

    this._prepareData(jsonData, options);
    this._createCubes(this.map, options.style);
  }

  /**
   * @function mapboxgl.zondy.ElsCubeLayer.prototype._prepareData
   * @description 针对原始数据进行数据处理，处理高程等信息
   */
  _prepareData(originData, options) {
    /* if(options.z) */
    for (var i = 0; i < 10; i++) {

      var layer = {
        "type": "FeatureCollection",
        "features": []
      };

      this._prepareLayerCubes(layer, originData, options.space, options.index, options.style);

      this.layers.push(layer);
    }

  }

  _prepareLayerCubes(layer, originData, spaceRange, indexRange, styleOption) {
    var item = {};

    originData.forEach(function (point) {
      var centerx = point.lng;
      var centery = point.lat;
      item.minx = centerx - styleOption.radio;
      item.maxx = centerx + styleOption.radio;
      item.miny = centery - styleOption.radio;
      item.maxy = centery + styleOption.radio;
    });

    layer.features.push(this._createCubeItem(item.minx, item.maxx, item.miny, item.maxy));
  }

  _createCubeItem(minx, maxx, miny, maxy, properties) {
    var feature = {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [minx, maxy],
            [maxx, maxy],
            [maxx, miny],
            [minx, miny],
            [minx, maxy]
          ]
        ]
      },
      "properties": properties
    };
    return feature;
  }

  _createCubes(map, style) {
    //this.layers.forEach(function (layer, index) {
    for (var index = 0; index < this.layers.length; index++) {
      var layer = this.layers[this.layers.length - index - 1];
      var sourceId = "TimeSpaceCubeSource" + index;
      var layerId = "ElsCubeLayer" + index;
      var color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);

      map.addSource(sourceId, {
        "type": "geojson",
        "data": layer
      });

      map.addLayer({
        "id": layerId, //id不同重复，否则只绘制一次
        "type": "fill-extrusion",
        "source": sourceId, //必须和上面的geojsonCollections一致
        "paint": {
          "fill-extrusion-color": color, //颜色
          "fill-extrusion-height": style.height, //['get', 'height'], //固定语法，获取属性值height的数值
          "fill-extrusion-base": style.baseheight * index, //基础高度，表示相对水平面的高度
          "fill-extrusion-opacity": 0.8 //透明度
          //"fill-extrusion-pattern":"si-main-3", //线的拉伸图片类型，一定要与对应的样式库的图片名字一一对应
          //"fill-extrusion-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
        }
      });


    }

  }

  _getRandomColor() {
    return (function (m, s, c) {
      return (c ? arguments.callee(m, s, c - 1) : '#') +
        s[m.floor(m.random() * 16)]
    })(Math, '0123456789abcdef', 5)
  }

}

mapboxgl.zondy.ElsCubeLayer = ElsCubeLayer;