Question

我正在尝试配置一张地图，其中显示了美国的一些视图，其中有一些加拿大和一些墨西哥顶级人物。我在www.geojson.io中做了一个基本的捕获：

http://geojson.io/#id=gist:anonymous/b2f65ddc2a28013b0c9c7ecab5d7427f&map=4/39.37/-97.16

如何使用d3.js在浏览器地图中显示？我可以使用world-110m.json显示世界的浏览器地图，这似乎是一个常用的geojson文件：

https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json

这是我用来将geojson显示为浏览器地图的d3代码：

d3.json("json/world-110m.json", function (error, topology) {
    if (error) return console.warn(error);
    g.selectAll("path")
        .data(topojson.object(topology, topology.objects.countries)
            .geometries)
    .enter()
        .append("path")
        .attr("d", path)
});

World-110m.json似乎有很多我不需要的额外信息，因为我只需要显示上面geojson.io地图中捕获的区域的平面地图。我是否需要构建我的geojson，更新我的d3代码或两者？

Answer 1

我不确定geojson.io正在做什么，但它返回的geojson（两个相同的多边形）似乎与任何类似你选择的东西无关。

对于它的价值，这里是＆＃34;地图＆＃34;来自geojson：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
  <script>
    var geoJson = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [-129.0234375,
                23.160563309048314
              ],
              [-129.0234375,
                52.53627304145948
              ],
              [-65.302734375,
                52.53627304145948
              ],
              [-65.302734375,
                23.160563309048314
              ],
              [-129.0234375,
                23.160563309048314
              ]
            ]
          ]
        }
      }, {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [-129.0234375,
                23.160563309048314
              ],
              [-129.0234375,
                52.53627304145948
              ],
              [-65.302734375,
                52.53627304145948
              ],
              [-65.302734375,
                23.160563309048314
              ],
              [-129.0234375,
                23.160563309048314
              ]
            ]
          ]
        }
      }]
    };


    var width = 960,
      height = 600;


    var projection = d3.geo.albersUsa()
      .scale(500)
      .translate([width / 2, height / 2]);


    var path = d3.geo.path()
      .projection(projection);


    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    svg.append("g")
      .selectAll("path")
      .data(geoJson.features)
      .enter().append("path")
      .attr("d", path);
  </script>
</body>

</html>

＆＃13;

尝试为特定地图配置geojson文件

1 个答案: