Question

我有几个geojson图层，我使用组在彼此之上进行分层。我使用Mike在这里找到的答案将地图集中在给定的geojson文件上 - ＆gt; Center a map in d3 given a geoJSON object

我的问题，我认为它与JavaScript的异步性有关，就是如果我将投影定义放在一个非常大的geojson上，那么其他geojson功能就不能正确投影。

如何使用此系统正确翻译和缩放地图？有没有更好的方法来解决这个问题？

修改

我发现了一种快速而肮脏的方法，但它不允许我以编程方式更改投影。我已经使用调试器来获取s和t的值，然后我必须在定义投影之后，在调用geojson函数之前在脚本的开头硬编码这些值。

这是我的代码：

var width = 1100,
    height = 850;

var projection = d3.geo.mercator();

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

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

var landGroup = svg.append("g"),
    waterGroup = svg.append("g"),
    urbanGroup = svg.append("g"),
    borderGroup = svg.append("g");

d3.json("geoData/naLand.geojson", function(land) {

    projection
        .scale(1)
        .translate([0,0]);

    var b = path.bounds(land),
        s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
        t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

    projection
        .scale(s)
        .translate(t);

    landGroup.selectAll("path")
        .data(land.features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("fill", "#888888")
        .attr("stroke", "#111111")              
})

d3.json("geoData/naWater.geojson", function(water) {

    waterGroup.selectAll("path")
        .data(water.features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("fill", "#C9DBFF")
        .attr("stroke", "#0066FF")

})

d3.json("geoData/PNW_Municipalities.geojson", function(urban) {

    urbanGroup.selectAll("path")
        .data(urban.features)
        .append("path")
        .attr("d", path)
        .attr("fill", "#666666")
        .attr("stroke", "#666666")  

})

d3.json("geoData/CanadianBorder.geojson", function(border) {

    borderGroup.selectAll("path") 
        .data(border.features) 
        .enter() 
        .append("path") 
        .attr("d", path) 
        .attr("stroke", "#555555")
        .attr("stroke-width", "3")
        .attr("stroke-dasharray", "2,2")
        .attr("fill", "transparent")                
})

Answer 1

您可以使用queue.js来加入所有json加载，并在加载所有json时执行绘制投影所需的操作。

如下所示：

{{1}}

工作示例here

希望这有帮助！

当存在多个geojson文件时，从单个geojson投影数据

修改

1 个答案: