登录 注册

认识 deck.gl

本贴最后更新于 1591 天前，其中的信息可能已经时移世异

认识 deck.gl

来自官方的解释:

deck.gl 的设计目的是简化大数据集的可视化。它使用户能够通过现有层的组合以有限的努力快速获得令人印象深刻的可视化结果，同时为将基于 WebGL 的高级可视化打包为可重用的 JavaScript 层提供了完整的体系结构。

简要概述:

deck.gl 的基本思想是渲染层的叠加 , 通常是渲染在地图上,但不总是;

deck.gl 面对的机遇与挑战:

  1. 处理大数据集和性能更新优化;
  2. 交互式处理 例如拾取事件(picking);
  3. 地图投影和与基础地图的集成;
  4. 经过验证的、经过良好测试的层的目录;
  5. 易于创建新层或自定义现有层.

生态系统:

deck.gl 是 vis.gl 框架的主要框架之一;与许多框架进行并行开发,如下;

  • luma.gl - 一个通用的 WebGL 库，旨在与原始的 WebGL API 和其他 WebGL 库(尽可能)互操作。特别是 , luma.gl 不声明 WebGL 上下文的所有权，并且可以使用任何提供的上下文，包括应用程序或其他 WebGL 库创建的上下文;
  • react-map-gl - 一个 React 包装周围的 Mapbox GL 与 deck.gl 无缝工作(通俗点说就是 mapbox-gl 的 react 版本);
  • nebula.gl - 一个有着高性能的 deck.gl 的编辑框架;

如何使用:

  1. 安装: npm install deck.gl --save

  2. 也可以直接下载官方栗子:

    git clone git@github.com:uber/deck.gl.git

    cd deck.gl/examples/...(你想看的栗子目录下)

    npm install

    npm start ---- (运行)

    这样栗子就运行起来啦!!!

纯 js 使用 deck.gl:

  • deck.gl 的核心库和层对 React 或 Mapbox gl 没有依赖关系，可以被任何 JavaScript 应用程序使用。
  • import {Deck} from '@deck.gl/core'; // 引入deck的核心模块
import {GeoJsonLayer} from '@deck.gl/layers'; // 引入需要显示的层,有很多层,后续讲到

// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const GEOJSON =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson'; // 要展示的数据

const INITIAL_VIEW_STATE = {
  latitude: 40, // 经度
  longitude: -100, // 纬度
  zoom: 3, // 缩放级别
  bearing: 30, // 轴承指数
  pitch: 30 // 倾斜角度 0 - 90
};

export const deck = new Deck({
  width: '100%', // 设置deck范围
  height: '100%', // 高
  initialViewState: INITIAL_VIEW_STATE, // 定义初始化页面的deck在地图上的位置,视角
  controller: true, // 将控制器打开
  layers: [ // 需要显示的层
    new GeoJsonLayer({ // 将显示的层new出实例
      data: GEOJSON, // 展示的数据
      stroked: true, // 线
      filled: true, // 填充
      lineWidthMinPixels: 2, // 线的最小宽度
      opacity: 0.4, // 线的透明度
      getLineColor: () => [255, 100, 100], // 设置线的颜色
      getFillColor: () => [200, 160, 0, 180] // 设置填充的颜色
    })
  ]
});

// For automated test cases
/* global document */
document.body.style.margin = '0px';
​

@deck.gl/core 是 deck 的一个子模块 , 不包含任何响应依赖项的 gl.

  • 上面的代码实例就是使用一个纯 js 的 deck.gl 模块库的完整示例. es6 的写法;

  • 在 script 中如何引入?

    不仅要引入 deck.gl,而且还要引入 mapbox-gl 的 js 和 css 文件

    
​

结合 React 使用:

这也是官方推荐使用的方式;

虽然不是直接基于 React, deck.gl 从头设计到使用基于 React 的应用程序。deck.gl 层自然适合 React 的组件渲染流和基于 flux/redux 的应用。当您重新运行您的正常 JSX 或 React 组件时，gl 层将被高效地重新加载。

  • 结合 React 使用 Deck.gl，只需导入 DeckGL React 组件，并将其作为另一个组件的子组件呈现，然后传入 deck 列表。deck.gl 层作为属性。

  • /// app.js
