当前位置：首页 > news >正文

从JSON到Tableau可视化：使用Web Data Connector处理地理空间数据教程

news 2026/8/3 23:06:47

从JSON到Tableau可视化：使用Web Data Connector处理地理空间数据教程

【免费下载链接】webdataconnectorBring the data you care about into Tableau项目地址: https://gitcode.com/gh_mirrors/we/webdataconnector

Web Data Connector（WDC）是Tableau的强大工具，能够帮助用户轻松将JSON格式的地理空间数据导入Tableau进行可视化分析。本教程将详细介绍如何利用Web Data Connector处理地震等地理空间数据，让你快速掌握从数据获取到地图可视化的完整流程。

准备工作：了解Web Data Connector核心功能

Web Data Connector是连接Web数据与Tableau的桥梁，特别适合处理JSON格式的地理空间数据。通过WDC，你可以直接从API获取数据并将其转换为Tableau可识别的格式，无需复杂的数据预处理。项目中提供了丰富的示例代码和文档，例如docs/wdc_get_data.md详细介绍了数据获取的方法。

步骤1：获取地理空间JSON数据

以USGS地震数据为例，我们可以通过其API获取JSON格式的地震信息。项目中的Examples/js/earthquakeUSGS.js文件展示了如何连接USGS API并获取数据。核心代码如下：

$.getJSON("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson", function(resp) { var feat = resp.features, tableData = []; for (var i = 0, len = feat.length; i < len; i++) { tableData.push({ "id": feat[i].id, "mag": feat[i].properties.mag, "title": feat[i].properties.title, "location": feat[i].geometry }); } table.appendRows(tableData); doneCallback(); });

这段代码从USGS API获取过去7天内 magnitude 大于4.5的地震数据，并提取了地震的ID、震级、标题和地理位置等关键信息。

步骤2：定义数据模式（Schema）

在将数据导入Tableau之前，需要定义数据模式。Examples/js/earthquakeUSGS.js中通过getSchema方法定义了数据结构：

myConnector.getSchema = function(schemaCallback) { var cols = [{ id: "id", dataType: tableau.dataTypeEnum.string }, { id: "mag", alias: "magnitude", dataType: tableau.dataTypeEnum.float }, { id: "title", alias: "title", dataType: tableau.dataTypeEnum.string }, { id: "location", dataType: tableau.dataTypeEnum.geometry }]; var tableSchema = { id: "earthquakeFeed", alias: "Earthquakes with magnitude greater than 4.5 in the last seven days", columns: cols }; schemaCallback([tableSchema]); };

特别注意location字段的数据类型被定义为tableau.dataTypeEnum.geometry，这使得Tableau能够识别并将其作为地理空间数据处理。

步骤3：创建Web Data Connector界面

为了让用户能够触发数据导入过程，需要创建一个简单的Web界面。Examples/html/earthquakeUSGS.html提供了一个包含"Get Earthquake Data!"按钮的页面：

<body> <div class="container container-table"> <div class="row vertical-center-row"> <div class="text-center col-md-4 col-md-offset-4"> <button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">Get Earthquake Data!</button> </div> </div> </div> </body>

当用户点击按钮时，JavaScript代码会调用tableau.submit()方法，将数据发送到Tableau。

步骤4：在Tableau中使用Web Data Connector

打开Tableau，选择"连接" > "Web数据连接器"
输入Web Data Connector的URL（例如本地开发环境中的http://localhost:8000/Examples/html/earthquakeUSGS.html）
点击界面上的"Get Earthquake Data!"按钮
Tableau将获取并处理数据，之后你就可以开始创建可视化了