标签：map-projections d3-js geo javascript
我玩过d3js(v5)地图,
我正在尝试生成这张地图(屏幕截图是从随机网站上截取的),
对于我的特殊情况,无需介绍南极洲.
我在这里阅读了文档：https://github.com/d3/d3-geo#projections,
然后按照说明进行操作并使用了geoMercator,得到了这张平面地图,该地图由于某种原因在北顶被截断.
获取第一张地图布局的正确方法是什么？
有什么建议么？
解决方法:
您正在查看的投影是Mercator投影.
使用d3.geoMercator(),比例值是从形成投影表面的圆柱体的圆周得出的.比例值是每个弧度的像素数.默认值预计将圆柱的360度拉伸到960像素以上：960 / Math.PI / 2.
对于垂直角距离,没有这样的缩放因子,因为当人们移动到极端经度时,点之间的角距离会越来越大,从而使极点在y轴上将为±无穷大.由于这种墨卡托投影,尤其是网络墨卡托投影通常在±〜85度处被截断.墨卡托的范围为[-180,85]和[180,-85],为正方形.
此限制已合并到d3-geoMercator中,它定义了默认的projection.clipExtent,以便将世界投影到一个正方形,裁剪成大约±85°的纬度.(docs)”
这意味着,如果我们要显示960 x 960像素的d3-geoMercator的完整范围,则可以使用：
d3.geoMercator()
.scale(960/Math.PI/2) // 960 pixels over 2 π radians
.translate([480,480]) // the center of the SVG/canvas
这给了我们：
d3-geoMercator的默认中心为[0°,0°],因此,如果我们希望[0°,0°]位于SVG /画布的中间,我们会平移中心使其位于中间,的翻译为[width / 2,height / 2]
现在我们正在显示整个世界,我们可以进行精炼以仅显示我们想要的部分.最简单的方法可能只是从svg /画布的底部移开像素.使用上面的代码,画布/ svg的高度为700像素(并保持960像素,使用相同的比例和平移),我得到：
我没有从此图像中删除南极洲-只是发生了它被切除而不必将其滤除的情况(这不一定是理想的做法：仍然被绘制).
因此,SVG /画布的宽度为960,高度为700,投影比例为960 / Math.PI / 2,平移[480,480]似乎是可以的.这些值将针对不同的视口大小一起缩放.
使用地图时,通常需要花很多时间才能获得所需的视觉效果,调整projection.translate()或projection.center()可以帮助将地图移至所需位置.但是我们可以通过计算来做到这一点.在这里,我将介绍一种使用projection.fitSize()的方法(尽管如果没有额外的步骤,这将无法解决所需的宽高比).
Project.fitSize([width,height],geojson)接受一个数组,该数组指定SVG / canvas和geojson对象的尺寸,并调整投影比例并转换值,以便geojson功能包含在SVG / canvas中. geojson功能可能是您要显示的世界的边界框,因此您可以使用：
projection.fitSize([width,height], {
type: "Polygon",
coordinates: [[
[-179.999,84] ,
[-179.999,-57] ,
[179.999,-57] ,
[179.999,84],
[-179.999,84]
]]
})
格陵兰岛的北端以北约84度,南端约56度为南美洲尖端.这样可以确保您想要看到的整个世界都可见.但是,如上所述,这并不考虑方面,因此,如果将上述范围限制为正方形尺寸,则仍将显示墨卡托的整个范围.
标签：map-projections,d3-js,geo,javascript 来源： https://codeday.me/bug/20191108/2006531.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。