在d3.js中從GeoJson中繪製地圖

Question

我正在嘗試使用d3.js和我從卡爾加里市的開放數據目錄下載的形狀文件在JavaScript中繪製地圖。這個城市提供了使用

ogr2ogr -f geoJSON output.json CALGIS.ADM_COMMUNITY_DISTRICT.shp 

的形狀文件，我轉換成以GeoJSON的斑點，然後我修剪的文件到一個單一的形狀，以確保我有事情工作。

{ 
"type": "FeatureCollection", 

"features": [ 

    { "type": "Feature", "properties": { "GEODB_OID": 924.0, "NAME0": "Residential", "OBJECTID": 924.0, "CLASS": "Residential", "CLASS_CODE": 1.0, "COMM_CODE": "NEB", "NAME": "NEW BRIGHTON", "SECTOR": "SOUTHEAST", "SRG": "DEVELOPING", "STRUCTURE": "BUILDING OUT", "GLOBALID": "{086267D0-E600-11DE-8601-0014C258E143}", "GUID": null, "SHAPE_AREA": 2864275.556415310129523, "SHAPE_LEN": 6834.047231250339792 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 2927.794099999591708, 5643887.8214, 0.0 ], [ 2978.190899999812245, 5643875.2194, 0.0 ], [ 3017.59360000025481, 5643861.5459, 0.0 ], [ 3053.779900000430644, 5643845.8617, 0.0 ], [ 3089.161999999545515, 5643826.1559, 0.0 ], [ 3129.111100000329316, 5643798.7318, 0.0 ], [ 3166.111999999731779, 5643767.0104, 0.0 ], [ 3226.018400000408292, 5643707.9734, 0.0 ], [ 3262.138399999588728, 5643679.7766, 0.0 ], [ 3302.66330000013113, 5643652.4609, 0.0 ], [ 3340.545300000347197, 5643633.9568, 0.0 ], [ 3381.070199999958277, 5643617.2149, 0.0 ], [ 3419.833100000396371, 5643605.76, 0.0 ], [ 3464.762900000438094, 5643596.9485, 0.0 ], [ 3557.440000000409782, 5643593.6766, 0.0 ], [ 3743.247600000351667, 5643595.2622, 0.0 ], [ 4549.149299999698997, 5643598.9876, 0.0 ], [ 4557.495199999772012, 5643598.9977, 0.0 ], [ 4558.032899999991059, 5643388.8087, 0.0 ], [ 4556.232300000265241, 5643344.1895, 0.0 ], [ 4557.219800000078976, 5643281.1676, 0.0 ], [ 4568.658999999985099, 5643220.321, 0.0 ], [ 4577.637199999764562, 5643188.2051, 0.0 ], [ 4587.662399999797344, 5643161.1236, 0.0 ], [ 4600.026700000278652, 5643134.0421, 0.0 ], [ 4614.730200000107288, 5643108.298, 0.0 ], [ 4627.428700000047684, 5643088.9062, 0.0 ], [ 4636.785400000400841, 5643077.2044, 0.0 ], [ 4654.315700000151992, 5643055.3688, 0.0 ], [ 4670.024799999780953, 5643037.7422, 0.0 ], [ 4677.24239999987185, 5643028.1856, 0.0 ], [ 4692.314699999988079, 5643007.5858, 0.0 ], [ 4706.75, 5642984.4375, 0.0 ], [ 4721.384600000455976, 5642957.0105, 0.0 ], [ 4728.190799999982119, 5642942.9406, 0.0 ], [ 4733.571000000461936, 5642930.296, 0.0 ], [ 4741.564799999818206, 5642909.5987, 0.0 ], [ 4745.385900000110269, 5642898.9165, 0.0 ], [ 4750.056200000457466, 5642882.7764, 0.0 ], [ 4757.27379999961704, 5642855.5082, 0.0 ], [ 4761.944099999964237, 5642831.0858, 0.0 ], [ 4764.583599999547005, 5642816.8839, 0.0 ], [ 4767.25899999961257, 5642771.221, 0.0 ], [ 4767.212799999862909, 5642753.813, 0.0 ], [ 4767.283999999985099, 5642736.1341, 0.0 ], [ 4767.022300000302494, 5642665.7222, 0.0 ], [ 4766.921799999661744, 5642638.6629, 0.0 ], [ 4766.644999999552965, 5642564.2112, 0.0 ], [ 4764.399000000208616, 5642549.9524, 0.0 ], [ 4763.098699999973178, 5642517.7568, 0.0 ], [ 4759.445700000040233, 5642485.7426, 0.0 ], [ 4753.459599999710917, 5642454.0817, 0.0 ], [ 4745.172600000165403, 5642422.9437, 0.0 ], [ 4734.628999999724329, 5642392.4957, 0.0 ], [ 4721.885400000028312, 5642362.901, 0.0 ], [ 4707.010200000368059, 5642334.3181, 0.0 ], [ 4690.083200000226498, 5642306.9006, 0.0 ], [ 4662.280299999751151, 5642261.2609, 0.0 ], [ 4591.4386, 5642155.4526, 0.0 ], [ 4587.216000000014901, 5642149.4254, 0.0 ], [ 4582.180200000293553, 5642142.5072, 0.0 ], [ 4576.260200000368059, 5642134.7208, 0.0 ], [ 4570.27379999961704, 5642127.1973, 0.0 ], [ 4564.026300000026822, 5642119.6911, 0.0 ], [ 4555.244800000451505, 5642109.6863, 0.0 ], [ 4540.423600000329316, 5642094.0912, 0.0 ], [ 4521.90639999974519, 5642076.5828, 0.0 ], [ 4505.988499999977648, 5642062.9452, 0.0 ], [ 4495.557500000111759, 5642054.8537, 0.0 ], [ 4481.677099999971688, 5642044.7072, 0.0 ], [ 4462.914599999785423, 5642032.251, 0.0 ], [ 4454.125599999912083, 5642026.8774, 0.0 ], [ 4436.629599999636412, 5642016.9938, 0.0 ], [ 4426.443900000303984, 5642011.7128, 0.0 ], [ 4415.223299999721348, 5642006.2772, 0.0 ], [ 4406.224100000225008, 5642002.1967, 0.0 ], [ 4397.961400000378489, 5641998.6618, 0.0 ], [ 4389.166600000113249, 5641995.1156, 0.0 ], [ 4378.450400000438094, 5641991.0886, 0.0 ], [ 4369.899600000120699, 5641988.1007, 0.0 ], [ 4359.190999999642372, 5641984.6342, 0.0 ], [ 4346.230499999597669, 5641980.8381, 0.0 ], [ 4332.145399999804795, 5641977.1961, 0.0 ], [ 4314.272199999541044, 5641973.28, 0.0 ], [ 4294.416500000283122, 5641969.5716, 0.0 ], [ 4271.907200000248849, 5641966.9084, 0.0 ], [ 4251.878700000233948, 5641965.4557, 0.0 ], [ 4234.786999999545515, 5641964.965, 0.0 ], [ 4196.942300000227988, 5641964.8861, 0.0 ], [ 4002.861800000071526, 5641964.5645, 0.0 ], [ 3972.891200000420213, 5641964.5172, 0.0 ], [ 3841.810200000181794, 5641964.3106, 0.0 ], [ 3807.330199999734759, 5641964.2562, 0.0 ], [ 3660.713999999687076, 5641964.025, 0.0 ], [ 3647.798600000329316, 5641963.7829, 0.0 ], [ 3638.501600000075996, 5641963.2293, 0.0 ], [ 3627.036600000225008, 5641962.2457, 0.0 ], [ 3617.656200000084937, 5641961.0928, 0.0 ], [ 3607.657200000248849, 5641959.5778, 0.0 ], [ 3597.110600000247359, 5641957.6351, 0.0 ], [ 3588.339700000360608, 5641955.7766, 0.0 ], [ 3577.879999999888241, 5641953.1515, 0.0 ], [ 3571.110299999825656, 5641951.2793, 0.0 ], [ 3564.783800000324845, 5641949.3857, 0.0 ], [ 3558.644399999640882, 5641947.4041, 0.0 ], [ 3550.486899999901652, 5641944.5771, 0.0 ], [ 3540.044999999925494, 5641940.6467, 0.0 ], [ 3529.676799999549985, 5641936.1998, 0.0 ], [ 3518.299599999561906, 5641930.8311, 0.0 ], [ 3509.474000000394881, 5641926.4049, 0.0 ], [ 3489.843000000342727, 5641915.1433, 0.0 ], [ 3470.775399999693036, 5641902.3484, 0.0 ], [ 3453.804100000299513, 5641889.193, 0.0 ], [ 3439.17960000038147, 5641876.3024, 0.0 ], [ 3426.035000000149012, 5641863.274, 0.0 ], [ 3397.286199999973178, 5641833.1086, 0.0 ], [ 3390.071100000292063, 5641825.5381, 0.0 ], [ 3377.323699999600649, 5641812.1625, 0.0 ], [ 3375.876199999824166, 5641813.5779, 0.0 ], [ 3351.266699999570847, 5641835.3288, 0.0 ], [ 3116.584099999628961, 5642034.1642, 0.0 ], [ 3113.274400000460446, 5642037.411, 0.0 ], [ 3107.191999999806285, 5642043.0764, 0.0 ], [ 3097.167899999767542, 5642052.8479, 0.0 ], [ 3080.6102, 5642070.0978, 0.0 ], [ 3065.090699999593198, 5642087.4722, 0.0 ], [ 3054.615399999544024, 5642099.9023, 0.0 ], [ 3044.664900000207126, 5642112.0562, 0.0 ], [ 3034.105200000107288, 5642126.0083, 0.0 ], [ 3027.029400000348687, 5642135.9554, 0.0 ], [ 3015.540300000458956, 5642152.6979, 0.0 ], [ 3003.560999999754131, 5642170.4954, 0.0 ], [ 2993.930499999783933, 5642185.0394, 0.0 ], [ 2984.89130000025034, 5642200.1754, 0.0 ], [ 2974.038800000213087, 5642220.3783, 0.0 ], [ 2968.171699999831617, 5642232.5815, 0.0 ], [ 2962.849600000306964, 5642244.8424, 0.0 ], [ 2957.70920000039041, 5642257.6546, 0.0 ], [ 2952.978400000371039, 5642270.9303, 0.0 ], [ 2949.268400000408292, 5642282.2314, 0.0 ], [ 2945.973799999803305, 5642293.0548, 0.0 ], [ 2943.189799999818206, 5642303.6028, 0.0 ], [ 2941.162399999797344, 5642312.7351, 0.0 ], [ 2939.726599999703467, 5642319.1378, 0.0 ], [ 2938.206000000238419, 5642329.2002, 0.0 ], [ 2936.854299999773502, 5642338.1634, 0.0 ], [ 2935.807199999690056, 5642347.1374, 0.0 ], [ 2934.383500000461936, 5642426.9538, 0.0 ], [ 2933.103600000031292, 5642495.576, 0.0 ], [ 2931.656700000166893, 5642576.0206, 0.0 ], [ 2931.656700000166893, 5642595.352, 0.0 ], [ 2931.656899999827147, 5642627.5118, 0.0 ], [ 2931.571299999952316, 5642666.984, 0.0 ], [ 2931.658400000073016, 5642675.2527, 0.0 ], [ 2931.575000000186265, 5642696.2072, 0.0 ], [ 2931.488099999725819, 5642734.4552, 0.0 ], [ 2931.402499999850988, 5642768.535, 0.0 ], [ 2931.401999999769032, 5642802.4475, 0.0 ], [ 2931.400899999774992, 5642829.4046, 0.0 ], [ 2931.236399999819696, 5642865.6859, 0.0 ], [ 2931.015800000168383, 5642928.21, 0.0 ], [ 2931.015800000168383, 5642965.0028, 0.0 ], [ 2931.017500000074506, 5643001.0649, 0.0 ], [ 2930.886400000192225, 5643043.3756, 0.0 ], [ 2931.0152000002563, 5643077.3405, 0.0 ], [ 2930.878999999724329, 5643115.9048, 0.0 ], [ 2930.604899999685585, 5643139.8282, 0.0 ], [ 2931.013600000180304, 5643176.6929, 0.0 ], [ 2930.82079999987036, 5643192.4659, 0.0 ], [ 2931.170199999585748, 5643288.041, 0.0 ], [ 2930.92850000038743, 5643307.1494, 0.0 ], [ 2931.049399999901652, 5643329.0395, 0.0 ], [ 2930.808899999596179, 5643345.3237, 0.0 ], [ 2931.051400000229478, 5643363.4409, 0.0 ], [ 2931.171799999661744, 5643384.0848, 0.0 ], [ 2930.93099999986589, 5643404.7221, 0.0 ], [ 2930.93099999986589, 5643421.7746, 0.0 ], [ 2930.932300000451505, 5643444.6002, 0.0 ], [ 2931.41509999986738, 5643467.0487, 0.0 ], [ 2931.899400000460446, 5643490.5762, 0.0 ], [ 2932.503800000064075, 5643512.95, 0.0 ], [ 2933.22829999960959, 5643530.6844, 0.0 ], [ 2934.074500000104308, 5643547.0113, 0.0 ], [ 2934.797799999825656, 5643563.2764, 0.0 ], [ 2935.523199999704957, 5643580.8126, 0.0 ], [ 2936.126000000163913, 5643613.4784, 0.0 ], [ 2936.246899999678135, 5643638.271, 0.0 ], [ 2936.005199999548495, 5643652.421, 0.0 ], [ 2935.643500000238419, 5643675.7237, 0.0 ], [ 2934.556400000117719, 5643701.1971, 0.0 ], [ 2934.193699999712408, 5643714.6214, 0.0 ], [ 2932.745000000111759, 5643742.0091, 0.0 ], [ 2932.140599999576807, 5643758.6988, 0.0 ], [ 2930.814000000245869, 5643786.563, 0.0 ], [ 2930.088700000196695, 5643802.0433, 0.0 ], [ 2929.483300000429153, 5643816.7571, 0.0 ], [ 2928.100499999709427, 5643851.0717, 0.0 ], [ 2927.876600000075996, 5643858.052, 0.0 ], [ 2927.809200000017881, 5643861.4184, 0.0 ], [ 2927.770399999804795, 5643867.8124, 0.0 ], [ 2927.794099999591708, 5643887.8214, 0.0 ] ] ] } } 
] 
} 

