JSAPI Three API Reference
    正在准备搜索索引...

    类 DataSource

    抽象数据源类，用来管理传入原始数据到面向渲染数据的流转过程 数据源负责：

    • 加载和解析原始数据
    • 管理数据属性和着色器attribute映射
    • 提供数据操作接口（添加、删除、修改）
    • 生成可供渲染的数据结构

    主要的子类包括：

    // 创建一个基础数据源
    const dataSource = new DataSource();

    // 创建多个数据项
    const point1 = new DataItem([116.39, 39.9], { id: 'beijing', name: '北京', value: 100 });
    const point2 = new DataItem([121.47, 31.23], { id: 'shanghai', name: '上海', value: 90 });

    // 添加数据项到数据源
    dataSource.add(point1);
    dataSource.add(point2);

    // 定义数据属性到着色器属性的映射
    dataSource.defineAttributes({
      color: 'value',
      size: 'value',
    });

    // 将数据源与可视化对象关联
    const pointLayer = new SimplePoint({
      size: 10,
      color: 'red',
      vertexColors: true,
      vertexSizes: true,
    });
    pointLayer.dataSource = dataSource;
    engine.add(pointLayer);

    层级 (查看层级一览)

    索引

    构造函数

    constructor

    方法

    add clear defineAttribute defineAttributes dispose exportToGeoJSON get getDataItem getDataItemIndex load remove setAttributeValue setAttributeValues setCoordinates setData setFilter undefineAllAttributes undefineAttribute

    访问器

    dataItems objects size

    构造函数

    • 创建数据源实例

      参数

      • options: { attributes?: object; id?: string } = {}

        配置选项

        • 可选attributes?: object

          属性映射对象，用于定义数据属性到着色器attribute的映射，映射的规则参考DataSource.defineAttribute

        • 可选id?: string

          数据源ID，默认自动通过时间戳生成

      返回 DataSource

    方法

    • 向数据源中增加数据元素

      参数

      返回 DataSource

      当前数据源实例

      // 添加单个点
      const point = new DataItem([116.39, 39.9], { name: '北京' });
      dataSource.add(point);

      // 添加多个要素
      const points = [
        new DataItem([116.39, 39.9], { name: '北京' }),
        new DataItem([121.47, 31.23], { name: '上海' })
      ];
      dataSource.add(points);

    • 清空数据源中存储的数据，恢复初始状态

      返回 void

      // 清空所有数据
      dataSource.clear();
      console.log(dataSource.size); // 0

    • 根据数据中属性名设置着色器attribute字段

      参数

      • attribute: string

        着色器attribute对应变量名

      • property: string | Function

        数据中property名或回调函数

      返回 DataSource

      当前数据源实例

      // 用法1：将数据中的'height'属性映射到着色器中的'size'变量
      dataSource.defineAttribute('size', 'height');

      // 用法2：可以链式调用
      dataSource.defineAttribute('color', 'pointColor')
               .defineAttribute('size', 'height');

      // 用法3：数据中的属性和着色器变量名相同时，可省略property参数
      dataSource.defineAttribute('size');

      // 用法4：property参数可传入回调函数，根据数据项的属性值动态计算着色器attribute的值
      dataSource.defineAttribute('color', attribute => {
          return [attribute.red, attribute.green, attribute.blue, attribute.alpha];
      });

    • 根据数据中属性名批量设置着色器attribute字段

      参数

      • obj: Object

        着色器attribute变量名与数据中property名对应关系

      返回 DataSource

      当前数据源实例

      // 一次设置多个属性映射
      dataSource.defineAttributes({
        color: 'pointColor',
        size: 'height',
      });

    • 释放数据源资源

      返回 void

    • 导出数据成GeoJSON格式

      返回 object

      GeoJSON格式的数据对象

      // 导出整个数据源为GeoJSON
      const geojson = dataSource.exportToGeoJSON();
      console.log(geojson.features.length); // 数据项数量

      // 可以保存为文件或发送到服务器
      const json = JSON.stringify(geojson);

    • 获取已解析后的第index个数据

      参数

      • index: number

        索引下标

      返回 undefined | object

      对应索引的数据项，若索引无效则返回undefined

      // 获取第一个数据项
      const item = dataSource.get(0);
      console.log(item.position, item.color);

    • 获取原始数据

      参数

      • index: number

        绘制元素的索引

      返回 undefined | DataItem

      数据项实例，若索引无效则返回undefined

      // 获取索引为0的数据项原始数据
      const dataItem = dataSource.getDataItem(0);
      console.log(dataItem.coordinates, dataItem.attributes);

    • 获取原始数据中的数据索引

      参数

      • index: number

        绘制元素的索引

      返回 number

      原始数据的索引

    • 主要入口方法，该方法为异步，根据路径或者原始数据请求并解析

      参数

      • url: string

        请求路径

      返回 Promise<DataSource>

      当前数据源实例

      // 加载远程数据
      await dataSource.load('path/to/data.geojson');

    • 从数据源中移除数据元素

      参数

      返回 DataSource

      当前数据源实例

      // 移除单个点
      dataSource.remove(point);

      // 通过ID移除点
      dataSource.remove('point1');

      // 移除多个点
      dataSource.remove([point1, point2]);

    • 设置指定ID数据项的单个属性值

      参数

      • ids: string | string[]

        数据项ID或ID数组

      • key: string

        属性名

      • value: any

        属性值

      返回 DataSource

      当前数据源实例

      // 设置单个点的颜色
      dataSource.setAttributeValue('point1', 'color', [255, 0, 0]);

      // 设置多个点的颜色
      dataSource.setAttributeValue(['point1', 'point2'], 'color', [255, 0, 0]);

    • 设置指定ID数据项的多个属性值

      参数

      • ids: string | string[]

        数据项ID或ID数组

      • values: object

        属性名-值对象

      返回 DataSource

      当前数据源实例

      // 同时设置点的多个属性
      dataSource.setAttributeValues('point1', {
        color: [255, 0, 0],
        size: 10,
      });

      // 对多个点设置相同的属性
      dataSource.setAttributeValues(['point1', 'point2'], {
        color: [255, 0, 0],
        size: 10
      });

    • 设置指定ID数据项的坐标

      参数

      • ids: string | string[]

        数据项ID或ID数组

      • coordinates: number[] | number[][]

        坐标或坐标数组

      • 可选projection: string

        投影类型

      返回 DataSource

      当前数据源实例

      // 修改点的位置
      dataSource.setCoordinates('point1', [116.39, 39.9]);

      // 修改线的坐标
      dataSource.setCoordinates('line1', [
        [116.39, 39.9],
        [121.47, 31.23]
      ]);

    • 修改数据源中的数据

      参数

      • data: object

        新的数据对象

      返回 void

      // 替换整个数据源的数据
      const newData = {
        type: 'FeatureCollection',
        features: [...]
      };
      dataSource.setData(newData);

      // 更新相关的可视化对象会自动更新

    • 设置过滤器，过滤器返回false的数据不会被添加到数据源中

      参数

      • filter: Function

        过滤器

      返回 void

    • 从着色器移除所有添加的attribute字段，这些字段只能是通过defineAttribute或defineAttributes添加的

      返回 DataSource

      当前数据源实例

      // 清除所有属性映射
      dataSource.undefineAllAttributes();

    • 从着色器中移除属性名为name的attribute字段

      参数

      • name: string

        属性名

      返回 DataSource

      当前数据源实例

      // 移除对'color'属性的映射
      dataSource.undefineAttribute('color');

    访问器

    • get objects(): any[]

      该数据源连接的对象

      返回 any[]

    • get size(): number

      数据大小

      返回 number

    显示设置

    成员可见性

    目录

    构造函数
    方法
    访问器