JSAPIThree 数据源系统学习笔记：让数据在地图上可视化

作为一个刚开始学习 mapvthree 的小白，今天要学习数据源系统了！听说这个系统可以把各种格式的数据加载到地图上，还能让数据可视化！想想就实用！

第一次听说数据源系统

今天在文档里看到了"数据源"这个词，一开始我还以为是数据库，结果查了一下才知道，原来这是用来存储和加载地理数据的系统！
文档说数据源系统可以：

• 存储带坐标信息的数据
  
• 支持多种数据格式（GeoJSON、JSON、CSV）
  
• 与可视化组件配合使用
  
• 动态添加、删除、修改数据
  

我的理解：简单说就是"数据仓库"，把地理数据存起来，然后给可视化组件用！
第一步：理解数据源的基本概念

作为一个初学者，我习惯先理解基本概念。文档说 DataSource 是数据源类，用于存储一组带坐标信息的数据。
我的发现：数据源通常与可视化组件配合使用：

1. // 创建可视化组件
2. const point = engine.add(new mapvthree.SimplePoint());
4. // 创建数据源
5. const dataSource = new mapvthree.DataSource();
7. // 将数据源赋值给可视化组件
8. point.dataSource = dataSource;

复制代码

我的理解：数据源存储数据，可视化组件负责渲染，两者配合才能显示数据！
DataItem：数据的最小单元

文档说 DataItem 是数据的最小单元，用于存储单条数据的信息。

1. // 创建一个点数据
2. const dataItem = new mapvthree.DataItem([116.404, 39.915, 10]);
4. // 添加到数据源
5. dataSource.add(dataItem);

复制代码

我的理解：

• DataItem 是单条数据
  
• DataSource 是数据集合
  
• 一个数据源可以包含多个 DataItem
  

第二步：使用 GeoJSON 数据源

看到基本概念后，我想：怎么加载实际的数据？
文档说可以用 GeoJSONDataSource 来加载 GeoJSON 格式的数据！

1. import * as mapvthree from '@baidumap/mapv-three';
3. const container = document.getElementById('container');
4. const engine = new mapvthree.Engine(container, {
5.     map: {
6.         center: [116.404, 39.915],
7.         range: 2000,
8.     },
9. });
11. // 创建点图层
12. const point = engine.add(new mapvthree.SimplePoint({
13.     size: 15,
14. }));
16. // 从 URL 加载 GeoJSON 数据
17. const dataSource = await mapvthree.GeoJSONDataSource.fromURL('data/geojson/points.geojson');
18. point.dataSource = dataSource;

复制代码

我的发现：fromURL 是异步方法，需要用 await 等待数据加载完成！
我的理解：

• fromURL：从 URL 加载数据
  
• fromGeoJSON：直接传入 GeoJSON 对象
  

我的尝试：

1. // 方式 1：从 URL 加载
2. const dataSource1 = await mapvthree.GeoJSONDataSource.fromURL('data/geojson/points.geojson');
4. // 方式 2：直接传入 GeoJSON 对象
5. const geojson = {
6.     type: 'FeatureCollection',
7.     features: [
8.         {
9.             type: 'Feature',
10.             geometry: {
11.                 type: 'Point',
12.                 coordinates: [116.404, 39.915],
13.             },
14.             properties: {},
15.         },
16.     ],
17. };
18. const dataSource2 = mapvthree.GeoJSONDataSource.fromGeoJSON(geojson);

复制代码

我的发现：两种方式都可以，根据数据来源选择合适的方式！
第三步：使用 JSON 数据源

看到 GeoJSON 后，我想：如果数据是 JSON 格式怎么办？
文档说可以用 JSONDataSource 来加载 JSON 格式的数据！

1. // 从 URL 加载 JSON 数据
2. const dataSource = await mapvthree.JSONDataSource.fromURL('data/json/points.json');
3. point.dataSource = dataSource;

复制代码

我的理解：JSON 数据源需要满足特定格式：

