GeoJson и D3.js мултиполигон

Имам този файл с геометрична форма, така че няма карта на град.

Shapefile

Shapefile

Съхранявам го в ГИС база данни като GeoJson. Сега искам да визуализирам данните от geojson. Първо създадох данните от GeoJson с QGIS и ги експортирах като координатна референтна система WGS 84 EPSG:4326. Това са примерни данни за Shapefile one:

{
   "type":"FeatureCollection",
   "crs":{
      "type":"name",
      "properties":{
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Membership":0.000000,
            "Membership_1":0.000000,
            "Membership_2":0.000000,
            "Membership_3":0.000000,
            "Membership_4":0.000000,
            "Membership_5":0.000000,
            "Membership_6":0.000000,
            "Membership_7":0.000000,
            "Membership_8":0.000000,
            "Membership_9":0.997638,
            "Asymmetry":0.622090,
            "Elliptic_F":0.368607,
            "Density":1.720265,
            "Radius_of_":2.122269,
            "Rectangula":0.701797,
            "Radius_of__1":0.341230,
            "Main_direc":63.913780,
            "Mean_red":251.683422,
            "Mean_green":253.246326,
            "Mean_blue":251.654027,
            "Shape_inde":1.663047,
            "Compactnes":2.373016,
            "Roundness":1.781040,
            "Border_ind":1.603306
         },
         "geometry":{
            "type":"MultiPolygon",
            "coordinates":[
               [
                  [
                     [
                        0.0,
                        293.0
                     ],
                     [
                        116.0,
                        293.0
                     ],
                     [
                        116.0,
                        288.0
                     ],
                     [
                        117.0,
                        288.0
                     ],
                     [
                        117.0,
                        287.0
                     ],

GeoJson Shapefile две геометрията е в края:

{
   "type":"FeatureCollection",
   "crs":{
      "type":"name",
      "properties":{
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Ratio_red":0.337287,
            "Ratio_gree":0.324566,
            "Ratio_blue":0.338147,
            "Asymmetry":0.233023,
            "Elliptic_F":0.835821,
            "Density":2.111246,
            "Radius_of_":1.191572,
            "Max_diff":0.040743,
            "Rectangula":0.958607,
            "Ratio_DSM_":1.001866,
            "Diff_DSM_w":0.604676,
            "LengthWidt":1.266667,
            "Radius_of__1":0.894812,
            "Main_direc":0.507535,
            "Standard_d":4.209384,
            "Standard_d_1":13.755727,
            "Standard_d_2":12.358206,
            "Standard_d_3":16.194083,
            "Standard_d_4":21.437695,
            "Standard_d_5":0.486436,
            "Mean_slope":195.593284,
            "Mean_slope_1":34.988806,
            "Mean_red":143.451493,
            "Mean_green":138.041045,
            "Mean_blue":143.817164,
            "Mean_DSM":324.615672,
            "Shape_inde":1.038440,
            "Mean_Diff_":0.604676,
            "Compactnes":1.063433,
            "Brightness":141.769900,
            "Roundness":0.296759,
            "Area_m2":1.715200,
            "Border_ind":1.000000
         },
         "geometry":{
            "type":"MultiPolygon",
            "coordinates":[
               [
                  [
                     [
                        -1.796831198293312,
                        46.775409744271464
                     ],
                     [
                        -1.796815938387422,
                        46.775411620389058
                     ],

Геометрията е в края на файла. Вече опитах неща от тази публикация, но това работи само за полигони, а не за мултиполигони:

Карта на място/вътрешна среда с помощта на D3.js и Geojson

Опитах се да визуализирам и двете със следния код:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

    //Width and height
    var w = 800;
    var h = 800;
var colors = d3.scale.category20();
    var projection = d3.geo.mercator()
                       .translate([w/2, h/2]);

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

    //Define path generator
    var path = d3.geo.path();

    //Create SVG element
    var svg = d3.select("body").append("svg").attr({width: w, height: h});

    //Load in GeoJSON data
    d3.json("imageOne.json", function(json) {

        //Bind data and create one path per GeoJSON feature
        svg.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", path)
           .style("fill", function(d,i){return colors(i)});
   });
</script>

След стартиране на скрипта получавам за първите данни следния резултат:

Геометрично изображение

Опитвайки скрипта за второто изображение, получавам бяла страница.

Качих двата шейп файла Shapefiles


person user2644964    schedule 20.05.2015    source източник
comment
Какво точно не работи? Бихте ли споделили пълен пример? D3 може да изобразява многополигони, както и многоъгълници.   -  person Alex Morega    schedule 21.05.2015
comment
Хей, благодаря за отговора, актуализирах основния въпрос, където можете да видите кода и резултата.   -  person user2644964    schedule 21.05.2015


Отговори (1)


Борих се с този тип проблеми в продължение на дни. Оказва се, че координатната система, използвана за сериализиране на картата, е проектирана вместо геометрична, което означава, че данните вече са били съхранени като стойности x и y на 2d равнина, а не координати на сфера.

Майк Босток го обяснява точно къде в тази публикация на групите в Google:

https://groups.google.com/forum/#!topic/d3-js/OSp_sMZjfok

Проблемът е, че d3.geo.projection е предназначен основно за преобразуване на сферични координати в декартови координати, така че когато създавате екземпляр на d3.geo.projection от необработена функция за проекция, той приема сферични координати. Това означава, че предполага, че вашата функция за необработена проекция приема радиани λ и φ като вход, преобразува входните координати от градуси в радиани и извършва адаптивно повторно семплиране на изхода.

Всичко това го прави страхотен за внедряване на нови географски проекции, но вероятно ще искате да поемете по различен път за внедряване на персонализирана декартова проекция.

Един подход е да се приложи потребителски геометричен поток. Това е API от по-ниско ниво, който ви позволява да контролирате как точно се трансформира геометрията и е подходящ за прост мащаб и превод:

http://bl.ocks.org/mbostock/6216797

Въоръжени с това знание, разбира се, изпомпването на точките през проекция, която очаква данните да са сферични, ще доведе до голяма бъркотия.

Ако видях шейп файла или geojson в приложението QGIS, долу вдясно се показва Координата Референтна система (CRS), използвана за кодиране на стойностите. В моя случай той използваше 5320 (което е проектирано/2d) вместо нещо като 4326 (което е географска координатна система)

person flyer    schedule 28.02.2019
comment
Създадох репо за github, за да изобразя моя geoJson, който е сериализиран в декартови координати: github.com/flyer1/ng- карта - person flyer; 01.03.2019