MapBox 隐藏层按钮文本更改

Question

抱歉，这是一个简单的问题，但我的网站上有一个 2 层的 Mapbox 地图运行。可以使用 MapBox 支持站点上的示例代码打开或关闭每一层。

但是它直接将层的名称用于菜单按钮的文本。有没有办法将其更改为更美观的标题？

非常感谢

列

下面添加的代码：

map.on('load', function() {
    // add source and layer for 2020 Tour
    map.addSource('pjuk-2020-tour', {
        type: 'vector',
        url: 'mapbox://styles/silentwitness/cka13nxh44g1v1iqd7xxr1nys'
    });

map.addLayer({
    'id': 'pjuk-2020-tour',
    'type': 'circle',
    'source': 'pjuk-2020-tour',
    'layout': {
        // make layer visible by default
        'visibility': 'visible'
    },
    'source-layer': 'pjuk-2020-tour'
});



    map.addSource('pjuk-previous-tours', {
        type: 'vector',
        url: 'mapbox://styles/silentwitness/cka13nxh44g1v1iqd7xxr1nys'
    });

map.addLayer({
    'id': 'pjuk-previous-tours',
    'type': 'circle',
    'source': 'pjuk-previous-tours',
    'layout': {
        // make layer visible by default
        'visibility': 'visible'
    },
    'source-layer': 'pjuk-previous-tours'
});


});



// enumerate ids of the layers
var toggleableLayerIds = ['pjuk-2020-tour', 'pjuk-previous-tours'];


// set up the corresponding toggle button for each layer
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;

Answer 1

使用 this example 作为模型，您可以通过多种方式来执行此操作。一种是创建一个变量来存储从所需标题到图层名称的映射，以便单击相关按钮将使用 textContent 作为此映射中的键来检索表示图层名称的值层。例如：

var titleToLayerName = {
  'PJUK Previous Tours': 'pjuk_previous_tours',
  'PJUK 2020 Tour': 'pjuk_2020_tour'
}

...

link.onclick = function(e) {
  var clickedLayer = titleToLayerName[this.textContent];
  ... 
};

MapBox 隐藏层按钮文本更改

MapBox Hide Layer Button Text Change

mapbox