还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。
No. | 内容链接 |
---|---|
1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
一、CSV格式详解
CSV(Comma-Separated Values)是一种常用的数据交换格式,它以纯文本形式存储表格数据。CSV 文件中的每行通常表示一个数据记录,而每个记录由若干字段组成,字段之间使用逗号分隔。
1、CSV 格式的基本规则
- 分隔符:最常用的分隔符是逗号(
,
),但也可以是其他字符,比如分号(;
)或制表符(\t
)。 - 行结束符:每行数据的结尾通常是换行符(
\n
或\r\n
)。 - 引号:如果某个字段包含分隔符、行结束符或引号,则该字段应该用双引号(
"
)括起来,并且内部的双引号需要转义为两个双引号(""
)。 - 空行:通常被忽略。
2、示例 CSV 文件
Name, Age, City
John Doe, 28, New York
Jane Smith, 32, Los Angeles
二、CSV实战示例
1、mapboxGL上传CSV文件,显示图形,导出为Geojson文件
https://dajianshi.blog.csdn.net/article/details/134034353
2、Openlayers实战:绘制多边形,导出CSV文件
https://dajianshi.blog.csdn.net/article/details/132024895
三、JS读取、写入CSV文件
CSV 文件在 JavaScript 中可以通过多种方式来处理。这里我将向您展示如何使用 JavaScript 进行 CSV 文件的读取和写入。由于浏览器环境通常不支持直接文件操作,我们将使用 Node.js 环境来进行演示。
1、写入 CSV 文件
在 Node.js 中,我们可以使用 fs
(文件系统模块)来创建和写入 CSV 文件。这里是一个简单的示例,说明如何创建并写入 CSV 文件:
const fs = require('fs');
// 数据数组
const data = [
['Name', 'Age', 'City'],
['John Doe', 28, 'New York'],
['Jane Smith', 32, 'Los Angeles']
];
// 将数据转换成 CSV 字符串
function arrayToCsv(data) {
return data.map(row => row.join(',')).join('\n');
}
// 写入 CSV 文件
fs.writeFile('people.csv', arrayToCsv(data), (err) => {
if (err) throw err;
console.log('CSV file has been written.');
});
2、读取 CSV 文件
读取 CSV 文件时,可以使用 fs
模块读取文件内容,然后解析 CSV 字符串。这里有一个简单的函数用于解析 CSV 字符串:
function parseCsv(csvString) {
return csvString.split('\n').map(line => line.split(','));
}
// 读取 CSV 文件
fs.readFile('people.csv', 'utf-8', (err, data) => {
if (err) throw err;
const parsedData = parseCsv(data);
console.log(parsedData);
});
3、使用第三方库简化操作
虽然上面的方法可以工作,但在实际项目中通常会使用一些第三方库来简化 CSV 文件的读写操作,例如 csv-parser
和 csv-writer
。下面是一些示例代码,展示如何使用这些库进行 CSV 文件的操作。
安装所需的库
首先确保你已经安装了 Node.js 和 npm,然后运行以下命令来安装必要的库:
npm install csv-parser csv-writer
写入 CSV 文件
const createCsvWriter = require('csv-writer').createObjectCsvWriter;
const data = [
{ Name: 'John Doe', Age: 28, City: 'New York' },
{ Name: 'Jane Smith', Age: 32, City: 'Los Angeles' }
];
const csvWriter = createCsvWriter({
path: 'people.csv',
header: [
{ id: 'Name', title: 'NAME' },
{ id: 'Age', title: 'AGE' },
{ id: 'City', title: 'CITY' }
]
});
csvWriter
.writeRecords(data)
.then(() => console.log('The CSV file was written successfully'))
.catch(err => console.error('Error writing CSV file:', err));
读取 CSV 文件
const fs = require('fs');
const csv = require('csv-parser');
fs.createReadStream('people.csv')
.pipe(csv())
.on('data', (row) => console.log(row))
.on('end', () => console.log('CSV file successfully processed'));
这些示例代码展示了如何在 Node.js 环境下使用 JavaScript 来处理 CSV 文件。你可以根据你的具体需求调整这些代码。