import React from 'react'; // 结合React使用,先引入React
import DeckGL, {LineLayer} from 'deck.gl'; // 引入DeckGL 和需要使用的层

// Viewport settings
// 初始化的页面角度位置
const viewState = {
  longitude: -122.41669, // 经度
  latitude: 37.7853, // 纬度
  zoom: 13, // 缩放
  pitch: 0, // 倾斜角度
  bearing: 0 // 轴承
};

// Data to be used by the LineLayer
// 创建数据 源位置 --- 目标位置
const data = [{sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781]}];

// DeckGL react component
class App extends React.Component {
  render() {
    const layers = [
      new LineLayer({id: 'line-layer', data}) // 初始化层
    ];

    return (
      <DeckGL viewState={viewState} layers={layers} /> // 设置组件
    );
  }
}
​

    deck.gl 的重要伙伴 ---- react-map-gl。它是 Mapbox 的一个 React 包装器，可以共享相同的 web mercator viewport 设置。

    /// app.js
import React from 'react';
import DeckGL, {LineLayer} from 'deck.gl';
import {StaticMap} from 'react-map-gl'; // 引入react-map-gl

// Set your mapbox access token here
const MAPBOX_ACCESS_TOKEN = 'MAPBOX_ACCESS_TOKEN';

// Initial viewport settings
const initialViewState = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13,
  pitch: 0,
  bearing: 0
};

// Data to be used by the LineLayer
const data = [{sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781]}];

class App extends React.Component {
  render() {
    const layers = [
      new LineLayer({id: 'line-layer', data})
    ];

    return (
      <DeckGL
        initialViewState={initialViewState}
        controller={true}
        layers={layers}
      >
        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} /> ---- 在这加入react-map-gl的map组件
      </DeckGL>
    );
  }
}
​

  • 关于 react-map-gl:

    如示例中所示，DeckGL React 组件作为 React 组件的子组件(如使用类似于 deck 的参数显示地图的 React -map-gl)尤其有效。gl 视口(即纬度，经度，缩放等)。在这个配置中，你的 deck.gl 层将在底层地图上呈现一个完全同步的地理空间覆盖。

通过层可视化数据:

  1. 渲染单个层

    • deck.gl 的设计允许您获取任何可以关联位置的数据，并使用 deck 轻松地在地图上呈现这些数据。关于 deck.gl 层,只需实例化该层的类，并传入一组属性，其中包括数据本身，以及该层用于构建可视化的一些访问器和属性;
    • 属性是允许控制层如何呈现数据的值;
    • 访问器是用来描述层应该如何提取各种值的函数。
    • <DeckGL layers={[
  new ArcLayer({data: ...})
]} />
​

  2. 渲染多个层

    • deck.gl 允许使用相同或不同的数据集呈现多个层。只需提供层实例和 deck 的数组。deck.gl 将按顺序渲染它们(并处理悬停单击时的交互性等)。
    • <DeckGL layers={[
  new PathLayer({data: ...}),
  new LineLayer({data: ...}),
  new ArcLayer({data: ...}),
]} />
​

Deck.gl 中主要的类:

  1. Deck

    • Deck 是一个使用 Deck 的类。deck.gl 层实例和 viewport 参数，将这些层呈现为透明覆盖，并处理事件;

    • 在使用 React-map-gl 中不需要此类的参加,而在纯 js 开发中,此类便是不可缺少的;

    • 怎么用?

    • // Basic standalone use
import {Deck, ScatterplotLayer} from 'deck.gl';
​
      ​

      const App = (viewState, data) => (
      // 创建一个新的 Deck 类 --- 生成一个画布
      const deck = new Deck({
      // 加入层
      layers: [new ScatterplotLayer({data})]
      });
      deck.setProps({viewState});
      );

      
