javascript - d3 中的 Lambert 圆锥共形投影

标签 javascript d3.js projection map-projections

我正在尝试在我的祖国奥地利的 SVG map 上投影一组点([long, lat] 元组):

https://commons.wikimedia.org/wiki/File:Austria-geographic_map-blank.svg

维基媒体上对 SVG 文件的描述给出了投影名称和 map 的边界:

Lambert Conformal Conic, WGS84 datum
Geographic limits of the map:

West: 17.2° W
East: 9.3° W
North: 49.2° N
South: 46.0° N

虽然我很天真,但我认为这些信息足以用 D3 创建正确的投影类型。

这是我首先尝试的:

    let gcc = d3.geoConicConformal()
        .fitSize([width, height], bbox)

其中 bbox 是一个 GeoJSON 多边形,表示上面给出的 map 的边界。

不幸的是,结果不是正确的投影:

enter image description here

现在,通过阅读 D3 文档,我可以猜测我必须为投影指定更多参数,例如两条标准纬线。不幸的是,我不知道它们是什么,并且在 map 的西部和东部边界周围尝试各种值都没有用。我假设它们可以从我对 map 的了解中推导出来,或者可能不是?

其次,让我感到困惑的是,投影不仅旋转错误,而且缩放比例也不正确——我认为使用 .fitSize 可以解决这个问题。

谁能给我任何关于正确设置兰伯特圆锥保形投影的指示?

最佳答案

Fitsize 将正确平移和缩放 map ,但是,您需要旋转圆锥投影,并且如您所述,设置平行线。

平行线:

有一个记录在案的奥地利 Lambert Conic Conformal map 投影,可以找到它的规范 herehere .在这种情况下,可能正确的平行线是 [46,49],尽管您使用的 map 可能是自定义投影。

旋转

现在您需要沿 x 轴按经度旋转 map 。圆锥图通常沿 x 轴旋转并以 y 轴为中心 (请在此处查看我的回答 here 以图形方式解释原因(以及平行线如何改变投影))

旋转会移动世界,以便您感兴趣的区域正确对齐,这样 map 的中央子午线在您的 map 中是垂直的。根据上述投影规范,中央子午线应位于 13 度 20 分(13.333 度),但两个引用之间存在细微差异。沿 x 轴的旋转设置为该值的负值。

使用这些参数:

d3.geoConicConformal()
    .parallels([46,49])
    .rotate([-13.333,0])
    .fitSize([width,height],bbox)

我非常适合我非常低采样的 goto world topojson:

enter image description here

svg 图像使用的参数可能与发布的参数(舍入、拼写错误)略有不同,或者平行线是自定义选择的;然而,这应该是一个相当紧密的配合。

关于javascript - d3 中的 Lambert 圆锥共形投影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41282911/

相关文章:

javascript - 获取溢出隐藏页面中滚动的像素数量

javascript - 如何解决 Google Chrome 中的 Roboto 字体加载问题?

javascript - 即使具有唯一的 id 值,d3 退出选择也会显示为空

opengl - 如何在opengl中绘制平截头体

c++ - OpenGL绘制一个矩形填充窗口

javascript - 使用清晰设计系统构建 Angular 2 应用程序

d3.js - 使用 d3.js 绘制 topojson 文件(纽约市行政区和人口普查区)

javascript - D3 鼠标悬停圆的坐标

NHibernate 投影 (QueryOver.SelectList) 限制

javascript - 动态加载 CSS