D3js Map:GeometryCollection与FeaturesCollection

时间:2017-02-23 09:57:16

标签: d3.js geojson

我已经在几周内绘制了地图,但每次我都有这种geojson文件(Featurecollection)。 Basicaly为卡萨布兰卡的不同邻域的多个坐标数组(在我的例子中)

  

{" type":" FeatureCollection"," crs":{" type":" name", "属性":{   " name":" urn:ogc:def:crs:OGC:1.3:CRS84" },"功能":[{         "输入":"功能","属性":{"名称":" sid elkhader",             " arrondissement":" Hay Hassani"," prefecture":" Hay Hassani",             "人口":18930,"地区":1616340.045},"几何":{             "输入":"多边形","坐标":[                 [                     [-7.686476562432639,33.55932544712​​9368],                     [-7.690429687499997,33.557167523684669],                     [-7.690712466572602,33.55630146957499],                     [-7.69193172454834,33.557239049346535],                     [-7.6959228515625,33.56135167528992],                     [-7.696309089660644,33.561208630718284],                     [-7.696545124053955,33.561494719624619],                     [-7.697145938873291,33.561584122213503],                     [-7.698111534118651,33.562549664276048],                     [-7.696180343627932,33.56406947713436],                     [-7.698715871374095,33.566658445267336],                     [-7.697645503668443,33.567405785590324],                     [-7.697098054802192,33.567712878788591],                     [-7.696259117371391,33.568261506969215],                     [-7.696011511349325,33.5683181977139],                     [-7.697387200000034,33.570266599999982],                     [-7.696740007740531,33.570256969950947],                     [-7.695561836061942,33.570528261065235],                     [-7.694268410063101,33.570921223641093],                     [-7.693596744041679,33.571075056616195],                     [-7.692447518598163,33.571143296338079],                     [-7.69142000156123,33.571163408675481],                     [-7.690155388704593,33.57138033300906],                     [-7.689247978305328,33.571612665313971],                     [-7.688806874513382,33.571727285593433],                     [-7.688311409275937,33.571857958148009],                     [-7.687409400000027,33.572054400000049],                     [-7.687391678068598,33.572059961946792],                     [-7.684979438782096,33.568718150423749],                     [-7.683219909667969,33.565678661594823],                     [-7.683406457011668,33.563482296958043],                     [-7.683829534164441,33.562429900601146],                     [-7.686476562432639,33.55932544712​​9368]                 ]]}},{" type":" Feature"," properties":{" name":" nassim&#34 ;" arrondissement":" Hay Hassani"," prefecture":" Hay   Hassani"," Population":18898," area":4776317.152},         "几何":{"类型":"多边形","坐标":[                 [                     [-7.665259712372787,33.530737914470194],                     [-7.663579428308825,33.5378162517151],                     [-7.660416146883682,33.53687582432655],                     [-7.653830735645996,33.533727400613216],                     [-7.653876700000025,33.5326443],                     [-7.65348,33.531745500000149],                     [-7.653190299999866,33.529947799999803],                     [-7.652943599999785,33.528677899999671],                     [-7.653615699999913,33.526604099999851],                     [-7.653936200000107,33.525365200000174],                     [-7.654509399999957,33.5241387],                     [-7.655106500000205,33.522667000000347],                     [-7.656280299999967,33.5203​​06199999879],                     [-7.656956199999512,33.519349099999339],                     [-7.658114900000093,33.517926900000134],                     [-7.658983900000114,33.516343700000149],                     [-7.659490200000375,33.515535600000646],                     [-7.6601104,33.5145457],                     [-7.660947299999948,33.513347099999926],                     [-7.662599500000061,33.511602700000104],                     [-7.664262500000047,33.510654500000086],                     [-7.666333199999984,33.509563099999966],                     [-7.668178499999983,33.50827],                     [-7.668900600000119,33.507543800000242],                     [-7.669823299999847,33.506934599999816],                     [-7.670733100000266,33.507059900000414],                     [-7.673713600000018,33.50863970000001],                     [-7.676073900000079,33.509053],                     [-7.68223779133892,33.508502572767156],                     [-7.684989189541704,33.508844023847608],                     [-7.683734893798827,33.512559745083195],                     [-7.675151824951172,33.519357925734134],                     [-7.674551010131836,33.520717497758142],                     [-7.671031951904296,33.524796085610056],                     [-7.668800354003906,33.526441777122507],                     [-7.668285369873048,33.528516734826688],                     [-7.665259712372787,33.530737914470194]                 ]]}} ....

现在,因为我正在从openstreemap http://polygons.openstreetmap.fr/index.py导出geojson文件,我有特定城镇的geojson(GeometryCollection)类型(没有社区,只有城镇的形式)< / p>

  

{&#34;类型&#34;:&#34;的GeometryCollection&#34;&#34;几何结构&#34;:[{&#34;类型&#34;:&#34;的MultiPolygon&#34; &#34;坐标&#34;:[[[[ - 5.9429266,35.745548300000003],[ - 5.9379208,35.743288800000002],[ - 5.9327023,35.7417388],[ - 5.9272307,35.741231999999997],[ - 5.9202848,35.741909499999998],[ - 5.9166306,35.746408000000002],[ - 5.9156028,35.7496942],[ - 5.9046272,35.760035999999999],[ - 5.9001726,35.762371000000002],[ - 5.8900896,35.7656931],[ - 5.8790518,35.756111199999999],[ - 5.8770798,35.7525902],[ - 5.8737711 ,35.745343900000002],[ - 5.872858,35.742017500000003],[ - 5.8727035,35.741004699999998],[ - 5.8699858,35.732553199999998],[ - 5.869492,35.731017299999998],[ - 5.8673423,35.728874099999999],[ - 5.8638447,35.7260068],[ - 5.8619479, 35.7246934],[ - 5.8556436,35.720934100000001],[ - 5.8510603,35.719324399999998],[ - 5.8464426,35.716996799999997],[ - 5.8434943,35.714585599999999],[ - 5.8387091,35.711292700000001]   ....

以下是我的问题:

  1. 当我尝试使用Geometrycollection geojson类型绘制地图时,我有一个带有空白点的巨大正方形,是因为我只有1个单一坐标数组而不是像第一个例子???
  2. 如何构建新的geojson文件以将Geomtrycollection的坐标用于FeatureCollection(因为它仅适用于该类型)???
  3. 我一直在搜索Tip 1Tip 2以及此处Tip 3 但我无法找到答案

    感谢y&#39;所有人的帮助

1 个答案:

答案 0 :(得分:1)

我无法渲染Test.json文件,因此我使用mapshaper将其转换为我们实际可以阅读的GeoJSON。然后使用d3中的新特权来获取地理数据fitSize是惊人的,并负责处理GeoJSON的所有居中和测量。

 #Test.json transformed
 {
     "type":"FeatureCollection",
     "features":[
     {
         "type":"Feature",
         "properties":{

         },
         "geometry":{
             "type":"Polygon",
             "coordinates":[

你的逻辑很好:)只使用新的d3方法。

  d3.json(fichier, function(json) {
    var projection = d3.geoMercator().fitSize([w, h], json);
    var path = d3.geoPath().projection(projection);
    svg.selectAll('path')
      .data(json.features)
      .enter()
      .append('path')
      .attr('d', path)
      .style("fill", "red")
      .style("stroke-width", "1")
      .style("stroke", "black")
      .on("mouseover", function(d) {
        //console.log(d);
      });
  });

这是更新的plnkr http://plnkr.co/edit/MHsC4J2xFC0nrHXSZQGQ?p=preview