​

    • Deck 类的属性:

      1. width: 画布的宽(Number)

      2. height: 画布的高(Number)

      3. layers: 要渲染的层的集合 --- 将要渲染的层放到一个数组里面,进行逐个渲染(Array)

      4. layersFilter: 接收一个函数,函数的参数为 layer, viewport, isPicking,用来过滤层,调整视口,控制是否发生拾取事件,所有层在渲染之前都会走这个函数,所以层的显隐可以在这里实现(Function: ({layers, viewport, isPicking}) => {....})

      5. getCursor: 接收一个函数,来检索游标类型的自定义回调(Function: ({isDragging}) => isDragging ? 'grabbing' : 'grab')

      6. views: 单个视图或视图实例的数组(可选地与 Viewport 实例混合，尽管后者是不推荐的)。如果没有提供，将创建一个 MapView。如果提供了空数组，则不会显示任何视图。(Array)

      7. viewState: 地理空间视图状态(Object)

        • latitude: 经度(Number)

        • longitude: 纬度(Number)

        • zoom: 缩放程度(Number)

        • bearing: 轴承程度(Number)

        • pitch: 倾斜角度(Number: 0 - 90)

          可以通过改变 viewState 的参数值来改变画布实例的角度位置

      8. initialViewState: 如果提供了 initialViewState, Deck 组件将使用内部状态跟踪来自任何附加控制器的视图状态更改，initialViewState 作为其初始视图状态。(Object: 属性和 viewState 一样)

      9. controller: 视窗互动选项，例如:平移，旋转和缩放与鼠标，触摸和键盘。如果使用默认视图(即单个 MapView)，这是定义与视图道具交互的简写。

        new Deck({
  ...
  views: [new MapView({controller: true})]
})
// 上面写法和下面是一样的
new Deck({
  ...
  // views: undefined
  controller: true
})
​

        其值有以下几种类型:

        • null or false: 默认不启动控制器
        • true: 默认启动默认控制器
        • Controller: 使用默认选项启动所提供的控制器。必须是 MapController 的子类。
        • 默认为 null

    • Deck 类的配置属性:

      1. id(String): Canvas ID 允许在 CSS 中定制样式;
      2. style(Object): deckgl-canvas 的 Css 样式;
      3. pickingRadius(Number): 在选择时指针周围要包括的额外像素。当呈现的对象难以定位时，这是很有帮助的，例如不规则形状的图标、小的移动圆圈或触摸交互。默认为 0。
      4. useDevicePixels(Boolean): 如果为真，设备的全分辨率将用于渲染，这个值可以在每帧中改变，比如在屏幕之间移动窗口或改变浏览器的缩放级别。默认为真,但是一般都将其设置为 false,因为这个会非常消耗性能,除非机器的性能足够高.
      5. gl(Object): gl 的上下文,如果不提供将会自动创建;

    • Deck 类的回调函数:

      1. onWebGLInitialized(Function: (gl) => {....})一旦 webGL 上下文被初始化,就会被调用;
      2. onViewStateChange(Function: (viewState) -> {....}): 当用户改变画布角度时调用.例如使用鼠标拖曳, 键盘控制等.
      3. onLayerHover(Function: ): 当指针下的对象发生变化时调用。在鼠标悬浮在物体之上发生的回调;
        • 参数: info, pickedInfos, event
        • info: 在坐标中最顶层选择的 info 对象，在没有选择对象时为 null;
        • pickedInfos: 所有受影响的可选层的信息对象数组。
        • event: 原始 MouseEvent 对象
      4. onLayerClick(Function): 当指针点击时发生的回调.参数同 Hover 回调
      5. onDragStart, onDrag, onDragEnd(Function): 拖曳开始, 拖曳中, 拖曳结束
        • 参数: info, event 同 Hover 事件的参数
      6. onLoad(Function): 在创建 gl 上下文和 Deck 组件(ViewManager、LayerManager 等)之后调用一次。可用于触发视口转换;

    • Deck 类的方法:

      1. finalize: 立即释放与此对象关联的资源(而不是等待垃圾收集)。

        deck.finalize();

      2. setProps: 更新属性.

        deck.setProps({.....})

      3. pickObject: 在给定的屏幕坐标上获取最近的可选可见对象.

        deck.pickObject({x, y, radius, layerIds})

        x: x 位置(像素)

        y: y 位置(像素)

        radius: 以像素为单位的公差半径

        layerIds: 要查询的层 id 的列表。如果没有指定，则查询所有可选的和可见的层

  2. Layer: Layer 类是所有 deck 的基类。gl 层，它提供了许多在所有层中可用的基本属性。

    • 静态成员

      1. layerName: 这个静态属性应该包含层的名称，通常是层的类的名称(不能在缩小的代码中可靠地自动推导)。它用作默认的层 id 以及调试和分析.
      2. defaultProps: 所有 deck.gl 层定义一个 defaultProps 静态成员，列出它们的道具和默认值。在层实例构建过程中，使用 defaultProps 可以提高代码的可读性和性能。

    • 构造函数

      new Layer(...props);
​

    • 基础属性

      1. id(String): 静态属性 --- 在给定的时间内，id 必须在所有层之间是唯一的。id 的默认值是层的“name”。如果一个特定层类型的多个实例同时存在，它们必须拥有 deck 的不同 id 字符串。gl 来正确区分它们。
      2. data(String|Iterable|Promise): deck.gl 层通常期望数据支柱的值是一个 JavaScript 数组。也可以使用任何实现 iterable 协议的对象.数组,伪数组都可以.
        • 如果提供字符串，deck。gl 将尝试将其作为 URL 加载，将其解析为 JSON，然后使用预期的结果 JavaScript 数组作为其数据支柱
        • 如果是 Promise 函数，deck.gl 将使用 resolve 解析值作为其数据支柱。
      3. visible(Boolean): 层是否可见。在大多数情况下，建议使用可见道具来控制图层的可见性，而不是使用条件渲染
      4. opacity(Number): 图层的不透明度;

    • 交互属性

      1. pickable(Boolean, default: false): 层是否响应鼠标指针选择事件。

      2. onHover(Function): 当鼠标进入/离开此 deck.gl 层的对象时，将调用此回调,具有以下参数:

        • info: 此时鼠标下的信息
        • event: 事件对象

      3. onClick(Function): 当鼠标点击此 deck.gl 层的对象时,将调用此回调,具有以下参数: 同 onHover

      4. onDragStart, onDrag, onDragEnd 同 Deck 回调事件;

      5. highlightColor(Array, [0, 0, 128, 128])

        • RGBA 颜色用于渲染突出显示的对象。当指定 3 component (RGB)数组时，alpha 使用默认值 255。

      6. highlightedObjectIndex(Integer, -1)

        • 当提供一个有效值时，对应的对象(实例渲染中的一个实例或具有相同拾取颜色的一组原语)将使用 highlightColor 高亮显示。

      7. autoHighLight(Boolean, false)

        • 当为 true 时，鼠标指针指向的当前对象(悬停在其上时)用 highlightColor 高亮显示。

          要求 picable 为真。

    • 坐标系统的属性 ---- 通常只在应用程序希望使用非 Web Mercator 投影经纬度的坐标时使用

      1. coordinateSystem(Number): 指定如何对层位置和偏移量进行地理解释。
      2. coordinateOrigin([Number, Number]): 将 coordinateSystem 设置为 coordinate_system . meter_offset 时需要。
      3. wrapLongitude(Boolean, false): 自动将纵向缠绕在第 180 个反物质上，以获得当前视区的最佳可视性。
      4. modelMatrix(Number[16]):一个可选的 4x4 矩阵，它被乘进着色器项目 GLSL 函数和 Viewport 的项目和非项目 JavaScript 函数使用的仿射投影矩阵

    • 数据属性

      1. dataComparator(Function): 这个支持使用自定义比较函数对数据支持进行比较。使用旧数据和新数据对象调用 compare 函数，如果它们进行相等的比较，则期望返回 true。
      2. numInstances(Number): deck.gl 通过计算数据中对象的数量，自动从数据支柱中获取绘图实例的数量。但是，开发人员可能希望使用此道具手动覆盖它。
      3. updateTriggers(Object): 调用 getColor 和 getPosition 等访问器来检索第一次添加层时的颜色和位置。从那以后，为了最大化性能，deck。gl 不会重新计算颜色或位置，除非通过浅比较更改数据支柱。

  3. 其他衍生 Layer 层的实例

    1. ArcLayer: 弧线层呈现向上的弧线，连接源点和目标点对，指定为纬度/经度坐标。

    • 怎么使用?

      import DeckGL, {ArcLayer} from 'deck.gl';
