”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 修复 D3.js GeoJSON 绘图问题:如何纠正缠绕顺序?

修复 D3.js GeoJSON 绘图问题:如何纠正缠绕顺序?

发布于2024-11-09
浏览:115

Fixing D3.js GeoJSON Drawing Issue: How to Correct the Winding Order?

D3.js 错误绘制 GeoJSON:缠绕顺序问题

当尝试使用 geoJSON 数据可视化俄罗斯地区时,程序员遇到了一个问题其中 D3.js 绘制单个黑色矩形而不是所需的地图轮廓。这种差异是由于 geoJSON 文件中坐标的缠绕顺序问题引起的。

了解缠绕顺序

GeoJSON 坐标可以按顺时针或逆时针顺序排列,表示形状的内部或外部。大多数工具和验证器都会忽略此顺序,但 D3.js 使用椭圆体数学,这需要正确缠绕以避免创建覆盖整个地球的倒置多边形。

识别问题

检查 SVG 路径后,很明显,有些路径是准确绘制的,而另一些路径覆盖了除预期空间之外的整个星球。这是因为数据包含顺时针和逆时针缠绕的组合,导致 D3.js 将倒多边形视为地球上非目标区域的所有物体。

解决问题

要解决此问题,必须重新排序坐标。一个方便的解决方案是利用 turf.js 库:

var fixed = features.map(function(feature) {
    return turf.rewind(feature,{reverse:true});
});

这将倒转每个多边形以遵循 geoJSON 规范指定的正确缠绕顺序。然而,D3.js 使用相反的缠绕顺序,因此反向参数设置为 true。

调整地图视图

固定缠绕顺序后,进一步调整可以用来增强地图的外观。通过在投影中添加 fitSize 方法,可以对地图进行缩放和平移,以获得更合适的视图。

