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

    类 JSONDataSource

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

    JSONDataSource适用于处理结构化的JSON数据，可以通过自定义解析器处理各种JSON格式。 它提供了灵活的配置选项，允许定义：

    • 坐标字段名（默认为'coordinates'）
    • 自定义坐标解析函数
    • 自定义特征解析函数

    支持从多种来源加载数据：

    • 从URL加载
    • 直接传入JSON对象
    // 示例1: 从URL加载JSON数据
    const dataSource = await JSONDataSource.fromURL('path/to/data.json');

    // 示例2: 从JSON对象创建
    const jsonData = [
      { coordinates: 'POINT(116.39 39.9)', name: '北京', value: 100 },
      { coordinates: 'POINT(121.47 31.23)', name: '上海', value: 90 }
    ];
    const dataSource = JSONDataSource.fromJSON(jsonData);

    // 示例3: 自定义坐标字段和解析函数
    const dataSource = new JSONDataSource({
      coordinatesKey: 'geometry',
      parseCoordinates: (item) => {
        return {
          type: 'Point',
          coordinates: [item.lon, item.lat]
        };
      }
    });

    层级 (查看层级一览)

    索引

    构造函数

    constructor

    属性

    fromJSON fromURL

    方法

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

    访问器

    coordinatesKey dataItems objects parseCoordinates parseFeature size

    构造函数

    • 创建JSONDataSource实例

      参数

      • 可选options: {
            coordinatesKey?: string;
            parseCoordinates?: Function;
            parseFeature?: Function;
        } = {}

        配置选项

        • 可选coordinatesKey?: string

          指定JSON中表示坐标的字段名，默认是'coordinates'

        • 可选parseCoordinates?: Function

          自定义坐标解析函数，参数为数据项，返回几何对象

        • 可选parseFeature?: Function

          自定义特征解析函数，参数为数据项，返回DataItem实例

      返回 JSONDataSource

      // 自定义坐标字段和解析方法
      const dataSource = new JSONDataSource({
        coordinatesKey: 'loc',
        parseCoordinates: (item) => {
          const [lng, lat] = item.loc.split(',');
          return {
            type: 'Point',
            coordinates: [parseFloat(lng), parseFloat(lat)]
          };
        }
      });

    属性

    fromJSON: (object: object | any[], options?: object) => JSONDataSource = ...

    从JSON对象创建数据源实例

    类型声明

      • (object: object | any[], options?: object): JSONDataSource

      • 参数

        • object: object | any[]

          JSON数据对象或数组

        • 可选options: object

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

        返回 JSONDataSource

        新创建的数据源实例

    const jsonData = [
      { coordinates: 'POINT(116.39 39.9)', name: '北京' },
      { coordinates: 'POINT(121.47 31.23)', name: '上海' }
    ];
    const dataSource = JSONDataSource.fromJSON(jsonData);
    fromURL: (url: string, options?: object) => Promise<JSONDataSource> = ...

    从URL异步加载JSON数据

    类型声明

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

      • 参数

        • url: string

          数据的URL路径

        • 可选options: object

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

        返回 Promise<JSONDataSource>

        包含数据源实例的Promise

    const dataSource = await JSONDataSource.fromURL('path/to/data.json');
    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 coordinatesKey(): string

      获取坐标字段的键名

      返回 string

    • set coordinatesKey(value: string): void

      设置坐标字段的键名

      参数

      • value: string

        新的键名

      返回 void

      dataSource.coordinatesKey = 'geometryField';
    • get dataItems(): DataItem[]

      获取所有数据项

      返回 DataItem[]

    • get objects(): any[]

      该数据源连接的对象

      返回 any[]

    • get parseCoordinates(): undefined | Function

      获取坐标解析函数

      返回 undefined | Function

    • set parseCoordinates(value: Function): void

      设置坐标解析函数

      参数

      • value: Function

        解析函数，参数为数据项，返回几何对象

      返回 void

      dataSource.parseCoordinates = (item) => {
        return {
          type: 'Point',
          coordinates: [item.lon, item.lat]
        };
      };
    • get parseFeature(): undefined | Function

      获取特征解析函数

      返回 undefined | Function

    • set parseFeature(value: Function): void

      设置特征解析函数

      参数

      • value: Function

        解析函数，参数为数据项，返回DataItem实例

      返回 void

      dataSource.parseFeature = (item) => {
        return new DataItem({
          geometry: {
            type: 'Point',
            coordinates: [item.lon, item.lat]
          },
          properties: {
            name: item.name,
            value: item.value
          }
        });
      };
    • get size(): number

      数据大小

      返回 number

    显示设置

    成员可见性

    目录

    构造函数
    属性
    方法
    访问器