2016-04-08 8 views
0

いくつかの値(ある国のコンテンツアイテムの数)に応じて、マップ上の国を色付けする必要があります。その値が0(NULL)の場合、それぞれの国を色付け/表示するべきではありません。Leaflet.jsのプロパティでTopoJSON機能をフィルタリングする方法は?

Leaflet.jsという意味では、世界の各国の機能を含むGeoJSONファイルがあります。 GeoJSON入力ファイルを使用している場合しかし、機能のみをレンダリングされたコンテンツアイテムの数がある場合(マップに追加)0より大きい、これはLeaflet.js: is it possible to filter geoJSON features by property?

これに答えるために、すでに同様の働きにGeoJSONのためのスニペットは次のとおりです。

var mapLayer = L.geoJson(world, { 
    filter: function(feature, layer) { 
    return getContentItems(feature.properties.ISO2, "count"); 
    }, 
    onEachFeature: function (feature, layer) { 
    var contentCount = getContentItems(feature.properties.ISO2, "count"); 
    if (contentCount) { 
     layer.setStyle({ 
     'weight': 1, 
     'fillOpacity': .75, 
     'fillColor': "#0077c8", // Actually a function depending on contentCount 
     'opacity': .75, 
     'color': "#0077c8" 
     }); 
    } 
    } 
}); 

GeoJSONファイルは、マップ上の詳細のために、11 MBほどの大きさです。私はTopoJSONについて学びました。これは、元のファイルが同じグレードの詳細で2 MB未満になったので非常に素晴らしいです。 TopoJSONのデータを地図に表示することもできましたが、フィルタを適用する方法はわかりません。

はここTopoJSON層を追加するための私の現在の抜粋です:

L.TopoJSON = L.GeoJSON.extend({ 
    addData: function(jsonData) { 
    if (jsonData.type === "Topology") { 
     for (key in jsonData.objects) { 
     geojson = topojson.feature(jsonData, jsonData.objects[key]); 
     L.GeoJSON.prototype.addData.call(this, geojson); 
     } 
    } 
    else { 
     L.GeoJSON.prototype.addData.call(this, jsonData); 
    } 
    } 
}); 

var topoLayer = new L.TopoJSON(); 
$.getJSON('scripts/world.topo.json') 
    .done(addTopoData); 

function addTopoData(topoData) { 
    topoLayer.addData(topoData); 
    topoLayer.addTo(map); 
    topoLayer.eachLayer(handleLayer); 
} 

function handleLayer(layer) { 
    layer.setStyle({'opacity': 0}); // Too late. 
} 

私は運なしTopoJSON宣言内にGeoJSON拡張にフィルタ機能を追加しようとしました。 handleLayer()関数は遅れていると思いますが、その機能は既に追加されています。

編集:私は、パフォーマンス上の理由

function handleLayer(layer) { 
    var contentCount = getContentItems(layer.feature.properties.ISO2, "count"); 
    if (contentCount == 0) { 
    map.removeLayer(layer); 
    } 
} 

にhandleLayer()関数を変更することにより、コンテンツ数が0であれば、層を除去することができる午前 、しかし私は、フィルタリングしたいと思います描画される前のフィーチャ私はちょうどフィルタ関数を追加する必要があるところで今止まっています。

+0

私は、L.TopoJSON(L.GeoJSONを継承しています)の呼び出しでフィルターを入れてみました。 http://stackoverflow.com/questions/4152931/javascript-inheritance-call-super-constructor-or-use-prototype-chain too – YaFred

+0

私に道を見せてくれてありがとう。私はその道を下り、解決策を見つけました。 – Paul

答えて

0

フランスの画像で提案されているように、ちょっと深いJavascriptで継承に関する情報を読んだところ、私は自分自身で探していた解決策を見つけました。代わりにちょうどvar topoLayer = new L.TopoJSON();で新しいTopoJSONオブジェクトを作成するので、私は、オプションとして、カスタムフィルタ関数を渡すことができる午前:

var topoLayer = new L.TopoJSON(null, { 
    filter: function(feature, layer) { 
    return getNN(feature.properties.ISO2, "check"); 
    }, 
    onEachFeature: function (feature, layer) { 
    var contentCount = getContentItems(feature.properties.ISO2, "count"); 
    if (contentCount) { 
     layer.setStyle({ 
     'weight': 1, 
     'fillOpacity': .75, 
     'fillColor': "#0077c8", 
     'opacity': .75, 
     'color': "#0077c8" 
     }); 
    } 
    } 
}); 

handleLayers機能を有する層を削除する必要はありません。

関連する問題