• 有坐标字段（默认是 coordinates，可通过 coordinatesKey 指定）
  
• 坐标数据满足 WKT 格式要求
  

我的尝试：

1. // JSON 数据格式示例
2. const jsonData = [{
3.     coordinates: 'POINT(116.404 39.915)',
4.     name: '北京',
5. }, {
6.     coordinates: 'POINT(121.473 31.230)',
7.     name: '上海',
8. }];
10. const dataSource = mapvthree.JSONDataSource.fromJSON(jsonData);
11. point.dataSource = dataSource;

复制代码

我的发现：JSON 数据源支持 WKT 格式的坐标！
自定义坐标解析

如果坐标不是 WKT 格式，可以自定义解析函数：

1. const dataSource = mapvthree.JSONDataSource.fromJSON([{
2.     position: [116.404, 39.915],
3.     color: 0xff0000,
4. }, {
5.     position: '121.473, 31.230',
6.     color: 0x00ff00,
7. }], {
8.     coordinatesKey: 'position', // 指定坐标字段
9.     parseCoordinates: function({position}) {
10.         // 自定义解析函数
11.         if (Array.isArray(position)) {
12.             return position;
13.         } else {
14.             return position.split(',').map(v => parseFloat(v));
15.         }
16.     },
17. });

复制代码

我的发现：可以自定义解析函数，处理各种格式的坐标数据！
第四步：使用 CSV 数据源

看到 JSON 后，我想：如果数据是 CSV 格式怎么办？
文档说可以用 CSVDataSource 来加载 CSV 格式的数据！

1. // 从 URL 加载 CSV 数据
2. const dataSource = await mapvthree.CSVDataSource.fromURL('data/csv/points.csv');
3. point.dataSource = dataSource;

复制代码

我的理解：CSV 数据源也需要满足特定格式：

• 有坐标列（默认是 coordinates，可通过 coordinatesKey 指定）
  
• 坐标数据满足 WKT 格式要求
  

我的发现：CSV 数据源和 JSON 数据源的格式要求类似，都支持 WKT 格式！
第五步：定义数据属性

看到可以加载数据后，我想：能不能根据数据的不同属性显示不同的样式？
文档说可以用 defineAttribute 来定义数据属性！

1. // 加载数据
2. const dataSource = await mapvthree.GeoJSONDataSource.fromURL('data/geojson/points.geojson');
4. // 定义颜色属性
5. dataSource.defineAttribute('color', 'color');
7. // 定义大小属性
8. dataSource.defineAttribute('size', 'size');

复制代码

我的理解：defineAttribute 可以将数据中的字段映射到可视化属性！
我的尝试：

1. // 创建支持颜色和大小的点图层
2. const point = engine.add(new mapvthree.SimplePoint({
3.     vertexColors: true, // 开启颜色属性
4.     vertexSizes: true,  // 开启大小属性
5. }));
7. // 加载数据并定义属性
8. const dataSource = await mapvthree.GeoJSONDataSource.fromURL('data/geojson/points.geojson');
9. dataSource.defineAttribute('color', 'color');
10. dataSource.defineAttribute('size', 'size');
12. point.dataSource = dataSource;

复制代码

我的发现：需要在可视化组件中开启对应的属性标志（如 vertexColors），才能使用数据属性！
使用回调函数定义属性

文档说可以用回调函数来动态计算属性值：

1. // 使用回调函数定义颜色
2. dataSource.defineAttribute('color', properties => {
3.     // 根据数据动态计算颜色
4.     return properties.count > 100 ? 0xff0000 : 0x00ff00;
5. });
7. // 使用回调函数定义大小
8. dataSource.defineAttribute('size', properties => {
9.     return properties.count * 2;
10. });

复制代码

我的发现：回调函数可以灵活地根据数据计算属性值！
第六步：动态修改数据

看到可以加载数据后，我想：能不能动态添加、删除、修改数据？
文档说数据源提供了 add、remove、setData 等方法来修改数据！

