使用d3.js和d3-tile在地图上显示geojson

时间：2018-11-15 15:59:35

标签： javascript d3.js geojson

我正在尝试在d3地图上显示geojson FeatureCollection以及使用d3-tile的栅格图像图块。我仍然是d3的新手，我的代码基于以下示例：http://bl.ocks.org/mbostock/5342063。我仅根据需要对示例代码进行了一些更改，但未显示正确的功能。相反，它仅显示一个与任何原始要素都不匹配的多边形。 这是我的代码：

<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-tile.v0.0.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
</head>
<body>
<div id="mapplaceholder"></div>
<script>
        var map;
        var width = 800,
            height = 600;

        var pi = Math.PI,
            tau = 2 * pi;

        var projection = d3.geoMercator()
            .scale(1 / tau)
            .translate([0, 0]);

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

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

        var tile = d3.tile()
            .size([width, height]);

        var zoom = d3.zoom()
            .scaleExtent([1 << 15, 1 << 30])
            .on("zoom", zoomed);

        var raster = map.append("g");

        var vector = map.append("path");

        d3.json('../pathToGeojson', function (error, data) {
            if (error) throw error;

            var topo = topojson.topology({foo: data});

            vector
                .data(topojson.feature(topo, topo.objects.foo).features);

            var center = projection([36.8, -2.3]);

            map
                .call(zoom)
                .call(zoom.transform, d3.zoomIdentity
                    .translate(width / 2, height / 2)
                    .scale(1 << 19)
                    .translate(-center[0], -center[1]));
        });
        function zoomed(){
            var transform = d3.event.transform;

            var tiles = tile
                .scale(transform.k)
                .translate([transform.x, transform.y])
                ();

            projection
                .scale(transform.k / tau)
                .translate([transform.x, transform.y]);

            vector
                .attr("d", path);

            var image = raster
                .attr("transform", stringify(tiles.scale, tiles.translate))
                .selectAll("image")
                .data(tiles, function(d) { return d; });

            image.exit().remove();

            image.enter().append("image")
                .attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
                .attr("x", function(d) { return d[0] * 256; })
                .attr("y", function(d) { return d[1] * 256; })
                .attr("width", 256)
                .attr("height", 256);
        }
        function stringify(scale, translate) {
            var k = scale / 256, r = scale % 1 ? Number : Math.round;
            return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")";
        }

</script>
</body>
</html>

