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

Question

我有几个 geojson 层，并且我使用组将其分层。我使用此处找到的 Mike 答案将 map 集中在给定的 geojson 文件上 -> Center a map in d3 given a geoJSON object

我的问题是，如果我将投影定义放在相当大的 geojson 上，其他 geojson 功能将无法正确投影，而且我相信这与 JavaScript 的异步特性有关。

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

编辑

我找到了一种快速而肮脏的方法来做到这一点，但它不允许我以编程方式更改投影。我已经使用调试器来获取 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 时执行绘制投影的必要操作。

如下所示:

queue()
    .defer(d3.json, 'geoData/naLand.geojson')//this will load the json for land
    .defer(d3.json, 'geoData/PNW_Municipalities.geojson')//muncipality
    .defer(d3.json, 'geoData/CanadianBorder.geojson')//canadaborder
    .await(makeMyMap);

function makeMyMap(error, land, muncipality,canadaborder) {
//make your map
}

工作示例 here

希望这有帮助!