登录 注册

认识 deck.gl

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

认识 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.8k 8 428 26 73 10 1 2 1.3k

相关帖子

回帖
认识 deck.gl

欢迎来到这里！

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

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

近期热议

推荐标签 标签

  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    164 引用 • 594 回帖 • 1 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    940 引用 • 1458 回帖 • 160 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    51 引用 • 226 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 12 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 84 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 692 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    228 引用 • 1450 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    523 引用 • 4581 回帖 • 692 关注
  • Firefox

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

    7 引用 • 30 回帖 • 455 关注
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 243 关注
  • frp

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

    15 引用 • 7 回帖 • 9 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 25 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    116 引用 • 99 回帖 • 266 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 15 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 422 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 252 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • 分享

    有什么新发现就分享给大家吧！

    242 引用 • 1746 回帖 • 1 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    126 引用 • 1699 回帖
  • JRebel

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

    26 引用 • 78 回帖 • 620 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 9 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    284 引用 • 4481 回帖 • 656 关注

最新标签