该代码在具有简单Web服务器的Web应用程序中使用。 geojson看起来像这样，但是还具有其他几何形状，例如LineStrings和Points（编辑：我添加了更多功能）：

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": "feature1", "name": "feature1", "feat_type": "feature"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.85764828172087, -2.335404074841851 ], [ 36.856889368003678, -2.335108941729609 ], [ 36.856214778032836, -2.33460299925148 ], [ 36.856889368003678, -2.334181380519706 ], [ 36.857437472354981, -2.334518675505125 ], [ 36.857437472354981, -2.334476513631948 ], [ 36.857437472354981, -2.334476513631948 ], [ 36.857437472354981, -2.334476513631948 ], [ 36.85764828172087, -2.335404074841851 ] ] ] } },
{ "type": "Feature", "properties": { "id": "feature2", "name": "feature2", "feat_type": "feature"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.865026609526922, -2.338228920344739 ], [ 36.865363904512336, -2.338355405964271 ], [ 36.865363904512336, -2.338355405964271 ], [ 36.865764442307523, -2.338587296266747 ], [ 36.865490390131868, -2.339072157808287 ], [ 36.864731476414676, -2.338903510315578 ], [ 36.865026609526922, -2.338228920344739 ] ] ] } },
{ "type": "Feature", "properties": { "id": "feature3", "name": "feature3", "feat_type": "feature"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.867493079107795, -2.340400256813376 ], [ 36.867303350678498, -2.34033701400361 ], [ 36.867303350678498, -2.34033701400361 ], [ 36.867429836298029, -2.339788909652303 ], [ 36.867935778776157, -2.339788909652303 ], [ 36.867893616902983, -2.340294852130433 ], [ 36.867493079107795, -2.340400256813376 ] ] ] } },
{ "type": "Feature", "properties": { "id": "feature4", "name": "feature4", "feat_type": "feature"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.872278451713434, -2.331567344382706 ], [ 36.872236289840259, -2.331103563777754 ], [ 36.872489261079323, -2.330892754411867 ], [ 36.873058446367217, -2.331230049397286 ], [ 36.872826556064744, -2.331693830002238 ], [ 36.872278451713434, -2.331567344382706 ] ] ] } },
{ "type": "Feature", "properties": { "id": "feature11", "name": "feature11" , "feat_type": "feature2"}, "geometry": { "type": "Point", "coordinates": [ 36.872876031057537, -2.320937782858229 ] } },
{ "type": "Feature", "properties": { "id": "feature12", "name": "feature12" , "feat_type": "feature2"}, "geometry": { "type": "Point", "coordinates": [ 36.851982389177003, -2.312485877997692 ] } },
{ "type": "Feature", "properties": { "id": "feature13", "name": "feature13", "feat_type": "feature3" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.890206654022911, -2.309659676741433 ], [ 36.89180550135876, -2.307571560802752 ], [ 36.894862145924279, -2.308245967801851 ], [ 36.896940799828087, -2.307950414621859 ], [ 36.899095429489236, -2.30646039320028 ], [ 36.901100956361589, -2.305418110533866 ], [ 36.904959199698091, -2.306319757052799 ], [ 36.908077302589305, -2.305801735490355 ], [ 36.909267365644148, -2.304086276442748 ], [ 36.909495360045867, -2.300428195499849 ], [ 36.907830032591512, -2.297215298296949 ], [ 36.906497674897459, -2.294712179115095 ], [ 36.904757534235728, -2.291909817923712 ], [ 36.902756646539345, -2.289779028927487 ], [ 36.900347819436938, -2.287460989835627 ], [ 36.898531953902555, -2.285703783642722 ], [ 36.898088798087727, -2.284209910996393 ], [ 36.898128510290128, -2.282418104195283 ], [ 36.899243121393525, -2.281523807538451 ], [ 36.900615773233682, -2.281824465703755 ], [ 36.902543731984828, -2.283059202707961 ], [ 36.903764971829396, -2.285412824065027 ], [ 36.904876883472852, -2.286385052247149 ], [ 36.906732200283166, -2.2865370948077 ], [ 36.907330076096564, -2.283700834220139 ], [ 36.908223643588812, -2.281686279913119 ], [ 36.91067423693071, -2.280793918719318 ], [ 36.914751789129348, -2.284010320888258 ], [ 36.919493382009634, -2.289990191907096 ], [ 36.924607410904308, -2.295074678502266 ], [ 36.93009399003391, -2.299189109199189 ], [ 36.934618710073757, -2.301211589061965 ], [ 36.940705258767984, -2.3010711061018 ], [ 36.946900550159043, -2.302760005125859 ], [ 36.949013110150126, -2.304741642389577 ], [ 36.951979738610682, -2.306388531055736 ], [ 36.955058088008812, -2.307774257987615 ], [ 36.959509131479336, -2.309497951906135 ], [ 36.96199662909455, -2.308829561958696 ], [ 36.963854540651717, -2.307226958236045 ], [ 36.967090005127567, -2.302527757832334 ], [ 36.970168710105412, -2.303689464811532 ], [ 36.974842640138476, -2.305301437745682 ], [ 36.975433649433036, -2.307280896026452 ], [ 36.977733276172707, -2.30825482473658 ], [ 36.980366135428781, -2.309789214969427 ], [ 36.982332020612709, -2.310576003381609 ], [ 36.984892351573684, -2.310915648069972 ], [ 36.987378513845862, -2.311217850958062 ], [ 36.991014458418128, -2.312044343069054 ], [ 36.993644681969002, -2.315482693613629 ], [ 36.99245736659563, -2.315257008204852 ], [ 36.989712814533966, -2.313946457278833 ], [ 36.985778595436898, -2.31409017964237 ], [ 36.983736155851496, -2.314945911803334 ], [ 36.979689921586377, -2.315574775701643 ], [ 36.974530090013431, -2.316351355159561 ], [ 36.972451442452602, -2.316572361670167 ], [ 36.969405095946406, -2.318733245040962 ], [ 36.966766666075131, -2.321118695673395 ], [ 36.963459980674642, -2.323652493769845 ], [ 36.960819765842373, -2.327269869096566 ], [ 36.955734377409435, -2.327897113464113 ], [ 36.951765508091739, -2.326360723122501 ], [ 36.947424990342668, -2.325197103012162 ], [ 36.944049578315457, -2.323922893035129 ], [ 36.939337915592617, -2.322796048987906 ], [ 36.936740104160307, -2.322754908544693 ], [ 36.934031231319715, -2.322526943479286 ], [ 36.932696545866456, -2.321591699082516 ], [ 36.929244951386309, -2.321698617219638 ], [ 36.925792928753928, -2.322104175093782 ], [ 36.922972578243318, -2.321988020309535 ], [ 36.919707817593448, -2.321236575835484 ], [ 36.916925192652265, -2.3207098261637 ], [ 36.913659739344752, -2.320443673554277 ], [ 36.909727982250686, -2.319019271026336 ], [ 36.90779949532083, -2.318120470139003 ], [ 36.905240885478641, -2.316698103082949 ], [ 36.903573887733884, -2.314642440310375 ], [ 36.900830010177657, -2.313033146786631 ], [ 36.898790211076566, -2.312134180609505 ], [ 36.897160065628526, -2.310265230724478 ], [ 36.895453561353911, -2.30985205672643 ], [ 36.890206654022911, -2.309659676741433 ] ], [ [ 36.958466464623868, -2.311960355238763 ], [ 36.956461373562085, -2.312666762507906 ], [ 36.956569453606193, -2.314944164326765 ], [ 36.957940911154495, -2.316140771295733 ], [ 36.958346799552587, -2.317783963965324 ], [ 36.957119459055235, -2.319611448683422 ], [ 36.955112907631204, -2.321325801751712 ], [ 36.955666273746637, -2.32364118155401 ], [ 36.957334902807801, -2.324651568575013 ], [ 36.960490837916744, -2.323722853243678 ], [ 36.963166069118998, -2.32156147360194 ], [ 36.965655995621013, -2.319213153434554 ], [ 36.970150968897237, -2.316195729888103 ], [ 36.972786997399396, -2.315490208337599 ], [ 36.972863820107818, -2.313661037452921 ], [ 36.9714910660256, -2.313360407874777 ], [ 36.969708427515997, -2.314216486403244 ], [ 36.967519140961613, -2.313952010655822 ], [ 36.966219714287234, -2.314286128243357 ], [ 36.965363885611644, -2.315852842890656 ], [ 36.964804424018844, -2.317793304082251 ], [ 36.962653159434538, -2.316894227058352 ], [ 36.961617467175245, -2.314466149443725 ], [ 36.960469851729719, -2.312448564388927 ], [ 36.959617114256787, -2.31185002149562 ], [ 36.958466464623868, -2.311960355238763 ] ] ] } },
{ "type": "Feature", "properties": { "id": "feature14", "name": "feature14", "feat_type": "feature3" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.884674823265129, -2.311219281434327 ], [ 36.880032991230159, -2.313228150311456 ], [ 36.879176783842667, -2.315018707164055 ], [ 36.877207360605105, -2.316732925794264 ], [ 36.87505115513035, -2.319268114463424 ], [ 36.872002300662018, -2.323127153273587 ], [ 36.869325122345586, -2.32659477117177 ], [ 36.867987003662599, -2.328011271238571 ], [ 36.866794967498208, -2.330995839039139 ], [ 36.865084212686376, -2.33341966435925 ], [ 36.863557595348439, -2.336777004992026 ], [ 36.86162477814959, -2.338789848782398 ], [ 36.860104049244214, -2.338246240728164 ], [ 36.859999210002073, -2.333953178894572 ], [ 36.859596798192008, -2.330107618002363 ], [ 36.85815438298868, -2.326857745402884 ], [ 36.856226944300062, -2.325324294259092 ], [ 36.853633945407879, -2.322184662840608 ], [ 36.850186183026892, -2.319864978392467 ], [ 36.84722182459015, -2.316911436746163 ], [ 36.845741311566002, -2.314333457920448 ], [ 36.841699210656735, -2.312423496441373 ], [ 36.836173083218718, -2.310287288814088 ], [ 36.833578126517843, -2.308491525872591 ], [ 36.830984195684785, -2.306023846086473 ], [ 36.829577205151914, -2.30393127568261 ], [ 36.828321588447857, -2.299897841112463 ], [ 36.824026644067352, -2.293470729261286 ], [ 36.829225489566838, -2.291089617165762 ], [ 36.832263821670082, -2.294155211206307 ], [ 36.835451277457267, -2.296773090100805 ], [ 36.838935060805319, -2.29976471439359 ], [ 36.843755085563465, -2.302571729697519 ], [ 36.846091365881783, -2.30365782720314 ], [ 36.850282357558086, -2.305269349608081 ], [ 36.854584362991829, -2.307105013391949 ], [ 36.858479015863438, -2.308380114526964 ], [ 36.863411656056158, -2.310403373371765 ], [ 36.870645894893912, -2.311944811358893 ], [ 36.874059729319974, -2.312173931913857 ], [ 36.876510137393581, -2.311431017523732 ], [ 36.880668079481659, -2.310392016773027 ], [ 36.883935147522266, -2.309500986331581 ], [ 36.884674823265129, -2.311219281434327 ] ] ] } },
{ "type": "Feature", "properties": { "id": "feature16", "name": "feature16", "buffer": null, "feat_type": "feature4" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.851490121248531, -2.292950375370998 ], [ 36.853410113902562, -2.292058865652651 ], [ 36.855752045496388, -2.290650172002993 ], [ 36.858257344152172, -2.289524159714799 ], [ 36.861160170352242, -2.288563494548149 ], [ 36.863687753163795, -2.288190686240646 ], [ 36.865956843267703, -2.288570674577882 ], [ 36.86658877515378, -2.288453933516839 ], [ 36.867783381944363, -2.287584843082854 ], [ 36.869141256425351, -2.28706905179549 ], [ 36.871809030442023, -2.286837657211533 ], [ 36.872955453589874, -2.286909976647228 ], [ 36.874171311572745, -2.287500218633459 ], [ 36.874731561046566, -2.288395469299185 ], [ 36.875176030110218, -2.288466742878722 ], [ 36.875949256353323, -2.287738237431279 ], [ 36.876791501713022, -2.287810102088587 ], [ 36.877445555740849, -2.288564268930076 ], [ 36.877421326805184, -2.289129128642542 ], [ 36.878403723524961, -2.289365963014994 ], [ 36.879081627324524, -2.289814180495086 ], [ 36.879314265053601, -2.290732483057274 ], [ 36.879055599201614, -2.291602980174646 ], [ 36.878282057351015, -2.29254332234561 ], [ 36.877368850077048, -2.292989171260325 ], [ 36.875683902694689, -2.293151420650819 ], [ 36.875075121117881, -2.293432960038703 ], [ 36.875214818967429, -2.293903914205675 ], [ 36.876127089775459, -2.294093573588159 ], [ 36.87760089564761, -2.294307607146532 ], [ 36.878115216688535, -2.294614359091264 ], [ 36.87898117770473, -2.294474425554755 ], [ 36.880735841502549, -2.294641800336851 ], [ 36.882046345963865, -2.294526063813505 ], [ 36.883357784957852, -2.293774817158278 ], [ 36.884013642453276, -2.293305043412989 ], [ 36.884575144505014, -2.293352952329763 ], [ 36.884972406040085, -2.293706603847728 ], [ 36.885744774315882, -2.29356652605857 ], [ 36.886329986678909, -2.293402632516031 ], [ 36.887920556006257, -2.29378159178722 ], [ 36.8884813698782, -2.294300248226803 ], [ 36.889300089402155, -2.294466224749674 ], [ 36.890165193607778, -2.294914719905183 ], [ 36.890397872389386, -2.295809490488276 ], [ 36.889952154159097, -2.296585567414985 ], [ 36.889390303618917, -2.296773033796597 ], [ 36.888991278614583, -2.297619791437084 ], [ 36.888709938606439, -2.297995973523512 ], [ 36.887889938810112, -2.298700879700511 ], [ 36.887186760037878, -2.299523645745739 ], [ 36.886647476831683, -2.300276042240974 ], [ 36.885804976443971, -2.300368937925517 ], [ 36.884423989301844, -2.300672867630372 ], [ 36.883628738296636, -2.300459845697706 ], [ 36.882598735895691, -2.300764296281513 ], [ 36.880445865580356, -2.300878770635356 ], [ 36.87876114841275, -2.300876254327739 ], [ 36.876398493989434, -2.300449050618421 ], [ 36.874293056676258, -2.300139915659651 ], [ 36.873123084455251, -2.300161701131609 ], [ 36.871251465414147, -2.299970598953881 ], [ 36.870176276222267, -2.299192259057149 ], [ 36.869147711469353, -2.29853167530108 ], [ 36.868541020886148, -2.297400980639159 ], [ 36.86830888254817, -2.29615316203258 ], [ 36.868638030915612, -2.295094481844194 ], [ 36.8695750191523, -2.294389768717796 ], [ 36.870979596126418, -2.293944662679543 ], [ 36.871635104880752, -2.293710270302222 ], [ 36.871682180205212, -2.293522042790984 ], [ 36.867894325320755, -2.291680477465111 ], [ 36.867309292789074, -2.291726676548322 ], [ 36.866840765546328, -2.292102569965254 ], [ 36.865294164061702, -2.293653704997828 ], [ 36.864380261622429, -2.294570282509319 ], [ 36.862670773771882, -2.295509200657304 ], [ 36.861288549168307, -2.296660440411681 ], [ 36.86023470697485, -2.297270818762527 ], [ 36.858198864104615, -2.297385438682392 ], [ 36.856374100529116, -2.297170855692895 ], [ 36.854596487368852, -2.296720972307915 ], [ 36.852959091909469, -2.2963889841124 ], [ 36.851650083488778, -2.295516141430662 ], [ 36.850809570100175, -2.294290952773574 ], [ 36.850576289384826, -2.293819862432307 ], [ 36.85083444284205, -2.293302440000866 ], [ 36.851490121248531, -2.292950375370998 ] ] ] } },
{ "type": "Feature", "properties": { "id": "feature17", "name": "feature17", "buffer": null , "feat_type": "feature4"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 36.893388536652843, -2.361836759355703 ], [ 36.892579107149622, -2.363247778077709 ], [ 36.892578149362201, -2.363883289941079 ], [ 36.892295289733518, -2.365248035034795 ], [ 36.891334500185216, -2.36616453131863 ], [ 36.89065532850055, -2.366540093766164 ], [ 36.890725208846924, -2.366752038066483 ], [ 36.891239975728915, -2.366776362176807 ], [ 36.892222638739838, -2.366872013335602 ], [ 36.892783744674148, -2.367202395626373 ], [ 36.893179912981054, -2.368285727303905 ], [ 36.893107473024827, -2.369768481472593 ], [ 36.893246842926779, -2.370451283108422 ], [ 36.892895341827959, -2.37078027114768 ], [ 36.891748518539487, -2.370919741949914 ], [ 36.890672074478154, -2.370941631850301 ], [ 36.889501353330999, -2.371410588607881 ], [ 36.888634691535842, -2.371974159711307 ], [ 36.887815400618628, -2.372161203018918 ], [ 36.887207175224674, -2.372042582719045 ], [ 36.886927158787344, -2.371524329355062 ], [ 36.886998500995134, -2.370771240610531 ], [ 36.88753820149126, -2.36978349518855 ], [ 36.887820000812589, -2.369124878245656 ], [ 36.887773984565165, -2.368606983722943 ], [ 36.887236281444693, -2.368276635803575 ], [ 36.885645469145089, -2.368015286460294 ], [ 36.884475716794881, -2.367848731173412 ], [ 36.883424000500426, -2.366999771919848 ], [ 36.883074534688035, -2.365987128335102 ], [ 36.882514540549884, -2.364927087615164 ], [ 36.882281789197862, -2.364102922702655 ], [ 36.882376315804429, -2.363491095819079 ], [ 36.882073649396361, -2.362478525088958 ], [ 36.882052921064265, -2.36071319050774 ], [ 36.882429810307976, -2.359066150923061 ], [ 36.883062922130584, -2.358196235661857 ], [ 36.883298306745928, -2.357278637116158 ], [ 36.883955100485096, -2.35622045715151 ], [ 36.884237034358399, -2.355467690457473 ], [ 36.884542190048478, -2.354832645891888 ], [ 36.884824300065517, -2.353962191715661 ], [ 36.884873439145444, -2.352408797116878 ], [ 36.885155476344565, -2.351585416948603 ], [ 36.885390996511468, -2.350573666222887 ], [ 36.885392341395431, -2.349679246100413 ], [ 36.885744363387374, -2.348997196009891 ], [ 36.886073373952755, -2.348056198741757 ], [ 36.886312457221528, -2.344667170563584 ], [ 36.88643203094815, -2.342949118614767 ], [ 36.886691929745687, -2.341278353803592 ], [ 36.887231565148667, -2.340314135385697 ], [ 36.887980845721174, -2.339985744827965 ], [ 36.888822985956772, -2.340151781065912 ], [ 36.889922276817693, -2.340482968236569 ], [ 36.890694184407437, -2.340672435135758 ], [ 36.891257820942933, -2.340599455982333 ], [ 36.892509065066186, -2.34074163461517 ], [ 36.892758639633541, -2.340399612310895 ], [ 36.893064679816284, -2.340236320266842 ], [ 36.89329817606469, -2.340348259926952 ], [ 36.893448986295461, -2.340651593594624 ], [ 36.893826112889506, -2.340966197048409 ], [ 36.894505176938658, -2.341099056192518 ], [ 36.895180416390104, -2.341315131527546 ], [ 36.895785485307293, -2.34202462167831 ], [ 36.896032738394645, -2.342342920189226 ], [ 36.896010615749084, -2.342847503919676 ], [ 36.896615028657813, -2.342748429201261 ], [ 36.897502521771052, -2.342752481772232 ], [ 36.898367842545419, -2.342558039754185 ], [ 36.899256656444123, -2.342589689761964 ], [ 36.899908940664453, -2.342573403340373 ], [ 36.900905356884763, -2.342582613472291 ], [ 36.901325643941519, -2.343195225496237 ], [ 36.901394530062099, -2.344077991830293 ], [ 36.900854895662413, -2.345042223182741 ], [ 36.900103783781304, -2.346594575970325 ], [ 36.899492682230012, -2.34840605227788 ], [ 36.899115822947792, -2.350053117504089 ], [ 36.898154489840252, -2.351346233212826 ], [ 36.897778153816532, -2.35264023248586 ], [ 36.896818085452182, -2.353085992904679 ], [ 36.896395405148169, -2.354073931299604 ], [ 36.896415700307884, -2.356145270100937 ], [ 36.897000242026344, -2.356452145705454 ], [ 36.897210207045205, -2.356876141075416 ], [ 36.896951994649399, -2.357417114062074 ], [ 36.89575763886279, -2.358050815499878 ], [ 36.894936975894552, -2.359155834348403 ], [ 36.893388536652843, -2.361836759355703 ] ] ] } },
{ "type": "Feature", "properties": { "id": "feature19" , "name": "feature19" , "feat_type": "feature5" },"geometry": { "type": "LineString", "coordinates": [ [ 36.82816232953698, -2.319080459038131 ], [ 36.828646251132959, -2.318815826949693 ], [ 36.828979764665327, -2.31858713251241 ], [ 36.829568317957737, -2.318302897946003 ], [ 36.830621174403042, -2.317714826248047 ], [ 36.831350326537532, -2.317290107647583 ], [ 36.831945419310969, -2.316989537484134 ], [ 36.832344327653608, -2.316881724257787 ], [ 36.832651683261865, -2.316911127865787 ], [ 36.832995006015771, -2.317081015366716 ], [ 36.833354677472244, -2.317159424975675 ], [ 36.834005355834407, -2.317126754305799 ], [ 36.834574290683733, -2.317038543493401 ], [ 36.835071291241761, -2.317018941089896 ], [ 36.835767745971118, -2.317009139888035 ], [ 36.836601529802032, -2.316956866810353 ], [ 36.837288175309837, -2.316904593730712 ], [ 36.837948662893552, -2.316891525460512 ], [ 36.838494709559285, -2.316677532518704 ], [ 36.839194434029153, -2.316504377900914 ], [ 36.839697974068223, -2.316285484297172 ], [ 36.840299606322681, -2.316298552572969 ], [ 36.841097423007945, -2.316285484297172 ], [ 36.841630390711629, -2.316311620848652 ], [ 36.842078345161958, -2.316151534463276 ], [ 36.842594964163077, -2.315955510293275 ], [ 36.843212945120108, -2.315899970106837 ], [ 36.843762261526351, -2.315769287306663 ], [ 36.84416770935001, -2.315694144691096 ], [ 36.844376972742872, -2.315720281253479 ], [ 36.845370973858941, -2.315542225912663 ], [ 36.846152441841646, -2.315450747930696 ], [ 36.846917561121771, -2.315228587092781 ], [ 36.84746360778751, -2.315068500585018 ], [ 36.847816739762955, -2.314612743999678 ], [ 36.848150253295323, -2.314344844002993 ], [ 36.848500115530257, -2.314112881769839 ], [ 36.849461419241187, -2.313831913380274 ], [ 36.850167683192076, -2.313524808332641 ], [ 36.850579670496771, -2.313152361696296 ], [ 36.851148605346097, -2.312868126039594 ], [ 36.851629257201566, -2.312534884162667 ], [ 36.851956231252906, -2.312209809903381 ], [ 36.852191652569864, -2.311843897080225 ], [ 36.852786745343302, -2.312438505369941 ], [ 36.85308102198951, -2.31256918847714 ], [ 36.853643417357809, -2.312598592174603 ], [ 36.854150227137389, -2.312703138649536 ], [ 36.854761668613385, -2.312804418039769 ], [ 36.855140958512941, -2.312908964499524 ], [ 36.855438504899659, -2.313183398919735 ], [ 36.855892998831017, -2.313493771116696 ], [ 36.856403078351107, -2.313742068825342 ], [ 36.856736591883468, -2.314067142733469 ], [ 36.856968743459923, -2.314308906194704 ], [ 36.857282638549208, -2.314545769005252 ], [ 36.857988902500097, -2.31486594212075 ], [ 36.858825956071527, -2.315218785878529 ], [ 36.859401430401881, -2.315496486922424 ], [ 36.860274451118961, -2.315668008128216 ], [ 36.860918590000097, -2.31579542386766 ], [ 36.861402511596076, -2.31606332359013 ], [ 36.862059729439267, -2.316298552572969 ], [ 36.862769263130673, -2.316602389951329 ], [ 36.863357816423076, -2.316720004402871 ], [ 36.863845007759572, -2.316831084709236 ], [ 36.864302771431454, -2.316974835681025 ], [ 36.864678791590492, -2.317301542380802 ], [ 36.864989416939267, -2.31747469690114 ], [ 36.865895135061479, -2.317982725607413 ], [ 36.866536004202096, -2.318374773358987 ], [ 36.86788313729361, -2.319118030256547 ], [ 36.868975230625082, -2.319712635493465 ], [ 36.869786126272402, -2.320300706361017 ], [ 36.870270047868381, -2.320542468757873 ], [ 36.871283667427527, -2.320712355822811 ], [ 36.871708733694277, -2.320679685234981 ], [ 36.872297286986679, -2.320931248741767 ], [ 36.872781208582666, -2.321088067528555 ] ] } },
{ "type": "Feature", "properties": { "id": "feature20", "name": "feature20" , "feat_type": "feature6"}, "geometry": { "type": "LineString", "coordinates": [ [ 36.789285932268363, -2.225361912869857 ], [ 36.79708796321961, -2.232228486178203 ], [ 36.797089554640465, -2.232229586186679 ], [ 36.824026642235204, -2.279223449165097 ], [ 36.824032221295802, -2.279219294076975 ], [ 36.859283082798484, -2.321642167263624 ], [ 36.859277943128802, -2.321624657045928 ], [ 36.870184604408998, -2.322435053646428 ],  [ 36.870184604408998, -2.322435053646428 ], [ 36.893240128609051, -2.308456540879649 ],  [ 36.893234375273686, -2.308474245559029 ], [ 36.967721394129867, -2.313119078357253 ] ] } },
{ "type": "Feature", "properties": { "id": "feature21", "name": "feature21" , "feat_type": "feature7" }, "geometry": { "type": "LineString", "coordinates": [ [ 36.788537026182667, -2.22349410148281 ], [ 36.788080946119671, -2.226281800119597 ], [ 36.788349212892925, -2.228221951160228 ], [ 36.788828152754256, -2.23031396364283 ], [ 36.790541149699521, -2.233226173135369 ], [ 36.793757699034998, -2.238080412530227 ], [ 36.795439715379807, -2.241568452702271 ], [ 36.796639530549548, -2.245146694594882 ], [ 36.79837953659198, -2.250150270690776 ], [ 36.801468448069983, -2.259762841547133 ], [ 36.803267381073624, -2.265645490154163 ], [ 36.804403816205081, -2.271284668052256 ], [ 36.806023968876204, -2.275833473351113 ], [ 36.807826939832026, -2.27903381938392 ], [ 36.811193110647338, -2.284600663171251 ], [ 36.817384494937677, -2.294839452560761 ], [ 36.81990517737934, -2.301632566641905 ], [ 36.821884974578303, -2.30745497182513 ], [ 36.824168248337976, -2.311853322707214 ], [ 36.82783419550713, -2.318466392985103 ], [ 36.828344719402139, -2.319588624792799 ], [ 36.829634269213578, -2.323591446225939 ], [ 36.830527657916704, -2.33050335913068 ], [ 36.831786693851114, -2.334748620894273 ], [ 36.837194825877553, -2.344940979818003 ], [ 36.84236211472205, -2.355011776264799 ], [ 36.845861116765569, -2.373938750229903 ], [ 36.850693956399773, -2.396550485511288 ] ] } }
]
}