我畫這個使用d3.js屏幕，這是從http://vallandingham.me/shapefile_to_geojson.html

var OpenData; (function (OpenData) { 
    var CalgaryMap = (function() { 
     function CalgaryMap() { } 
     CalgaryMap.prototype.render = function() { 
      var xy = d3.geo.albersUsa(); 
      var path = d3.geo.path().projection(xy); 
      var vis = d3.select("#map").append("svg:svg").attr("width", 900).attr("height", 900); 
      d3.json("data.json", function (json) { 
       vis.append("svg:g").attr("class", "tracts").selectAll("path").data(json.features).enter().append("svg:path").attr("d", path).attr("fill-opacity", 0.5).attr("fill", function (d) { 
        return "black"; 
       }).attr("stroke", "#222"); 
      }); 
     }; 
     return CalgaryMap; 
    })(); 
    OpenData.CalgaryMap = CalgaryMap;  })(OpenData || (OpenData = {})); 

改編下面的代碼但是我所得到的是一個混亂的爛攤子，它看起來像

我把geojson文件加載到QGIS中來驗證它，以防萬一我搞砸了。但在QGIS中它看起來很好。這使我認爲這可能是我使用的投影。我所擁有的geojson文件看起來並不像我從GPS獲知的任何座標。所以我改變了投影功能標識功能

function (location) { 
      var xCoordinate = location[0]; 
      var yCoordinate = location[1]; 
      return [ 
       xCoordinate, //scale here 
       yCoordinate 
      ]; 
     }; 

即生成

什麼我需要做的就是這件事正確投影？我想這很容易，但是我對GIS的任何知識缺乏肯定會讓我感到沮喪。

Answer 1

感謝@Superboggly我將命令更改爲ogr2ogr，並生成了更合理的GeoJSON文件。我的理解是，在GIS領域有許多不同的座標系統正在使用。我試圖在一個系統中使用一個系統中格式化的文件，這個系統需要一個不同的系統。我想我們可以放心地說結果是無意的。