Question

沿着tutorial on choropleth maps in Leaflet跟随我意识到Shapefile＆gt; 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”属性，以便对颜色值进行编码。

这可能与Leaflet + Omnivore有关，还是需要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的{{1}}选项：

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);

这给了我以下错误：

未捕获的TypeError：无法读取属性＆＃39; Peso_na_duracao_da_amostra＆＃39;未定义的

那是因为在第三个特征上，该属性丢失了。因此，您的数据集已损坏或不完整。希望这会对你有所帮助，祝你好运，这是我实验的一部分（迄今为止）：

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

Leaflet中的TopoJSON，通过Omnivore：阅读属性

1 个答案: