打破坐标束缚：在 Deck.gl 中创建原生坐标系
2024-03-12 09:36:15
打破维度界限：在 Deck.gl 中创建原生坐标系
摘要
本文探究了如何在 Deck.gl 中创建非地理数据可视化，解决了由地理坐标限制带来的常见问题。通过引入一个虚拟地球的概念，本文提供了一个逐步指南，指导读者如何绕过这些限制，开启更广泛的数据可视化可能性。
问题：地理坐标的束缚
使用 Deck.gl 创建数据可视化时，依赖于地理坐标可能会带来限制。对于非地理数据，将网格层坐标系设置为笛卡尔坐标系时，可能会遇到错误。这是因为 Deck.gl 期望存在初始纬度和经度值。
解决方法：引入虚拟地球
为了解决这个问题，本文提出了创建虚拟地球的概念。这个虚拟地球充当非地理数据的载体，为数据提供一个坐标系，而无需实际使用地理坐标。
具体步骤
-
定义虚拟地球边界： 为非地理数据定义虚拟地球的最小和最大坐标。
-
创建地理经纬度数据： 使用虚拟地球的边界创建均匀分布的地理经纬度数据集。
-
投影数据： 将地理经纬度数据投影到笛卡尔坐标系。
-
使用投影后的数据： 将投影后的数据作为网格层的
data属性，并使用coordinateSystem参数指定COORDINATE_SYSTEM.CARTESIAN。
示例代码
// 定义虚拟地球边界
const bounds = [[-500, -500], [500, 500]];
// 创建地理经纬度数据
const data = [];
for (let i = 0; i < 100; i++) {
const lon = Math.random() * (bounds[1][0] - bounds[0][0]) + bounds[0][0];
const lat = Math.random() * (bounds[1][1] - bounds[0][1]) + bounds[0][1];
data.push({lon, lat});
}
// 使用虚拟地球数据创建网格层
const gridLayer = new GridLayer({
id: "one-layer",
data,
getPosition: (d) => d.projected_position,
getRadius: (d) => d.size,
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
});
结论
通过创建一个虚拟地球，打破了地理坐标的限制，允许我们在 Deck.gl 中创建非地理数据可视化效果。这种技术为在 Deck.gl 中探索更广泛的应用程序开辟了可能性，包括基于图像、图表和抽象数据的可视化效果。
常见问题解答
-
为什么需要创建一个虚拟地球？
为了创建非地理数据的可视化效果，我们需要一个坐标系，而虚拟地球提供了一个框架，无需依赖地理坐标。 -
虚拟地球的边界如何确定？
虚拟地球的边界由非地理数据的范围决定。 -
投影数据时应该使用什么方法？
可以使用像deck.gl-core/mvt这样的库来投影地理经纬度数据。 -
网格层中的
getPosition和getRadius函数有什么作用？
getPosition函数指定网格点的坐标，而getRadius函数指定网格点的半径。 -
这种技术有哪些实际应用？
这种技术可以用于基于图像、图表和抽象数据的可视化效果，以及其他不受地理坐标限制的应用。