1. // 添加数据
2. const newItem = new mapvthree.DataItem([116.404, 39.915]);
3. dataSource.add(newItem);
5. // 删除数据
6. dataSource.remove(itemId);
8. // 更新整个数据源
9. dataSource.setData(newGeoJSONData);
11. // 修改单个数据的属性
12. dataSource.setAttributeValues(itemId, {
13.     color: 0xff0000,
14.     size: 20,
15. });
17. // 修改单个数据的坐标
18. dataSource.setCoordinates(itemId, [116.414, 39.925]);

复制代码

我的发现：可以动态地添加、删除、修改数据，非常灵活！
我的尝试：

1. // 点击地图添加点
2. engine.map.addEventListener('click', e => {
3.     if (!e.target) {
4.         const newItem = new mapvthree.DataItem(e.point);
5.         dataSource.add(newItem);
6.     }
7. });
9. // 点击点删除
10. point.addEventListener('rightclick', e => {
11.     dataSource.remove(e.entity.value.id);
12. });
14. // 点击点修改颜色
15. point.addEventListener('click', e => {
16.     dataSource.setAttributeValues(e.entity.value.id, {
17.         color: 0xffffff * Math.random(),
18.     });
19. });

复制代码

我的发现：结合事件系统，可以实现交互式的数据编辑！
第七步：创建自定义数据源

看到可以加载各种格式的数据后，我想：能不能手动创建数据源？
文档说可以直接使用 DataSource 构造函数创建数据源！

1. // 创建数据源
2. const dataSource = new mapvthree.DataSource({
3.     attributes: {
4.         color: p => p.color || 0xffff00,
5.         size: p => p.size || 10,
6.     },
7. });
9. // 创建数据项
10. const item1 = new mapvthree.DataItem([116.404, 39.915], {
11.     color: 0xff0000,
12.     size: 20,
13. });
15. const item2 = new mapvthree.DataItem([121.473, 31.230], {
16.     color: 0x00ff00,
17.     size: 15,
18. });
20. // 添加数据项
21. dataSource.add(item1);
22. dataSource.add(item2);
24. // 绑定到可视化组件
25. point.dataSource = dataSource;

复制代码

我的发现：可以手动创建数据源和数据项，适合动态生成数据的场景！
创建不同类型的几何数据

文档说 DataItem 可以表示不同类型的几何图形：

1. // 点数据
2. const pointItem = new mapvthree.DataItem([116.404, 39.915]);
4. // 线数据
5. const lineItem = new mapvthree.DataItem({
6.     geometry: {
7.         type: 'LineString',
8.         coordinates: [[116.404, 39.915], [121.473, 31.230]],
9.     },
10. });
12. // 面数据
13. const polygonItem = new mapvthree.DataItem({
14.     geometry: {
15.         type: 'Polygon',
16.         coordinates: [[[116.404, 39.915], [116.414, 39.915], [116.414, 39.925], [116.404, 39.925], [116.404, 39.915]]],
17.     },
18. });

复制代码

我的发现：可以创建点、线、面等不同类型的几何数据！
第八步：设置数据投影

看到可以创建数据后，我想：如果数据的坐标系统不同怎么办？
文档说可以通过 crs 属性来设置数据的投影信息！

1. // 创建使用投影坐标的数据项
2. const item = new mapvthree.DataItem({
3.     geometry: {
4.         type: 'Point',
5.         coordinates: [12960000, 4850000, 0], // 投影坐标
6.     },
7. }, {
8.     crs: 'EPSG:3857', // 指定投影
9. });

复制代码

我的理解：引擎会自动将数据从源投影转换到目标投影！
我的发现：这样就能处理不同坐标系统的数据了！
第九步：完整示例

我想写一个完整的示例，把学到的都用上：