// 从deck.gl里面引出弧线层类
const App = ({data, viewport}) => {
// 拿到数据,匹配格式
  /**
   * Data format:
   * [
   *   {
   *     inbound: 72633,
   *     outbound: 74735,
   *     from: {
   *       name: '19th St. Oakland (19TH)',
   *       coordinates: [-122.269029, 37.80787]
   *     },
   *     to: {
   *       name: '12th St. Oakland City Center (12TH)',
   *       coordinates: [-122.271604, 37.803664]
   *   },
   *   ...
   * ]
   */
    // 创建弧线层实例
  const layer = new ArcLayer({
    id: 'arc-layer', // 定义名称 -- 方便之后更容易找到此层并操作
    data, // 加载数据
    pickable: true, // 允许发生拾取事件
    getStrokeWidth: 12, // 设置弧线的宽度
    getSourcePosition: d => d.from.coordinates, // 设置来源点的位置
    getTargetPosition: d => d.to.coordinates, // 设置目标点的位置
    getSourceColor: d => [Math.sqrt(d.inbound), 140, 0], // 设置弧线来源点一边的弧线颜色
    getTargetColor: d => [Math.sqrt(d.outbound), 140, 0], // 设置弧线目标点的弧线颜色
    onHover: ({object, x, y}) => {
      const tooltip = `${object.from.name} to ${object.to.name}`; // 在鼠标悬浮的时候产生的回调函数
      /* Update tooltip
         http://deck.gl/#/documentation/developer-guide/adding-interactivity?					section=example-display-a-tooltip-for-hovered-object
      */
    }
  });

  return (<DeckGL {...viewport} layers={[layer]} />); // 最后在组件中渲染该层实例
};
​

    • 属性: 从所有的基础层类(Layer)继承属性.

    • 渲染时的配置项:

      1. fp64(Boolean, false): 是否应该在高精度 64 位模式下渲染该层。注意自 deck.gl v6.1，默认的 32 位投影使用一种混合模式，这种模式与 64 位精度匹配，性能显著提高.
      2. widthScale(Number, 1): 每个弧的宽度的比例因子。如果将属性设置为 Math.pow(2,viewport.zoom - 12)宽度保持不变，对应当前的 zoom level 和 zoom level 12 时 1 像素的宽度。还可以使用此属性限制弧的最小大小宽度.

    • 数据访存器:

      1. getSourcePosition(Function): 方法 --- 来检索每个对象的源位置。

      2. getTargetPosition(Function): 方法 --- 来检索每个对象的目的位置.

      3. getSourceColor(Function|Array, [0, 0, 0, 255]): 方法 --- 检索位置颜色.

        • 如果是 Array,直接返回数组里面的 rgba 颜色值
        • 如果是 Function 函数值, 该函数返回一个 rgba 的数组值.

      4. getTargetColor(Function|Array, [0, 0, 0, 255]): 方法 --- 检索位置颜色.

        • 同上

      5. getStrokeWidth(Function|Number, 1): 每个对象的笔画宽度，以像素为单位。

        • 如果提供了数字，则将其用作所有对象的笔划宽度.
        • 如果提供了函数，则对每个对象调用该函数以检索其笔划宽度。

    2.GeoJsonLayer: GeoJson 层接收 GeoJson 格式的数据，并将其呈现为交互式的多边形、线和点。

    • 怎么使用?

      import DeckGL, {GeoJsonLayer} from 'deck.gl';
