个人中心
gpt4 book ai didi

javascript - Geojson map 未显示

转载 作者：行者123 更新时间：2023-11-29 10:32:31 25 4
gpt4 key购买 nike

我正在努力创建 map 。我只是从这里 (https://github.com/dwillis/nyc-maps) 使用纽约时报 geojsons 之一(“census_tracts_2010.geojson”)。

如果有人可以查看我下面的代码，并告诉我为什么没有 map 显示给我，尤其是我没有错误，我将不胜感激。如果有问题，那么它可能在最后两行中。

第 1 步 - 将 GEOJSON 转换为 TOPOJSON在终端中运行这个

geo2topo census_tracts_2010.geojson > nyc2.json

第 2 步创建了 index.html(灵感来自 https://bost.ocks.org/mike/map/ )

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script>

var width = 960,
    height = 1160;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("nyc2.json", function(error, uk) {
  if (error) return console.error(error);
  console.log(uk.objects)
  console.log(uk.objects.census_tracts_2010)
  svg.append("path")
      .datum(topojson.feature(uk, uk.objects.census_tracts_2010))
      .attr("d", d3.geo.path().projection(d3.geo.albersUsa()));


});

</script>

我的输出:纯白色网页

更新代码:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script>

var width = 500,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("census_tracts_2010.geojson", function(error, uk) {
  if (error) return console.error(error);

  var subunits = topojson.feature(uk, uk.objects.nyct2010);

  var projection = d3.geo.albers()
   .center([0,40.7])
   .rotate([-74,0])
   .translate([width/2,height/2])
   .scale(65000);

   var path = d3.geo.path()
    .projection(projection);

    svg.append("path")
        .datum(subunits)
        .attr("d", path);
});

</script>

最佳答案

数据源

首先，您引用的 file 已经是一个topopjson。您可以在此 file 中对比与常规 geojson 的差异(来自同一个存储库)。

最明显的区别是 geojson 使用可识别的坐标，而 topojson 使用弧线和可能看起来像任意坐标的坐标。 Topojsons 还以缩放和翻译值结束。

问题

为什么你的 map 没有出现？好吧，这可能是因为在对已经是 topojson 的文件进行 topojsoning 时出现问题，但更可能的选择 - 以及涉及您的其他问题的选择 - 是您没有将 map 聚焦在您感兴趣的区域。这似乎也是您上一个问题中的问题。

您正在使用 geo.albersUsa 投影 - 默认情况下它聚焦于整个美国大陆(它是一个复合投影，因此它包括阿拉斯加和夏威夷的空间)。

仅更改您的代码以使用您引用的 topojson ( census_tracts_2010 ) 我得到:

enter image description here

您的 map 显示正确 - 或者至少按编码显示 - 但整个感兴趣区域看起来可能是一只快速撞击屏幕的小昆虫。

美国阿尔伯斯 vs 阿尔伯斯

您将需要修改您的 map 投影参数，但如果您想保留 AlbersUSA 投影，您将无法居中或旋转，而是使用普通的 Albers 投影。 AlbersUsa 适用于整个国家，我认为它没有居中或旋转方法。

设置 map 参数

要设置阿尔伯斯投影，您需要知道感兴趣区域的纬度和经度中心。比方说 40.7N 和 74W - 我使用 Google Earth 进行概括，然后进行调整，直到得到满意的结果。

通常对于 Albers，您还想知道您的标准纬线；但是，在 d3 中，默认平行线是针对美国的。是的，它们可以更具体地用于您的投影(通过选择与您感兴趣区域的上部和下部相交的两条平行线)，但我会在这个答案中将它们排除在外。

D3 中阿尔伯斯投影的一般模式是:

var projection = d3.geo.albers()
   .center([0,y])
   .rotate([-x,0])
   .parallels([a,b]) // don't worry about this in this instance
   .translate([width/2,height/2])
   .scale(k);

使用上面的中心坐标并尝试缩小比例我得到了这个:

enter image description here

使用:

var projection = d3.geo.albers()
   .center([0,40.7])
   .rotate([74,0])
   .translate([width/2,height/2])
   .scale(65000);

注意:我已将您的 svg 尺寸修改为更适合您感兴趣区域的形状(与创建英国 map 的演示中的引用 map 尺寸相反)。我的尺寸是:500 x 500。

Albers 投影参数的相对更详细的解释在 answer 中。 .

关于javascript - Geojson map 未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42609771/

25 4 0
文章推荐： mysql - 无法将我的 React 应用程序连接到 MySql
文章推荐： java - 在 MySQL 表中插入多行 : Threading vs BatchUpdate
文章推荐： mysql - 仅显示3天内未添加评论的用户的ID
文章推荐： MySQL触发器: #1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com