1. import * as mapvthree from '@baidumap/mapv-three';
3. const container = document.getElementById('container');
5. const engine = new mapvthree.Engine(container, {
6.     map: {
7.         center: [116.404, 39.915],
8.         range: 2000,
9.     },
10.     rendering: {
11.         enableAnimationLoop: true,
12.     },
13. });
15. // 创建支持颜色和大小的点图层
16. const point = engine.add(new mapvthree.SimplePoint({
17.     size: 15,
18.     vertexColors: true,
19.     vertexSizes: true,
20. }));
22. // 从 URL 加载 GeoJSON 数据
23. const dataSource = await mapvthree.GeoJSONDataSource.fromURL('data/geojson/points.geojson');
25. // 定义属性
26. dataSource.defineAttribute('color', properties => {
27.     return properties.count > 100 ? 0xff0000 : 0x00ff00;
28. });
29. dataSource.defineAttribute('size', properties => {
30.     return properties.count * 2;
31. });
33. // 绑定数据源
34. point.dataSource = dataSource;
36. // 点击地图添加点
37. engine.map.addEventListener('click', e => {
38.     if (!e.target) {
39.         const newItem = new mapvthree.DataItem(e.point, {
40.             count: Math.random() * 200,
41.         });
42.         dataSource.add(newItem);
43.     }
44. });
46. // 点击点修改颜色
47. point.addEventListener('click', e => {
48.     dataSource.setAttributeValues(e.entity.value.id, {
49.         count: Math.random() * 200,
50.     });
51. });

复制代码

我的感受：写一个完整的示例，把学到的都用上，感觉很有成就感！
第十步：踩过的坑

作为一个初学者，我踩了不少坑，记录下来避免再犯：
坑 1：数据源不显示

原因：数据源加载是异步的，在数据加载完成前就绑定了。
解决：确保使用 await 等待数据加载完成后再绑定。
坑 2：属性不生效

原因：没有在可视化组件中开启对应的属性标志。
解决：需要在组件中开启对应的属性标志，如 vertexColors、vertexSizes。
坑 3：坐标格式错误

原因：坐标格式不符合要求，或者坐标字段名不对。
解决：

• 确保坐标格式正确（WKT 格式或数组格式）
  
• 使用 coordinatesKey 指定坐标字段名
  

坑 4：JSON/CSV 数据解析失败

原因：坐标数据不是 WKT 格式，且没有自定义解析函数。
解决：使用 parseCoordinates 自定义解析函数。
坑 5：数据更新不生效

原因：使用了错误的方法更新数据。
解决：

• 更新整个数据源：使用 setData
  
• 添加/删除数据：使用 add/remove
  
• 修改属性：使用 setAttributeValues
  
• 修改坐标：使用 setCoordinates
  

我的学习总结

经过这一天的学习，我掌握了：

• 数据源的作用：存储带坐标信息的数据，与可视化组件配合使用
  
• DataItem：数据的最小单元，可以表示点、线、面等几何图形
  
• GeoJSON 数据源：最常用的数据格式，支持 fromURL 和 fromGeoJSON
  
• JSON 数据源：支持 WKT 格式坐标，可以自定义解析函数
  
• CSV 数据源：支持 WKT 格式坐标，格式要求与 JSON 类似
  
• 定义属性：通过 defineAttribute 将数据字段映射到可视化属性
  
• 动态修改：通过 add、remove、setData 等方法动态修改数据
  
• 数据投影：通过 crs 属性设置数据投影，引擎自动转换
  

我的感受：数据源系统真的很强大！虽然功能很多，但是用起来其实不难。关键是要理解数据源和可视化组件的关系，然后根据数据格式选择合适的加载方式！
下一步计划：

• 学习更多数据源的配置选项
  
• 尝试处理复杂的数据格式
  
• 做一个完整的数据可视化项目
  

学习笔记就到这里啦！作为一个初学者，我觉得数据源系统虽然功能很多，但是用起来其实不难。关键是要理解数据源和可视化组件的关系，然后根据数据格式选择合适的加载方式！希望我的笔记能帮到其他初学者！大家一起加油！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

喜欢鼓捣这些软件，现在用得少，谢谢分享！