Angular2中的GeoJson地图

Posted 2023-02-16

【中文标题】Angular2中的GeoJson地图

【英文标题】：GeoJson Map in Angular2

【发布时间】：2017-07-30 10:30:52

【问题描述】：

我正在使用以下代码创建一个非常基本的 GeoJson 美国地图。我的问题是我不希望它完全是黑色的，而是显示状态（没有逻辑只显示整个地图）。我缺少哪个属性？

     geoPath = d3.geo.path();
     width: number = 1000;
     height: number = 600;
     geoPath = d3.geo.path();     
     usaFeatureCollection = 
         "type": "FeatureCollection", "features": [
              "type": "Feature", "id": "USA", "properties":  "name": "United States of America" , "geometry":  "type": "MultiPolygon", "coordinates": [[[[-155.54211, 19.08348], [-155.68817, 18.91619], [-155.93665, 19.05939], [-155.90806, 19.33888], [-156.07347, 19.70294], [-156.02368, 19.81422], [-155.85008, 19.97729], [-155.91907, 20.17395], [-155.86108, 20.26721], [-155.78505, 20.2487], [-155.40214, 20.07975], [-155.22452, 19.99302], [-155.06226, 19.8591], [-154.80741, 19.50871], [-154.83147, 19.45328], [-155.22217, 19.23972], [-155.54211, 19.08348]]], [[[-156.07926, 20.64397], [-156.41445, 20.57241], [-156.58673, 20.783], [-156.70167, 20.8643], [-156.71055, 20.92676], [-156.61258, 21.01249], [-156.25711, 20.91745], [-155.99566, 20.76404], [-156.07926, 20.64397]]], [[[-156.75824, 21.17684], [-156.78933, 21.06873], [-157.32521, 21.09777], [-157.25027, 21.21958], [-156.75824, 21.17684]]], [[[-157.65283, 21.32217], [-157.70703, 21.26442], [-157.7786, 21.27729], [-158.12667, 21.31244], [-158.2538, 21.53919], [-158.29265, 21.57912], [-158.0252, 21.71696], [-157.94161, 21.65272], [-157.65283, 21.32217]]], [[[-159.34512, 21.982], [-159.46372, 21.88299], [-159.80051, 22.06533], [-159.74877, 22.1382], [-159.5962, 22.23618], [-159.36569, 22.21494], [-159.34512, 21.982]]], [[[-94.81758, 49.38905], [-94.64, 48.84], [-94.32914, 48.67074], [-93.63087, 48.60926], [-92.61, 48.45], [-91.64, 48.14], [-90.83, 48.27], [-89.6, 48.01], [-89.272917, 48.019808], [-88.378114, 48.302918], [-87.439793, 47.94], [-86.461991, 47.553338], [-85.652363, 47.220219], [-84.87608, 46.900083], [-84.779238, 46.637102], [-84.543749, 46.538684], [-84.6049, 46.4396], [-84.3367, 46.40877], [-84.14212, 46.512226], [-84.091851, 46.275419], [-83.890765, 46.116927], [-83.616131, 46.116927], [-83.469551, 45.994686], [-83.592851, 45.816894], [-82.550925, 45.347517], [-82.337763, 44.44], [-82.137642, 43.571088], [-82.43, 42.98], [-82.9, 42.43], [-83.12, 42.08], [-83.142, 41.975681], [-83.02981, 41.832796], [-82.690089, 41.675105], [-82.439278, 41.675105], [-81.277747, 42.209026], [-80.247448, 42.3662], [-78.939362, 42.863611], [-78.92, 42.965], [-79.01, 43.27], [-79.171674, 43.466339], [-78.72028, 43.625089], [-77.737885, 43.629056], [-76.820034, 43.628784], [-76.5, 44.018459], [-76.375, 44.09631], [-75.31821, 44.81645], [-74.867, 45.00048], [-73.34783, 45.00738], [-71.50506, 45.0082], [-71.405, 45.255], [-71.08482, 45.30524], [-70.66, 45.46], [-70.305, 45.915], [-69.99997, 46.69307], [-69.237216, 47.447781], [-68.905, 47.185], [-68.23444, 47.35486], [-67.79046, 47.06636], [-67.79134, 45.70281], [-67.13741, 45.13753], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.645476, 43.090238], [-70.81489, 42.8653], [-70.825, 42.335], [-70.495, 41.805], [-70.08, 41.78], [-70.185, 42.145], [-69.88497, 41.92283], [-69.96503, 41.63717], [-70.64, 41.475], [-71.12039, 41.49445], [-71.86, 41.32], [-72.295, 41.27], [-72.87643, 41.22065], [-73.71, 40.931102], [-72.24126, 41.11948], [-71.945, 40.93], [-73.345, 40.63], [-73.982, 40.628], [-73.952325, 40.75075], [-74.25671, 40.47351], [-73.96244, 40.42763], [-74.17838, 39.70926], [-74.90604, 38.93954], [-74.98041, 39.1964], [-75.20002, 39.24845], [-75.52805, 39.4985], [-75.32, 38.96], [-75.071835, 38.782032], [-75.05673, 38.40412], [-75.37747, 38.01551], [-75.94023, 37.21689], [-76.03127, 37.2566], [-75.72205, 37.93705], [-76.23287, 38.319215], [-76.35, 39.15], [-76.542725, 38.717615], [-76.32933, 38.08326], [-76.989998, 38.239992], [-76.30162, 37.917945], [-76.25874, 36.9664], [-75.9718, 36.89726], [-75.86804, 36.55125], [-75.72749, 35.55074], [-76.36318, 34.80854], [-77.397635, 34.51201], [-78.05496, 33.92547], [-78.55435, 33.86133], [-79.06067, 33.49395], [-79.20357, 33.15839], [-80.301325, 32.509355], [-80.86498, 32.0333], [-81.33629, 31.44049], [-81.49042, 30.72999], [-81.31371, 30.03552], [-80.98, 29.18], [-80.535585, 28.47213], [-80.53, 28.04], [-80.056539, 26.88], [-80.088015, 26.205765], [-80.13156, 25.816775], [-80.38103, 25.20616], [-80.68, 25.08], [-81.17213, 25.20126], [-81.33, 25.64], [-81.71, 25.87], [-82.24, 26.73], [-82.70515, 27.49504], [-82.85526, 27.88624], [-82.65, 28.55], [-82.93, 29.1], [-83.70959, 29.93656], [-84.1, 30.09], [-85.10882, 29.63615], [-85.28784, 29.68612], [-85.7731, 30.15261], [-86.4, 30.4], [-87.53036, 30.27433], [-88.41782, 30.3849], [-89.18049, 30.31598], [-89.593831, 30.159994], [-89.413735, 29.89419], [-89.43, 29.48864], [-89.21767, 29.29108], [-89.40823, 29.15961], [-89.77928, 29.30714], [-90.15463, 29.11743], [-90.880225, 29.148535], [-91.626785, 29.677], [-92.49906, 29.5523], [-93.22637, 29.78375], [-93.84842, 29.71363], [-94.69, 29.48], [-95.60026, 28.73863], [-96.59404, 28.30748], [-97.14, 27.83], [-97.37, 27.38], [-97.38, 26.69], [-97.33, 26.21], [-97.14, 25.87], [-97.53, 25.84], [-98.24, 26.06], [-99.02, 26.37], [-99.3, 26.84], [-99.52, 27.54], [-100.11, 28.11], [-100.45584, 28.69612], [-100.9576, 29.38071], [-101.6624, 29.7793], [-102.48, 29.76], [-103.11, 28.97], [-103.94, 29.27], [-104.45697, 29.57196], [-104.70575, 30.12173], [-105.03737, 30.64402], [-105.63159, 31.08383], [-106.1429, 31.39995], [-106.50759, 31.75452], [-108.24, 31.754854], [-108.24194, 31.34222], [-109.035, 31.34194], [-111.02361, 31.33472], [-113.30498, 32.03914], [-114.815, 32.52528], [-114.72139, 32.72083], [-115.99135, 32.61239], [-117.12776, 32.53534], [-117.295938, 33.046225], [-117.944, 33.621236], [-118.410602, 33.740909], [-118.519895, 34.027782], [-119.081, 34.078], [-119.438841, 34.348477], [-120.36778, 34.44711], [-120.62286, 34.60855], [-120.74433, 35.15686], [-121.71457, 36.16153], [-122.54747, 37.55176], [-122.51201, 37.78339], [-122.95319, 38.11371], [-123.7272, 38.95166], [-123.86517, 39.76699], [-124.39807, 40.3132], [-124.17886, 41.14202], [-124.2137, 41.99964], [-124.53284, 42.76599], [-124.14214, 43.70838], [-124.020535, 44.615895], [-123.89893, 45.52341], [-124.079635, 46.86475], [-124.39567, 47.72017], [-124.68721, 48.184433], [-124.566101, 48.379715], [-123.12, 48.04], [-122.58736, 47.096], [-122.34, 47.36], [-122.5, 48.18], [-122.84, 49], [-120, 49], [-117.03121, 49], [-116.04818, 49], [-113, 49], [-110.05, 49], [-107.05, 49], [-104.04826, 48.99986], [-100.65, 49], [-97.22872, 49.0007], [-95.15907, 49], [-95.15609, 49.38425], [-94.81758, 49.38905]]], [[[-153.006314, 57.115842], [-154.00509, 56.734677], [-154.516403, 56.992749], [-154.670993, 57.461196], [-153.76278, 57.816575], [-153.228729, 57.968968], [-152.564791, 57.901427], [-152.141147, 57.591059], [-153.006314, 57.115842]]], [[[-165.579164, 59.909987], [-166.19277, 59.754441], [-166.848337, 59.941406], [-167.455277, 60.213069], [-166.467792, 60.38417], [-165.67443, 60.293607], [-165.579164, 59.909987]]], [[[-171.731657, 63.782515], [-171.114434, 63.592191], [-170.491112, 63.694975], [-169.682505, 63.431116], [-168.689439, 63.297506], [-168.771941, 63.188598], [-169.52944, 62.976931], [-170.290556, 63.194438], [-170.671386, 63.375822], [-171.553063, 63.317789], [-171.791111, 63.405846], [-171.731657, 63.782515]]], [[[-155.06779, 71.147776], [-154.344165, 70.696409], [-153.900006, 70.889989], [-152.210006, 70.829992], [-152.270002, 70.600006], [-150.739992, 70.430017], [-149.720003, 70.53001], [-147.613362, 70.214035], [-145.68999, 70.12001], [-144.920011, 69.989992], [-143.589446, 70.152514], [-142.07251, 69.851938], [-140.985988, 69.711998], [-140.992499, 66.000029], [-140.99777, 60.306397], [-140.012998, 60.276838], [-139.039, 60.000007], [-138.34089, 59.56211], [-137.4525, 58.905], [-136.47972, 59.46389], [-135.47583, 59.78778], [-134.945, 59.27056], [-134.27111, 58.86111], [-133.355549, 58.410285], [-132.73042, 57.69289], [-131.70781, 56.55212], [-130.00778, 55.91583], [-129.979994, 55.284998], [-130.53611, 54.802753], [-131.085818, 55.178906], [-131.967211, 55.497776], [-132.250011, 56.369996], [-133.539181, 57.178887], [-134.078063, 58.123068], [-135.038211, 58.187715], [-136.628062, 58.212209], [-137.800006, 58.499995], [-139.867787, 59.537762], [-140.825274, 59.727517], [-142.574444, 60.084447], [-143.958881, 59.99918], [-145.925557, 60.45861], [-147.114374, 60.884656], [-148.224306, 60.672989], [-148.018066, 59.978329], [-148.570823, 59.914173], [-149.727858, 59.705658], [-150.608243, 59.368211], [-151.716393, 59.155821], [-151.859433, 59.744984], [-151.409719, 60.725803], [-150.346941, 61.033588], [-150.621111, 61.284425], [-151.895839, 60.727198], [-152.57833, 60.061657], [-154.019172, 59.350279], [-153.287511, 58.864728], [-154.232492, 58.146374], [-155.307491, 57.727795], [-156.308335, 57.422774], [-156.556097, 56.979985], [-158.117217, 56.463608], [-158.433321, 55.994154], [-159.603327, 55.566686], [-160.28972, 55.643581], [-161.223048, 55.364735], [-162.237766, 55.024187], [-163.069447, 54.689737], [-164.785569, 54.404173], [-164.942226, 54.572225], [-163.84834, 55.039431], [-162.870001, 55.348043], [-161.804175, 55.894986], [-160.563605, 56.008055], [-160.07056, 56.418055], [-158.684443, 57.016675], [-158.461097, 57.216921], [-157.72277, 57.570001], [-157.550274, 58.328326], [-157.041675, 58.918885], [-158.194731, 58.615802], [-158.517218, 58.787781], [-159.058606, 58.424186], [-159.711667, 58.93139], [-159.981289, 58.572549], [-160.355271, 59.071123], [-161.355003, 58.670838], [-161.968894, 58.671665], [-162.054987, 59.266925], [-161.874171, 59.633621], [-162.518059, 59.989724], [-163.818341, 59.798056], [-164.662218, 60.267484], [-165.346388, 60.507496], [-165.350832, 61.073895], [-166.121379, 61.500019], [-165.734452, 62.074997], [-164.919179, 62.633076], [-164.562508, 63.146378], [-163.753332, 63.219449], [-163.067224, 63.059459], [-162.260555, 63.541936], [-161.53445, 63.455817], [-160.772507, 63.766108], [-160.958335, 64.222799], [-161.518068, 64.402788], [-160.777778, 64.788604], [-161.391926, 64.777235], [-162.45305, 64.559445], [-162.757786, 64.338605], [-163.546394, 64.55916], [-164.96083, 64.446945], [-166.425288, 64.686672], [-166.845004, 65.088896], [-168.11056, 65.669997], [-166.705271, 66.088318], [-164.47471, 66.57666], [-163.652512, 66.57666], [-163.788602, 66.077207], [-161.677774, 66.11612], [-162.489715, 66.735565], [-163.719717, 67.116395], [-164.430991, 67.616338], [-165.390287, 68.042772], [-166.764441, 68.358877], [-166.204707, 68.883031], [-164.430811, 68.915535], [-163.168614, 69.371115], [-162.930566, 69.858062], [-161.908897, 70.33333], [-160.934797, 70.44769], [-159.039176, 70.891642], [-158.119723, 70.824721], [-156.580825, 71.357764], [-155.06779, 71.147776]]]]  
         ]
     

     svgContainer = d3.select("body").append("svg")
         .attr("width", this.width)
         .attr("height", this.height)
         .style("border", "2px solid steelblue")
         .call(this.zoom);
     usaSVG = this.svgContainer
         .append("path")
         .attr("d", this.geoPath(this.usaFeatureCollection));

【问题讨论】：

这是你的geojson还是只是问题的一个例子？

【参考方案1】：

我把我的代码改成了这个，它对我有用：

width: number = 1000;
height: number = 600;

geoPath = d3.geo.path();

usaFeatureCollection = "https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-states.json";

usaSVG = this.svgContainer
     .append("path")
     .attr("d", this.geoPath(this.usaFeatureCollection))
     .style( fill: "none", stroke: "black" );