1

我正在使用由 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();
        }
    }
}

它在这里在线。

谢谢！

4

0 回答 0