geojson、csv、json 数据加载

JSAPI THREE包含一系列可视化组件，总体分类的话分为点(基础点、图标)，线(宽线、OD线)，面(基础面)。

一、可视化要素分类

JSAPI THREE 中，所有可视化图层大体可分为三类：

1. 点要素（Points）

• SimplePoint：支持不同颜色、尺寸的基础点。
• Icon：可渲染图片图标的点，常用于 POI 或事件标注。

2. 线要素（Lines）

• FatLine：支持宽度控制、虚线样式及动态效果的宽线渲染。

3. 面要素（Polygon）

• Polygon：支持不同颜色、透明度的面填充效果，可渲染区域边界、多边形区域等数据。

要绘制这些点线面要素，需要指定数据源(DataSource), 数据源分为GeoJSONDataSource、JSONDataSource、CSVDataSource, 分为接入geojson、json、csv数据

二、数据源类型

所有要素的绘制都依赖于指定的数据源（DataSource），用于统一解析原始数据并提供给对应的可视化图层。

JSAPI THREE 提供以下三种主流数据源接入方式：

1. GeoJSONDataSource

用于接入标准 GeoJSON 格式的数据，支持 Point、LineString、Polygon 等地理类型 geojson 格式说明（格式详解）-CSDN博客

数据示例

[
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [105.92417836189269,
            29.34534369442001, 0]
        },
        "properties": {
            "icon": "assets/images/marker/start.png",
            "size": 30
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [105.9286630153656, 29.347055119856673, 0]
        },
        "properties": {
            "icon": "assets/images/marker/end.png",
            "size": 40
        }
    }
]

使用示例：

const point = engine.add(new mapvthree.SimplePoint({
    size: 15,
}));

let dataSource = await mapvthree.GeoJSONDataSource.fromURL('data/geojson/icon.geojson');
point.dataSource = dataSource;

JSONDataSource

1. 坐标字段（coordinatesKey）

• 数据项中必须存在一个字段用于描述坐标信息；
• 默认字段名为 "coordinates"，可通过 coordinatesKey 自定义；
• 示例数据项：

{ "coordinates": [116.3, 39.9], "value": 100 }

2. 坐标值支持 WKT 格式

• 坐标字段值支持 WKT（Well-Known Text）语法，如：

  • "POINT(116.3 39.9)"
  • "LINESTRING(116.3 39.9, 116.4 40.0)"

3. 非 WKT 格式处理方式

如果坐标字段不是标准 WKT 格式（如数组 [lng, lat] 或字符串 "116.3,39.9"），必须通过以下两种方式之一提供解析函数：

• ✅ parseCoordinates(item: any): [lng, lat]

  • 用于将原始坐标字段转换为 [number, number] 格式

• ✅ parseFeature(item: any): Feature

  • 用于自定义整个要素的构建，包括坐标和属性

示例：

// 示例数据格式
const data = [
  {
    "position": "116.3,39.9",
    "color": "#ff0000"
  },
  {
    "position": [116.4, 40.0],
    "color": "#00ff00"
  },
  {
    "position": "POINT(116.5 40.1)",
    "color": "#0000ff"
  }
]

const ds = JSONDataSource.fromJSON(data, {
  parseCoordinates: ({ position }) => {
    if (typeof position === 'string') {
      return position.split(',').map(Number); // "116.3,39.9" => [116.3, 39.9]
    }
    return position;
  }
});

CSVDataSource

支持读取和解析标准 CSV 文件

✅ 支持的功能包括：

• 点、线、面 WKT 坐标解析；
• 自定义坐标字段；
• 自定义坐标解析函数；

🧾 特定格式要求

为了使 CSVDataSource 能正常解析数据，需要遵循以下格式要求：

1. 坐标字段

• 默认坐标列名为 coordinates；
• 可通过 coordinatesKey 自定义字段名（如 position, geo 等）；
• 支持 WKT 格式解析。

2. 坐标支持 WKT 格式

CSV 中的坐标列需使用标准 WKT 表达方式，如：

coordinates	value
POINT(0 0 1)	100
LINESTRING(0 0,8 10,20 25)	200
POLYGON((0 0,3 0,2 7,0 4,0 0),(1 1, 2 1, 2 2, 1 2))	300

如果坐标数据不符合 WKT 格式（如经纬度分列或字符串数组），则需通过以下任意方式自定义解析：

• ✅ parseCoordinates(row: any): [lng, lat]
• ✅ parseFeature(row: any): Feature

示例： 标准的坐标为MVT格式，这里以非标准格式自定义解析举例 如果你的 CSV 文件中不是标准 WKT 坐标，而是如下格式：

lng,lat,value
116.3,39.9,50
116.4,40.0,80

你可以通过 parseCoordinates 自定义坐标解析：

const dataSource = await mapvthree.CSVDataSource.fromURL('data/csv/point.csv', {
  parseCoordinates: row => [parseFloat(row.lng), parseFloat(row.lat)],
});

数据携带属性

注意到很多的组件都有vertexXXX属性，比如vertexColors，vertexSizes，可以指定不同的点的颜色和尺寸 比如：

const simplePoint = engine.add(new mapvthree.SimplePoint({
    vertexColors: true,
    size: 10,
}));
const dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON(data);

上面的一个SimplePoint我指定了一个vertexColors属性，表示每个点有不同的颜色，但是点的颜色信息需要dataSource提供，如果数据中有可以从数据中属性映射得到，如果没有可以自己构造

示例

[
    {
        type: 'Feature'
        geometry: {
            type: 'Point',
            coordinates: [113, 23]
        },
        properties: {
            color: 'red'
        }
    }
]

dataSource映射

// 指定颜色为properties中的color属性
dataSource.defineAttribute('color', 'color');