结果看起来像图像。当应该有许多多边形和线时，只有一个非常小的多边形。 Resulting map

我不知道我在做什么错。我建议它与geojson以及将其加载到地图有关。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分：0)

问题是如何将路径添加到地图：

// Initial path creation:
var vector = map.append("path");

// Adding data to the path once the data is loaded:
vector.data(topojson.feature(topo, topo.objects.foo).features);

// Updating the path data when zoomed:
 vector.attr("d", path);

初始附加map.append("path")仅创建一个路径元素。加载数据后，将数据绑定到选择vector.data(...)。由于您的数据是由多个要素组成的数组，但是您的选择仅包含一个路径元素，因此只能使用新数据更新一个现有路径。

但是，您的选择vector现在拥有一个Enter选择：vector.enter()，其中包含数据数组中每个项目的占位符元素，而路径元素尚不存在。这些绝对不会附加，因此永远不会绘制或更新。相反，您需要正确使用D3输入/更新/退出周期，这里最简单的方法是使用类似以下内容的

var vector = map.selectAll("path") // select all paths assuming all paths are to be features. This can be selectAll(null) too - we want an empty selection so that all features are entered.
  .data(features)     // bind data to them
  .enter()            // get the enter selection (placeholders for new elements that must be added so that an element exists for each item in the data array).
  .append("path");   // append new paths and return them in a new selection.

然后我们可以像以前一样在缩放上进行更新。

http://bl.ocks.org/Andrew-Reid/e3f242b645f167cb17d470246764ef4d

相关问题
最新问题