Mapbox GL JS 使用自定义控件切换图层答案

【问题标题】：Mapbox GL JS toggle layers using custom controlsMapbox GL JS 使用自定义控件切换图层
【发布时间】：2019-07-31 00:46:04
【问题描述】：

我一直在使用下面的 Mapbox GL JS 示例来使用不同的选项来打开和关闭图层。本示例中使用的文本按钮 (https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/) 运行良好，但我现在需要创建带有图标的自定义按钮，这些按钮可以切换具有唯一 ID 的一系列地图图层的图层。关于如何最好地实现这一点，我已经尝试了一些不同的想法，但还没有走远。有没有办法用菜单中的图标或其他类型的按钮替换附加的链接？谢谢！

var toggleableLayerIds = ['sample-one', "sample-two"];

for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];

    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;

    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();

        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };

    var layers = document.getElementById('menu');
    layers.appendChild(link);
}

【问题讨论】：

标签： javascript mapbox-gl-js

【解决方案1】：

您可以通过在添加菜单元素之前创建其他元素来实现此目的

见下面的代码：

var toggleableLayerIds = ['sample-one', "sample-two"];

for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];

    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;

    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();

        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };
    var button = document.createElement('div');
    var icon = document.createElement('img');
    icon.src = '[path to your icon]';
    button.appendChild(img);
    button.appendChild(link);
    var layers = document.getElementById('menu');
    layers.appendChild(button);
}

在这里，我创建了一个包含图像元素和链接的 div。您可以根据需要自定义菜单。

【讨论】：