1

Leaflet.js で構築された CartoDB を使用してインタラクティブ マップに取り組んでいます。最初のクリック後に正常に機能するレイヤーセレクターを追加しました。最初のクリックは機能しません。選択したレイヤー (レイヤー 2) をクリックすると再読み込みされますが、他のレイヤーをクリックすると、2 回目のクリックまでデータがマップから削除されます。最初のクリックが応答しない場合の解決策を知っている人はいますか?

レイヤー セレクターの html:

<div id="cartocss" class="layer_selector" style="margin-top: -200px; z-index: 100; position: relative; width: 10em; background: white;">
    <p id="js-crime-selector">LAYER SELECTOR</p>
        <ul class="LayerSelector-list">
            <li data="0" class="mt-layer-select">Layer 1
        </li>
            <li data="1" class="mt-layer-select reset-view">Layer 2
        </li>
            <li data="2" class="mt-layer-select route-22">Route 22
        </li>
    </ul>
</div>

そして、クリックを検出してセレクターを作成するjs：

var vizjson = 'https://thomvandegeer.cartodb.com/api/v2/viz/a8fc004a-b86b-11e5-b7ca-0ecd1babdde5/viz.json';
cartodb.createLayer(map_object, vizjson)
.addTo(map_object)
.done(function(layer) {
    $(".mt-layer-select").on('click', function(e) {
        var num = +$(e.target).attr('data');
        createSelector(layer,num,$(e.target));
    })
    $(".route-22").on('click', function(){
        map_object.setView([52.3665, 4.897], 17, {animation: true});
    })
    $(".reset-view").on('click', function(){
        map_object.setView([52.37, 4.9], 15, {animation: true});
    })
});

function createSelector(layer,num) {
    for (var i = 0; i < layer.getSubLayerCount(); i++) {
        if (i === num) {
            layer.getSubLayer(i).show();
        } else {
            layer.getSubLayer(i).hide();
        }
    }
}

そして、それはここでオンラインです。

ありがとう！

4

0 に答える 0