// 用法和创建和之前的栗子差不多,只是渲染时的一些属性不同
const App = ({data, viewport}) => {
  const {data, viewport} = this.props;

  /**
   * Data format:
   * Valid GeoJSON object
   */
  const layer = new GeoJsonLayer({
    id: 'geojson-layer',
    data,
    pickable: true,
    stroked: false,
    filled: true,
    extruded: true,
    lineWidthScale: 20,
    lineWidthMinPixels: 2,
    getFillColor: [160, 160, 180, 200],
    getLineColor: d => colorToRGBArray(d.properties.color),
    getRadius: 100,
    getLineWidth: 1,
    getElevation: 30,
    onHover: ({object, x, y}) => {
      const tooltip = object.properties.name || object.properties.station;
      /* Update tooltip
         http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
      */
    }
  });

  return (<DeckGL {...viewport} layers={[layer]} />);
};
​

    • 渲染属性: 从所有基层属性继承而来的数据支柱被稍微灵活地解释了一下，以适应纯粹的 GeoJson“有效负载”。

      1. filled(Boolean, true): 是否绘制填充多边形(实体填充)。注意，对于每个多边形，只有外部多边形和任何孔之间的区域将被填充。这个道具只有在多边形没有被挤压的情况下才有效。
      2. stroked(Boolean, false): 是否绘制多边形的轮廓(固体填充)。注意，对于复杂的多边形，将绘制外部多边形以及任何孔的轮廓。
      3. extruded(Boolean, false): 如果设置为 true，沿 z 轴挤压多边形和多多边形特征。绘制的特征的高度是通过 getElevation 访问器获得的。
      4. wireframe(boolean, false): 是否生成六边形的线框。轮廓将有“水平”线关闭的顶部和底部多边形和垂直线(“支柱”)的每个顶点的多边形.
        • 只有当 extruded 设置为 true 是才有效
      5. lineWidthScale(Boolean, 1): 行宽乘法器，用于乘到所有行，包括 LineString 和 MultiLineString 特性，如果描边属性为真，还包括多边形和多多边形特性的轮廓。
      6. lineWidthMinPixels(Number, 0): 最小行宽，以像素为单位。
      7. lineWidthMaxPixels(Number, Number.MAX_SAFE_INTEGER): 最大行宽, 像素为单位
      8. lineJointRounded(Boolean, false): 两条 geo 线连接重叠部分的样式.
      9. lineMiterLimit(Number, 4): 一个 l 连接点的最大宽度与行宽度之比。只有当 linejointround 为假时才有效.
      10. elevationScale(Number, 1): 海拔乘数。最终高程按海拔比例尺* getElevation(d)计算。elevationScale 是一个处理的属性，可以在不更新数据的情况下缩放所有多边形的高程。
      11. pointRadiusScale(Numbel, 1): 所有点的全局半径乘法器。

    • 数据访问器

      1. getLineColor(Function|Array, [0, 0,0,255]): 根据 GeoJson 特性的类型，行字符串的 rgba 颜色和/或多边形的轮廓。格式为 r, g, b， [a]。每个组件都在 0-255 范围内。
      2. gitFillColor(Function|Array, [0,0,0,255]): GeoJson 的多边形和点特征的纯色。格式为 r, g, b， [a]。每个组件都在 0-255 范围内。
      3. getRadius(Function|Number): 点的半径和多点特征，以米为单位。
      4. getLineWidth(Function|Number): 根据 GeoJson 特性的类型，行字符串的宽度和/或多边形的轮廓。单位是米。
      5. getElevation(Function|Number): 多边形特征的高程(挤压时为真)。

    1. HexagonLayer

      • 六边形层根据点数组呈现一个六边形热图。它取六边形仓的半径，投影到六边形仓中。六边形的颜色和高度由它包含的点的数量来决定。

      • 怎么使用?

        import DeckGL, {HexagonLayer} from 'deck.gl';

