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

    类 GeoJSONDataSource

    GeoJSON格式数据的数据源，支持加载标准GeoJSON对象或通过URL加载远程数据

    GeoJSONDataSource专门处理标准GeoJSON格式的地理数据，支持以下形式：

    • FeatureCollection（特征集合）
    • Feature（单个特征）
    • Features数组（特征数组）

    支持所有标准GeoJSON几何类型：

    • Point（点）
    • LineString（线）
    • Polygon（面）
    • MultiPoint（多点）
    • MultiLineString（多线）
    • MultiPolygon（多面）
    // 示例1: 从GeoJSON对象创建
    const geojson = {
      type: 'FeatureCollection',
      features: [{
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [116.39, 39.9]
        },
        properties: {
          name: '北京',
          value: 100
        }
      }]
    };
    const dataSource = GeoJSONDataSource.fromGeoJSON(geojson);

    // 示例2: 从URL加载
    const dataSource = await GeoJSONDataSource.fromURL('path/to/data.geojson');

    层级 (查看层级一览)

    索引

    构造函数

    constructor

    属性

    fromGeoJSON fromURL

    方法

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

    访问器

    dataItems objects size

    构造函数

    属性

    fromGeoJSON: (geoJSONObject: object, options?: object) => GeoJSONDataSource = ...

    从GeoJSON对象创建数据源实例

    类型声明

      • (geoJSONObject: object, options?: object): GeoJSONDataSource

      • 参数

        • geoJSONObject: object

          GeoJSON数据对象

        • 可选options: object

          配置选项，传递给DataSource构造函数

        返回 GeoJSONDataSource

        新创建的数据源实例

    const dataSource = GeoJSONDataSource.fromGeoJSON({
      type: 'FeatureCollection',
      features: [...]
    });
    fromURL: (url: string, options?: object) => Promise<GeoJSONDataSource> = ...

    从URL异步加载GeoJSON数据

    类型声明

      • (url: string, options?: object): Promise<GeoJSONDataSource>

      • 参数

        • url: string

          数据的URL路径

        • 可选options: object

          配置选项，传递给DataSource构造函数

        返回 Promise<GeoJSONDataSource>

        包含数据源实例的Promise

    const dataSource = await GeoJSONDataSource.fromURL('path/to/data.geojson');
    console.log(`加载了${dataSource.size}个数据项`);

    方法

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

      参数

      返回 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',
      });

    • 导出数据成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 dataItems(): DataItem[]

      获取所有数据项

      返回 DataItem[]

    • get objects(): any[]

      该数据源连接的对象

      返回 any[]

    • get size(): number

      数据大小

      返回 number

    显示设置

    成员可见性

    目录

    构造函数
    属性
    方法
    访问器