版本声明 本文转载于:1729549888如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何从具有不同数组长度的字典创建 Pandas DataFrame?
    如何从具有不同数组长度的字典创建 Pandas DataFrame?
    从条目长度不均匀的字典创建 DataFrame在 Python 中,可以从每个条目保存一个 Numpy 数组的字典创建 DataFrame。然而,当条目之间的数组长度不同时,就会出现挑战。默认情况下,Pandas 需要统一长度的数组,从而导致类似“ValueError: arrays must al...
    编程 发布于2024-11-09
  • 如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    MySQL配置不正确:相对路径的问题在Django中运行python manage.py runserver时,可能会遇到以下错误:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...
    编程 发布于2024-11-09
  • Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta:列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而,随着 Beta 2 的后续发布,这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    编程 发布于2024-11-09
  • 如何防止 Pandas 在保存 CSV 时添加索引列?
    如何防止 Pandas 在保存 CSV 时添加索引列?
    避免使用 Pandas 保存的 CSV 中的索引列使用 Pandas 进行修改后保存 csv 文件时,默认行为是包含索引列。为了避免这种情况,可以在使用 to_csv() 方法时将索引参数设置为 False。为了详细说明,请考虑以下命令序列:pd.read_csv('C:/Path/to/file....
    编程 发布于2024-11-09
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-11-09
  • 为什么在 Java 中使用相同的种子时会得到相同的随机数?
    为什么在 Java 中使用相同的种子时会得到相同的随机数?
    具有固定种子的Java随机数:为什么输出相同?在您的代码中,您定义了一种使用以下命令生成随机数的方法指定的种子。但是,您会注意到,当您提供相同的种子时,所有 100 个生成的数字都是相同的。此行为是预期的,因为在 Random 构造函数中使用相同的种子会产生可预测的数字序列。种子是初始化随机数生成器...
    编程 发布于2024-11-09
  • jQuery Chaining 如何简化开发并提高代码效率?
    jQuery Chaining 如何简化开发并提高代码效率?
    理解 jQuery 中的对象和方法链接在 jQuery 中,链接允许在单个语句中串联多个 jQuery 方法。这使开发人员能够简化代码并轻松执行复杂的操作。链接的基本原理涉及每个 jQuery 方法的返回值。当调用 jQuery 方法时,它通常返回一个表示所选元素的 jQuery 对象。这允许在同一...
    编程 发布于2024-11-09
  • 除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换,使您能够在条件语句中直接使用其实例“t”。然而,这种显式转换提出了一个问题:“t”在哪里可以在不进行强制转换的情况下用作 bool?上下文转换场景C 标准指定了四种值可以根据上下文转换为 bool 的主要场景:语句:if、w...
    编程 发布于2024-11-09
  • Hono.js 基准测试:Node.js、Deno 和 Bun — 哪个最快?
    Hono.js 基准测试:Node.js、Deno 和 Bun — 哪个最快?
    Deno 2.0 刚刚发布,并声称比 Bun 和 Node.js 更快,同样,Bun 也声称更快。这引起了我的兴趣,所以我决定测试它们的性能,看看它们在现实场景中的比较。 为了公平比较,我需要选择一个与所有三种 JavaScript 运行时环境(Node.js、Deno 和 Bun)兼容的框架。这就...
    编程 发布于2024-11-09
  • 大批
    大批
    方法是可以在对象上调用的 fns 数组是对象,因此它们在 JS 中也有方法。 slice(begin):将数组的一部分提取到新数组中,而不改变原始数组。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index p...
    编程 发布于2024-11-09
  • 何时应该使用 Tkinter 的 Entry Get 函数来有效检索输入?
    何时应该使用 Tkinter 的 Entry Get 函数来有效检索输入?
    Tkinter Entry 的 Get 函数:深入探讨其功能和用法在 Tkinter 中,Entry 小部件通常用于收集用户输入以进一步收集用户输入然而,与 Entry 关联的 get() 函数通常无法产生所需的结果,这可能会让开发人员感到困惑。本文深入探讨 get() 的概念,全面了解其执行和应用...
    编程 发布于2024-11-09
  • 如何克服 PHP 中日期表示的 2038 限制?
    如何克服 PHP 中日期表示的 2038 限制?
    PHP 中的日期表示:克服 2038 年限制虽然 PHP 的原生日期函数在 2038 年有一个截止日期,但还有其他方法处理超出此限制的日期。其中一种方法是仅存储年、月和日,而忽略小时、分钟、秒和毫秒部分。通过丢弃这些附加时间部分,可以显着扩展可表示日期的范围。这是因为这些组件中的每一个都占用了 PH...
    编程 发布于2024-11-09
  • 如何在 Go (Gorilla) 中向特定客户端发送有针对性的 Websocket 更新?
    如何在 Go (Gorilla) 中向特定客户端发送有针对性的 Websocket 更新?
    在 Go (Gorilla) 中向特定客户端发送 Websocket 更新尽管是 Go 新手,但您寻求有关实现 Websocket 通信的指导您的预输入项目。您已尝试利用 Gorilla 的 GitHub 存储库中的示例,但在理解如何识别特定客户端并针对 websocket 更新进行定位方面遇到了挑...
    编程 发布于2024-11-09
  • 使用swoole作为基于ESP6的脚本可编程控制器的云端物联网网关框架
    使用swoole作为基于ESP6的脚本可编程控制器的云端物联网网关框架
    脚本可编程控制器的本地功能已经基本完成,开始实现远程相关功能。 远程系统整体架构如下: 使用ESP8266的SDK实现tcp服务器和tcp客户端。 在tcp服务器的基础上编写http协议解析代码,设计简单的http服务器,处理与浏览器的数据交互,包括内置网页的下载,并使用ajax技术获取状态并保存数...
    编程 发布于2024-11-09
  • 为什么在 Java 的 Random 类中设置种子会返回相同的数字?
    为什么在 Java 的 Random 类中设置种子会返回相同的数字?
    Java随机数生成:为什么设置种子返回相同的数字?尽管将Random类的种子设置为特定值,但随机数生成器始终返回相同的数字。让我们探讨一下可能导致此问题的原因。了解 Random 类和种子初始化Java Random 类旨在生成伪随机数。默认情况下,它使用其内部时钟作为种子值,使其生成相对可预测的数...
    编程 发布于2024-11-09

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3