如何在多个地图图例与leaflet.js之间切换

How to switch between multiple map legends with leaflet.js?

本文关键字：leaflet js 之间 地图      更新时间：2023-09-26

我使用leaflet.js库创建基于统计数据的多个地图。每个地图显示不同范围的值，所以当用户更改地图时更改图例会很好。

我在这个问题中发现了类似的例子，但我需要在两个以上的层之间切换。我尝试简单地在代码中添加更多的"if"语句和逻辑运算符，但它不能正常工作:

map.on('baselayerchange', function (eventLayer) {
    if (eventLayer.name === 'Agricultural') {
        map.removeControl(VODlegend || BUDlegend || LISlegend);
        SGlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Building') {
        map.removeControl(SGlegend || LISlegend || VODlegend);
        BUDlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Forest') {
        map.removeControl(BUDlegend || VODlegend || SGlegend);
        LISlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Water') {
        map.removeControl(LISlegend || SGlegend || BUDlegend);
        VODlegend.addTo(map);
    }
  })

这是我在jsfiddle上的地图的例子。如有任何帮助，我将不胜感激

VODlegend || BUDlegend || LISlegend

在javascript中，这是一个条件(结果为真或假)…不是您期望的列表

你需要像这样跟踪你的当前控件

SGlegend.addTo(map);
currentLegend = SGlegend;

map.on('baselayerchange', function (eventLayer) {
    if (eventLayer.name === 'Agricultural') {
        map.removeControl(currentLegend );
        currentLegend = SGlegend;
        SGlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Building') {
        map.removeControl(currentLegend );
        currentLegend = BUDlegend;
        BUDlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Forest') {
       map.removeControl(currentLegend );
        currentLegend = LISlegend;
        LISlegend.addTo(map);
    }
    else if  (eventLayer.name === 'Water') {
       map.removeControl(currentLegend );
        currentLegend = VODlegend;
       VODlegend.addTo(map);
    }
  })

修改后的小提琴在这里:http://jsfiddle.net/FranceImage/X678g/

相关文章：