创建一个geojson-vt并在Leaflet 0.7中显示

Question

我有一个GEOJSON，我正在加载并使用Leaflet在地图上显示它，根据区域中动物的丰富程度对它们进行颜色编码，并能够显示包含更多信息的弹出窗口。

我一直试图将其转换为使用geojson-vt的vectorTile并显示它。这个多边形geojson是较小的一个，需要很长时间才能加载，而另一些则崩溃浏览器。

我已经厌倦了这里的例子http://bl.ocks.org/Sumbera/c67e5551b21c68dc8299，但我无法理解发生了什么。

我对如何显示这些数据的其他想法肯定持开放态度，我非常喜欢新手。

如果您希望看到我目前所拥有的内容，请查看http://huntingspots.co.nz/gareth/leaflet_layering.html。

非常感谢你的时间。

    //Pig Layer
    var pigLayer = new L.LayerGroup();
      $.getJSON("feralpig.geojson",function(hoodData){
      L.geoJson( hoodData, {
    style: function(feature){
        var fillColour,
            abundance = feature.properties.Abundance;
        if (abundance == "H") fillColour = "#194866";
        else if ( abundance == "M" ) fillColour = "#2c7eb2";
        else if ( abundance == "L" ) fillColour = "#40b5ff";
        else fillColour = "#f7f7f7";  // no data
      return { color: "#999", weight: 1, fillColor: fillColour, fillOpacity: .4 };
    },
    onEachFeature: function( feature, layer ){
      layer.bindPopup( "<strong>" + "Species: " + "</strong>" + feature.properties.Scientific 
        + "<br/>" + "<strong>" + "Common Name: " + "</strong>" + feature.properties.CommonName
                + "<br/>" + "<strong>" + "Abundance: " + "</strong>" + feature.properties.Abundance 
                + "<br/>" + "<strong>" + "Data collection method: " + "</strong>" + feature.properties.AbundRelia 
        + "<br/>" + "<strong>" + "Notes: " + "</strong>" + feature.properties.AbundNotes);
    }
  }).addTo(pigLayer);
});