Question

我有一个带有按钮的传单地图（简易按钮插件https://github.com/CliffCloud/Leaflet.EasyButton）。单击地图上的按钮添加路径图层（插件https://github.com/perliedman/leaflet-routing-machine）。请点击按钮，帮我添加按钮显示/隐藏图层的事件。地图示例：

代码示例：http://spatialhast.github.io/leaflet.routing.html

    var map = L.map('map', {
        center: [50.0669, 35.1638],
        zoom: 15
    });

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; Map Data <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    L.easyButton('fa-level-up',
        function() {

            var routing = L.Routing.control({
                plan: L.Routing.plan([
                    L.latLng(50.07132, 35.14103),
                    L.latLng(50.05459, 35.18239)
                ], {
                    waypointIcon: function(i) {
                        return new L.Icon.Label.Default({
                            labelText: String.fromCharCode(65 + i)
                        });
                    },
                    geocoder: L.Control.Geocoder.nominatim()
                }),
                routeWhileDragging: true,
                routeDragTimeout: 250
            });

    var rlayer = L.layerGroup([routing]);
    map.hasLayer(rlayer) ? map.removeLayer(rlayer) : map.addLayer(rlayer);      

    },
        'Display Route'
    ).addTo(map);

我使用map.hasLayer(rlayer) ? map.removeLayer(rlayer) : map.addLayer(rlayer);但在第二次点击后路由图层不隐藏

Answer 1

使用L.control.layers（http://leafletjs.com/reference.html#control-l.control）为您的路线图层。它会在地图上添加一个按钮。您可以使用该按钮切换图层。

Answer 2

您应该在easybutton函数之外声明变量rlayer。试试这个：

var rlayer = null;
L.easyButton('fa-level-up',
function() {
if(rlayer) {
  map.removeLayer(rlayer);
  rlayer = null;
} else {
  var routing = L.Routing.control(...);
  rlayer = L.layerGroup([routing]);
  map.addLayer(rlayer);      
}
}, 'Display Route' ).addTo(map);

https://gis.stackexchange.com/questions/130948/hide-show-route-layer-in-leaflet-when-click-on-button-easy-button-plugin

Answer 3

删除

 var rlayer = L.layerGroup([routing]);
    map.hasLayer(rlayer) ? map.removeLayer(rlayer) : map.addLayer(rlayer);      

    },
        'Display Route'
    ).addTo(map);

.addTo（map）;然后您可以使用：

routing.hide（）;

可以解决问题并显示以再次显示！

单击按钮（Easy Button插件）时在Leaflet中隐藏/显示路径图层

3 个答案: