d3.json albers投影和美國ecoregions

Question

我有一個topojson文件，我使用mapshaper在線工具創建。我從ftp://newftp.epa.gov/EPADataCommons/ORD/Ecoregions/us/ （us_eco_l3.zip）下載了原始shapefile。我使用ESRI的ArcMap 10.2來「解散」shape文件，所以我最終得到了85個獨特的ecoregions。然後我用mapshaper（http://www.mapshaper.org/）將shapefile轉換爲topojson文件。

但是，我無法讓topojson文件在我的網頁中正確顯示。我懷疑我的預測是錯誤的。但我無法弄清楚我出錯的地方。

下面是我在我的網頁代碼（我使用ASP.NET MVC 5）：

<style> 
.region { 
    stroke: #fff; 
    fill: #005DAA; 
} 

.hover { 
    fill: yellow; 
} 

.selected{ 
    stroke: #fff; 
    fill: #00C800; 
} 

#regName{ 
    position: absolute; 
    top: 150px; 
    height: 22px; 
    width: 250px; 
    padding: 3px; 
    text-align:center;   
} 

<input type="text" id="regName" disabled /> 
<div id="map" style="text-align:center"> 
    <h1>US Ecoregions Level III</h1> 
    <h3 id="reg"></h3>  
</div> 

<script src="//d3js.org/d3.v3.min.js"></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 

<script type="text/javascript"> 
    var width = 960, 
     height = 400, 
     centered; 

    var projection = d3.geo.albers() 
     .center([-96.5, 38.68]) 
     .scale(1000) 
     .rotate([0, 0]); 

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

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

    queue() 
     .defer(d3.json, "/topo/ecol3.json") 
     .await(ready); 

    function ready(error, us) { 
     svg.append("g") 
      .selectAll("path") 
      .data(topojson.feature(us, us.objects.ecol3).features) 
     .enter() 
      .append("path") 
      .attr("d", path) 
      .attr("class", "region") 
      .on("mouseover", function (d) { 
       d3.select("h3").text(d.properties.US_L3NAME); 
       d3.select(this).attr("class", "region hover"); 
      }) 
      .on("mouseout", function (d) { 
       d3.select("h3").text(""); 
       d3.select(this).attr("class", "region"); 
      }) 
      .on("click", function (d) { 
       var name = d.properties.US_L3NAME; 
       var region = d3.select("#regName"); 
       region.property("value", name); 
      }); 
    } 
</script> 

得到任何幫助。

Answer 1

有兩個問題會導致您的地理數據顯示出現問題。

1. 您的數據投影到平面上已經，D3預測採取緯度並在球體代表點的經度和它們投射在平面上。你可以看到，數據在.prj文件，它是shape文件的一部分已經預測：

   PROJCS["USA_Contiguous_Albers_Equal_Area_Conic_USGS_version",...

您可以通過使用項目工具（ArcToolbox->數據管理 - 在ArcMap解決這個問題> Projections and Transformations-> Project）並將投影設置爲WGS84。或者，在MapShaper中（確保將prj文件複製到窗口中），在控制檯類型proj wgs84中。

D3要求數據採用緯度長格式，WGS84是最理想的，但使用NAD83作爲基準不會產生任何問題（尤其是在北美）。

---

你的投影參數用於阿爾伯斯投影不正確地設置。如果設置了阿爾伯斯投影有一個[0,0]旋轉中心點（和縮小東西喜歡.scale(150)），你會得到這樣的：

d3.geo.albers() 
    .rotation([0,0]) 
    .center([0,0]) 

如果您只有使用中心才能關注您感興趣的領域，您只需簡單地將此圖像放到您感興趣的區域，當然，美國將以最可能不希望的方式進行輪換。相反，您需要按照經度旋轉地球儀，以便您的興趣區域在中間垂直對齊。對於美國，您希望將投影儀在投影下方旋轉100度（因此-100度現在位於中心，-100的子午線垂直）。因爲你在旋轉地球，所以你需要你關注的經度的負值。通過應用的旋轉[100.0]我們得到的東西，如：

d3.geo.projection() 
    .rotation([100,0]) 
    .center([0,0]) 

現在你可以向下向上平移以Y軸找到你感興趣的領域。當然，用合適的比例因子放大所需的全部。

如果你現在以x爲中心，比如說-50，那麼相對於你的自轉來說，它將主子午線置於西100度，所以你實際上將以西150度爲中心）

阿爾伯斯投影還設置了平行線，地球上的線與錐形投影相交，就像一個阿爾伯斯一樣，放在它上面就像一頂帽子。這些應該在你感興趣的領域，但不是北方和南方的極端情況，因爲它們兩側的變形都被最小化了。總之這給你喜歡的一種形式：

d3.geo.albers() 
    .parallels([a,b]) 
    .center([0,y]) 
    .rotate([-x,0]) 

然而，說這一切，默認阿爾伯斯投影在D3（至少V3），主要集中在美國：

這僅僅基於：var projection = d3.geo.albers()

也可以使用投影數據，但是這種方法不太常見，並且與其他需要投影的數據不匹配