Question

我正在使用由Leaflet.js构建的CartoDB处理交互式地图。我添加了一个图层选择器，在第一次单击后工作正常。第一次点击不起作用，如果我点击选定的图层（第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();
        }
    }
}

它在线here。

谢谢！

CartoDB首次点击图层选择器不起作用

0 个答案: