D3.js 地理

Posted 2023-04-23

参考技术A

D3 的方法不同于所谓的栅格方法，例如 Leaflet 和 Google Maps。这些 预渲染地图特征为图像瓦片 ，它们从网络服务器加载并在浏览器中拼凑在一起形成地图。

通常，D3以 GeoJSON 的形式请求 矢量地理信息，并在浏览器中将其呈现为 SVG 或 Canvas 。

光栅地图通常看起来更像传统的印刷地图，其中可以显示很多细节（例如地名、道路、河流等），而不会影响性能。但是，使用矢量方法更容易实现动画和交互等动态内容。（将这两种方法结合起来也很常见。）

GeoJSON 是一种使用 JSON 格式表示地理数据的标准，完整的规范位于 geojson.org 。每个要素都由 几何 （国家的简单多边形和廷巴克图的一个点）和 属性 组成。D3 在渲染 GeoJSON 时会处理大部分细节，因此只需对 GeoJSON 有基本的了解即可开始使用 D3 映射。

投影函数采用经度和纬度坐标（以数组的形式 [lon, lat] ）并将其转换为 x 和 y 坐标。投影数学可以变得相当复杂，但幸运的是 D3 提供了大量的投影函数。

地理路径生成器是一个接受 GeoJSON 对象并将其转换为 SVG 路径字符串的函数。可以使用该方法创建生成器 .geoPath 并使用投影功能对其进行配置。

GeoJSON 是一种基于 JSON 的结构，用于指定地理数据。通常，它是使用mapshaper、ogr2ogr、shp2json或QGIS等工具从 shapefile 数据（一种广泛用于 GIS 领域的地理空间矢量数据格式）转换而来的。

shapefile 的一个来源是Natural Earth，如果开始，我建议尝试使用mapshaper来导入 shapefile 并导出为 GeoJSON。它还可以按属性过滤（例如，如果您想按大陆过滤国家）。

可以在不详细了解 GeoJSON 规范的情况下创建地图，因为诸如 mapshaper 和 D3 之类的工具可以很好地抽象出细节。

到目前为止，我们已经在示例文件中嵌入了 GeoJSON 对象。实际上，GeoJSON 将位于一个单独的文件中，并使用 ajax 请求加载。但在本章的其余部分，我们将使用以下方式加载 GeoJSON 文件：

d3.geoInterpolate()函数接受 0 到 1 之间的输入并在两个 [lon, lat] 位置之间进行插值：

可以使用 d3.geoContains 接受 GeoJSON 功能和 [lon, lat] 数组并返回布尔值来检查鼠标或触摸事件是否发生在要素边界内(SVG渲染情况下有效)

异步函数 |等待不等待承诺 Partially D.js

【中文标题】异步函数 |等待不等待承诺 Partially D.js

【英文标题】：Async function | Await not waiting for promise Partially D.js异步函数 |等待不等待承诺 Partially D.js

【发布时间】：2020-11-19 19:55:41

【问题描述】：

async function find(a) await message.guild.members.resolve(a).displayName

let Del = find("350994324072300547")
message.channel.send(Del)

我希望 Del “成为” message.guild.members.resolve("350994324072300547").displayName 和 find 等待承诺。我做错了什么？

我得到的结果是[object Promise]

【问题讨论】：

你必须在调用“find”函数的前面加上“await”：let Del = await find

已经试过了，await is only valid in async function 说 (Talk bout let Del)

【参考方案1】：

在 find 调用中包含 await。并将整个代码包装在 IIFE 异步函数中。

(async function() 
    async function find(a) 
       return await message.guild.members.resolve(a).displayName
    

    let Del = await find("350994324072300547");

    message.channel.send(Del);
)();

【讨论】：

已经试过了，await is only valid in async function 说 (Talk bout let Del)

编辑了我对该问题的答案。您必须将代码包装到一个立即调用/调用的函数中。

它不应该抛出同样的错误。还有什么不对劲的。我们将代码包装在一个函数中，并在函数前面加上 async 关键字。这应该会删除错误await is only valid in async function。你确定你面临同样的错误吗？

我想稍后将 Del 作为不同消息的一部分发送，我还有多个具有不同值的变量作为 Del

谢谢！我刚刚意识到可以添加我的其他变量和其他消息！