我正在尝试使用 Vega-Lite 绘制地图。然而，作为一个学生，才刚刚开始自学。有几件事我很困惑。不知道JavaScript 和 Vega-Lite 的关系？我们可以使用 Vega-Lite 来绘制地图。那么，为了绘制地图，JavaScript 扮演了什么角色呢？（即以“JavaScript”格式和“Vega-Lite”格式编写代码有什么区别？“Vega-Lite”是一种新的编程语言吗？）（即我试图搜索如何编写 JavaScript 编码，结果看起来很不同于为 Vega-Lite 提供的那个寺庙）我不知道如何将 Vega-Lite 代码与 HTML 代码结合起来（以便放入网页）。我试图在 Vega-Lite 网站 ( https://vega.github.io/vega-lite/tutorials/getting_started.html )上查看神庙。但是，如果我想发布另一个 vega-Lite 而不是给定的示例，我不明白应该更改和组合现有代码的哪一部分（因为他们没有太多评论，我才刚刚开始学习它。我这里写的下面的代码在网页上没有给我任何'Map'，不知哪里出错了？# Codes I tried to combine with HTML (This is just a purely Vega-Lite code on its website)<!DOCTYPE html><html> <head> <title>Vega-Lite Bar Chart</title> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vega@5.16.1"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.16.8"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script> <style media="screen"> /* Add space between Vega-Embed links */ .vega-actions a { margin-right: 5px; } </style> </head> <body> <h1>Template for Embedding Vega-Lite Visualization</h1> <!-- Container for the visualization --> <div id="vis"></div> <script> // Assign the specification to a local variable vlSpec. var vlSpec = { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "width": 500, "height": 300, "data": {"url": "data/airports.csv"}, "projection": {"type": "albersUsa"}, "mark": "point", "encoding": { "longitude": {"field": "longitude", "type": "quantitative"}, "latitude": {"field": "latitude", "type": "quantitative"}, "size": {"value": 10} }, "config": {"view": {"stroke": "transparent"}} };GeoJSON、TopoJSON 和 excel 文件之间有什么关系？ Vega-Lite 支持 TopoJSON。我们还说我们可以使用“excel/csv 文件”作为数据域。那为什么还需要将GeoJSON转为TopoJSON并放入HTML中呢？他们在这里扮演什么角色？如果我的数据集已经包含“经度”和“纬度”以绘制地图，我可以避免这一步吗？（即 GeoJSON、TopoJSON 只是另一种类似于 excel 的数据集吗？）
1 回答
千巷猫影
TA贡献1829条经验 获得超7个赞
按顺序回答你的问题：
不知道JavaScript和Vega-Lite有什么关系？
Vega-Lite 是两件事：一种通过 JSON 指定图表的语法，以及一组 javascript 库来摄取此 JSON 并呈现图表。
我不知道如何将 Vega-Lite 代码与 HTML 代码结合起来（以便放入网页）。
将 Vega-Lite 图表放在网页上需要将 vega-lite 图表规范（您称之为 Vega-Lite 代码）传递给vega-embed javascript 库（通过 javascript 发生，通常在 HTML 页面中）。您的示例是正确的，只是它引用了可能不存在的本地数据：
"data": {"url": "data/airports.csv"},将其更改为完整的 vega-datasets URL，图表将呈现在页面上：
"data": {"url": "https://vega.github.io/vega-datasets/data/airports.csv"}
GeoJSON、TopoJSON 和 excel 文件之间有什么关系？
这些都是表示数据的不同格式。Vega-Lite 支持 TopoJSON 来指定地理边界；如果您有其他格式的地理数据，则必须将其转换为 TopoJSON 才能与 Vega-Lite 一起使用。
请注意，只有地图边界需要 TopoJSON。如果您有包含纬度和经度列的 CSV 或 JSON 数据集，则可以将它们显示在地图背景上，而无需转换为其他格式。
添加回答
举报
0/150
提交
取消