TopoJSON in Leaflet, через Omnivore: свойства чтения

Question

Пока я следую за tutorial on choropleth maps in Leaflet, я понял, что преобразование Shapefile> GeoJSON генерирует очень большой файл. TopoJSON оказалась лучшей альтернативой, за исключением того, что не удалось получить доступ к свойствам для каждой геометрии. Я слился данные из https://github.com/centraldedados/violencia-domestica в TopoJSON file converted from a Shapefile, структурирована следующим образом:

{ 
 
    "transform": { 
 
    "scale": [ 
 
     0.0025081552497290688, 
 
     0.0012125352320998587 
 
    ], 
 
    "translate": [ 
 
     -31.26818656921381, 
 
     30.03017616271984 
 
    ] 
 
    }, 
 
    "objects": {"PRT_adm1": { 
 
    "geometries": [ 
 
     { 
 
     "type": "Polygon", 
 
     "arcs": [[ 
 
      0, 
 
      1, 
 
      2, 
 
      3, 
 
      4 
 
     ]], 
 
     "properties": { 
 
      "ENGTYPE_1": "District", 
 
      "ISO": "PRT", 
 
      "NL_NAME_1": null, 
 
      "HASC_1": "PT.EV", 
 
      "ID_0": 182, 
 
      "NAME_0": "Portugal", 
 
      "TYPE_1": "Distrito", 
 
      "ID_1": 1, 
 
      "NAME_1": "Évora", 
 
      "CCN_1": 0, 
 
      "CCA_1": null, 
 
      "dgai_violencia_domestica_2008_2014": { 
 
      "Valores": [ 
 
       { 
 
       "Ano": "2009", 
 
       "Entidade": [ 
 
        {"GNR": "216"}, 
 
        {"PSP": "171"} 
 
       ] 
 
       }, 
 
       { 
 
       "Ano": "2010", 
 
       "Entidade": [ 
 
        {"GNR": "247"}, 
 
        {"PSP": "162"} 
 
       ] 
 
       }, 
 
       { 
 
       "Ano": "2011", 
 
       "Entidade": [ 
 
        {"GNR": "248"}, 
 
        {"PSP": "181"} 
 
       ] 
 
       }, 
 
       { 
 
       "Ano": "2012", 
 
       "Entidade": [ 
 
        {"GNR": "277"}, 
 
        {"PSP": "150"} 
 
       ] 
 
       }, 
 
       { 
 
       "Ano": "2013", 
 
       "Entidade": [ 
 
        {"GNR": "207"}, 
 
        {"PSP": "169"} 
 
       ] 
 
       }, 
 
       { 
 
       "Ano": "2014", 
 
       "Entidade": [ 
 
        {"GNR": "226"}, 
 
        {"PSP": "137"} 
 
       ] 
 
       } 
 
      ], 
 
      "Distrito": "Évora", 
 
      "Factor_amostra": 0.020521270111203194, 
 
      "Somatorio_amostra": 2391 
 
      }, 
 
      "VARNAME_1": null 
 
     } 
 
     }, 
 
     ...

и хотели бы получить доступ к свойству «dgai_violencia_domestica_2008_2014.Factor_amostra» каждого объекта, таким образом, чтобы закодировать значение цвета.

Возможно ли это с Листовкой + Омнивором, или нужна ли d3 или другая библиотека?

тока, сломанный версия карты живет here, с соответствующим кодом существа:

L.mapbox.accessToken = '...'; 
 
var map = L.mapbox.map('map', 'mapbox.streets').setView([39.5, -8.60], 7); 
 

 
// Omnivore will AJAX-request this file behind the scenes and parse it: 
 
// note that there are considerations: 
 
// - The file must either be on the same domain as the page that requests it, 
 
// or both the server it is requested from and the user's browser must 
 
// support CORS. 
 

 
// Internally this function uses the TopoJSON library to decode the given file 
 
// into GeoJSON. 
 

 
function getColor(d) { 
 
    return d > 0.75 ? '#800026' : 
 
      d > 0.50 ? '#FC4E2A' : 
 
      d > 0.25 ? '#FD8D3C' : 
 
         '#FFEDA0'; 
 
} 
 

 
var pt = omnivore.topojson('dgai_violencia_domestica_2008_2014.topo.json'); 
 

 
function style(geometry) { 
 
    return { 
 
    fillColor: getColor(geometry.properties.dgai_violencia_domestica_2008_2014.Peso_na_duracao_da_amostra), 
 
    weight: 1, 
 
    opacity: 1, 
 
    color: 'white', 
 
    dashArray: '3', 
 
    fillOpacity: 1 
 
}; 
 
} 
 

 
pt.setStyle(style); 
 
pt.addTo(map);

толчок в правильном направлении, любой?

Заранее спасибо.

Answer 1

ли некоторые испытания и, как выясняется, функция SetStyle не будет выполняться:

pt.setStyle(function (feature) { 
    console.log('Yay, i am executed!'); 
    return { 
     'color': 'red' 
    } 
}); 

С помощью этого Yay, i am executed! никогда не будет регистрироваться в консоли. Это заставило меня подозревать, что что-то не так с методом Omnivore setStyle. Так что я попробовал его с помощью пользовательского слоя:

var geojson = new L.GeoJSON(null); 

var pt = omnivore.topojson(url, null, geojson).addTo(map); 

geojson.setStyle(function (feature) { 
    console.log('Yay, i am executed!'); 
    return { 
     'color': 'red' 
    }; 
}); 

То же самое, Yay, i am executed! не нужно регистрироваться на консоли. Одно осталось, чтобы попытаться был style вариант L.GeoJSON:

var geojson = new L.GeoJSON(null, { 
    'style': function (feature) { 
     console.log('Yay, i am executed!'); 
     return { 
      'color': 'red' 
     }; 
    } 
}); 

var pt = omnivore.topojson(url, null, geojson).addTo(map); 

и вот, что делает то, что он должен делать. Так что я пытался сделать это с вашим стилем и функции цвета и набора данных:

function getColor(d) { 
    return d > 0.75 ? '#800026' : 
      d > 0.50 ? '#FC4E2A' : 
      d > 0.25 ? '#FD8D3C' : 
         '#FFEDA0'; 
} 

function getStyle (feature) { 
    return { 
     fillColor: getColor(feature.properties.dgai_violencia_domestica_2008_2014.Peso_na_duracao_da_amostra), 
     weight: 1, 
     opacity: 1, 
     color: 'white', 
     dashArray: '3', 
     fillOpacity: 1 
    }; 
} 

var geojson = new L.GeoJSON(null, { 
    'style': getStyle 
}); 

var pt = omnivore.topojson(url, null, geojson).addTo(map); 

Это дает мне следующее сообщение об ошибке:

Uncaught TypeError: Cannot read property 'Peso_na_duracao_da_amostra' of undefined

Это потому, что на третьей функции, это свойство отсутствует. Таким образом, ваш набор данных поврежден или неполный. Надеюсь, это поможет вам вместе, удачи, вот Plunker моего эксперимента, который работает (до сих пор):

http://plnkr.co/edit/P6t96hTaOgSxTc4TPUuV?p=preview