const App = ({data, viewport}) => {

  /**
   * Data format:
   * [
   *   {COORDINATES: [-122.42177834, 37.78346622]},
   *   ...
   * ]
   */
  const layer = new HexagonLayer({
    id: 'hexagon-layer',
    data,
    pickable: true,
    extruded: true,
    radius: 200,
    elevationScale: 4,
    getPosition: d => d.COORDINATES,
    onHover: ({object, x, y}) => {
      const tooltip = `${object.centroid.join(', ')}\nCount: ${object.points.length}`;
      /* Update tooltip
         http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
      */
    }
  });

  return (<DeckGL {...viewport} layers={[layer]} />);
};
​

      • 渲染属性

        1. radius(Number, 1000): 六角形料斗半径(米)。六边形是尖顶的(而不是平顶的)。
        2. hexagonAggregator(Function, d3-hexbin): 六边形聚合器是将数据聚合到六边形容器中的函数。六边形聚合器将层的道具和当前视图作为参数。输出应该是{六边形:[]，六边形顶点:[]}。六边形是{centroid: []， points:[]}的数组，其中 centroid 是六边形的中心，points 是六边形包含的点的数组。六边形顶点(可选)是定义基本六边形几何形状的点数组.
        3. colorRange(Array): 颜色值数组,用来创建六边形因密度不同而形成的颜色区分;
        4. coverage(Number): 六角半径乘法器，夹在 0 - 1 之间。六边形的最终半径是用覆盖率*半径来计算的。注意:覆盖率不影响点的绑定方式。容器的半径仅由半径属性决定。
        5. elevationDomain(Array, [0, Max(count)]): 高程刻度输入域。高程比例尺是一种线性比例尺，它将计数的数量映射到高程。默认情况下，它被设置为在每个六边形的点计数的 0 到最大值之间。当您希望使用相同的高程比例呈现不同的数据输入以进行比较时，此属性非常方便。
        6. elevationRange(Array, [0, 1000]): 高程刻度输出范围
        7. elevationScale(Number, 1): 六角海拔乘数。实际高程按 elevationScale* getElevation(d)计算。elevationScale 是一个方便的属性，可以在不更新数据的情况下缩放所有六边形.
        8. extruded(Boolean, false): 是否启用单元格提升。单元格高程按每个单元格中的点数计算。如果设置为 false，则所有单元格都是扁平的。
        9. upperPercentile(Number, 100): 过滤箱和重新计算颜色的上位百分比。颜色值大于上百分位的六边形将被隐藏(控制数据量密度的值,值越大,密度要更大才能更好的区分)
        10. lowerPercentile(Number, 0): 过滤箱和重新计算颜色的较低百分位。颜色值小于最小百分位数的六边形将被隐藏。(密度控制阀, 越低,密度越低的颜色有区分)
        11. elevationUpperPercentile(Number, 100): 过滤箱和重新计算海拔高度的海拔上百分位。高程值大于上百分位的六边形将被隐藏
        12. elevationLowerPercentile(Number, 0): 过滤箱和重新计算海拔高度由海拔低百分位。标高小于标高的六边形将被隐藏。
        13. lightSettings(Object): 这个对象包含挤压多边形的灯光设置。请注意，这个道具可能会在 deck.gl 的未来版本中更改.

      • 数据访问器

        1. getPosition(Function): 方法来检索每个点的位置。

        2. getColorValue(Function): getColorValue 是获取 bin color 所基于的值的访问器函数。它将每个 bin 中的点数组作为参数，返回一个数字。例如，可以通过每个点的特定属性的 avg/mean/max，将 getColorValue 传递给颜色容器。默认情况下，getColorValue 返回点数组的长度。

          class MyHexagonLayer {
    getColorValue (points) {
        return points.length;
    }

    renderLayers() {
      return new HexagonLayer({
        id: 'hexagon-layer',
        getColorValue: this.getColorValue // instead of getColorValue: (points) => { return points.length; }
        data,
        radius: 500
      });
    }
 }
​

        3. getElevationValue(Function): 类似于 getColorValue, getElevationValue 是获取 bin elevation 所基于的值的访问器函数。它将每个 bin 中的点数组作为参数，返回一个数字。默认情况下，getElevationValue 返回点数组的长度

        4. onSetColorDomain(Function): 计算 bin 颜色域时将调用此回调。

        5. onSetElevationDomain(Function): 当 bin 海拔域计算完成时，将调用此回调。

      注: 还有其他 layer 层的类,可以去官网上阅读,其实每个层的类的用法都一样,只是,每个层有其不一样的属性,结合不一样的属性创建不一样的动画,或者物体.

  4. shader modules --- 着色器模块 ---请自行查询官网


​
北京 位置
1.9k 9 428 37 77 11 1 2 1.3k

相关帖子

回帖
认识 deck.gl

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
likaomer
北京
回帖
0
 帖子
1
 积分
480

近期热议

推荐标签 标签

  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 176 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 296 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    169 引用 • 1527 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 487 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 444 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 676 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 396 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 413 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 253 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 233 回帖 • 2 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 1 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 3 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 636 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 2 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    729 引用 • 1278 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 279 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    426 引用 • 1250 回帖 • 599 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 382 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注

最新标签